大家好，我是IT修真院北京分院第22期的学员杨纲，一枚正直纯洁善良的WEB前端程序员。
1背景介绍
什么是DOM DOM 是 Document Object Model（文档对象模型）的缩写。 DOM是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。 在 HTML DOM中，所有事物都是节点。DOM 是被视为节点树的 HTML。
2知识剖析
1什么是DOM节点 HTML 文档中的所有内容都是节点 整个文档是一个文档节点 每个 HTML 元素是元素节点 HTML 元素内的文本是文本节点 每个 HTML 属性是属性节点 注释是注释节点。 >
课程目标
理解react的框架使用中，真实dom存在的意义。
使用真实dom和使用虚拟dom的场景。
灵活掌握并能够合理使用 *** 作真实dom的方法。
知识点
react中提供了ref这个属性来获取原生的dom节点，使用方式：在虚拟dom中添加ref属性，即可在组件实例的refs属性中获取该真实dom节点。由于组件实例化的时候，真实dom节点是在最后才生成的。所以，我们获取真实dom节点应该是在componentDidMount这个生命周期中。
class HelloWorld extends Component{
render(){
return <div>
<h1 ref="h">hello world</h1>
</div>
}
componentDidMount(){
consolelog(thisrefsh); // 打印的是h1这个dom节点。
}
}
ref也可以使用在组件标签上使用，此时获取的是该组件标签的组件实例。如下：
class Button extends Component{
render(){
return <button>确定</button>
}
}
let btn = ReactcreateElement()
propsref function
propsref(btn)
class HelloWrold extends Component{
getBtnThis = btn => {
consolelog(btn) // Button组件的第二个组件实例
}
render(){
return <div>
<Button ref="btn"></Button>
/
let btn = new Button()
btnref === typeof function
btnref(btn)
}
findDomNode这个方法可以根据组件实例（每个组件实例都对应的有一段dom节点获取该组）件实例所对应的真实dom节点。该方法的使用如下
/
context 一个组件的组件实例
dom 该组件实例所对应的真实dom节点。
/
const dom = ReactfindDomNode(context);
unmountComponentAtNode该方法的作用是：从 DOM 中移除已经挂载的 React 组件，清除相应的事件处理器和 state。如果在 container 内没有组件挂载，这个函数将什么都不做。如果组件成功移除，则返回 true；如果没有组件被移除1，则返回 false。
const result = ReactunmountComponentAtNode(DOMElement container)
掌握在什么情况下需要真实的dom节点；react的虚拟dom不能实现的原生dom的api的情况，比如：文本框自动聚焦，音频视频相关的api，获取元素的宽高和位置等。基本原则是：能不用真实dom节点尽量不用，实在不能用虚拟dom的时候，才使用真实dom节点。再一种情况是，现有的一些库是针对dom *** 作而构建的，那么想要把这些库和react结合在一起，就必须要使用真实dom节点，比如swiper betterScroll echarts等等。
授课思路
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 thisrefs[refName] 就会返回这个真实的 DOM 节点。
var MyComponent = ReactcreateClass({
handleClick: function() {
thisrefsmyTextInputfocus();
},
render: function() {
return (
<div>
<input type="text" ref="myTextInput" />
<input type="button" value="Focus the text input" onClick={thishandleClick} />
</div>
);
}
});
ReactDOMrender(
<MyComponent />,
documentgetElementById('example')
);
通过id属性获取，是从DOM文档树中获取单个指定元素的最为快捷的方法。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401 Transitional//EN" ">以上就是关于DOM常见的 *** 作方式有哪些全部的内容，包括:DOM常见的 *** 作方式有哪些、怎么样通过js DOM获取一个节点的文本内容、ref与DOM-findDomNode-unmountComponentAtNode等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）