在以往的工作当中，通常会遇到需要处理 DOM 的时候， DOM *** 作属于一个常规的范畴，我们可能需要通过它绑定一个事件、调整滚动条的位置、管理焦点、文本选择、媒体播放等等。
基于工程页面、逻辑复杂性、复用性等等因素可以选择合适的方案方便我们 *** 作 DOM 。
在页面比较简单和逻辑并不复杂的时候，我们可以根据实际情况选择比较简单的选择器方案；当工程逻辑较复杂的时候，我们要考虑组件的复用性、多人协作的不可控性等多种因素，选择方案的时候往往要考虑更多可能的场景。
如上所述，如果我们的使用场景单一，不需要复用的话，我们可以保证获取的 DOM 一致性的时候，可以考虑使用选择器获取 DOM 。
可以使用 documentgetElementXX 开头的方法：
可使用方法如下：
实际使用场景：
页面逻辑复杂的时候会有复用性的问题，如果使用 id 或者选择器就容易引发问题，这时我们可以选择使用 ref 。
ref 可以获取到相应的 DOM 节点，而且也可以得到详细信息，它得到的一个对象，包括 props，state 等。
React 会在组件挂载时给 current 属性传入 DOM 元素，并在组件卸载时传入 null 值。 ref 会在 componentDidMount 或 componentDidUpdate 生命周期钩子触发前更新。
ref 的值根据节点的类型而有所不同：
React 也支持另一种设置 refs 的方式，称为“回调 refs”。
不同于传递 createRef() 创建的 ref 属性，你会传递一个函数。这个函数中接受 React 组件实例或 HTML DOM 元素作为参数，以使它们能在其他地方被存储和访问。
React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。
父组件想要 *** 作子组件且没有控制权的时候可以选择使用 findDOMNode 。
findDOMNode 只在已挂载的组件上可用（即：已经存在 DOM 中的组件）。如果尝试调用未挂载的组件将会引发异常。
findDOMNode 不能用于函数组件。
如果组件已经被挂载到 DOM 上，此方法会返回浏览器中相应的原生 DOM 元素。此方法对于从 DOM 中读取值很有用，例如获取表单字段的值或者执行 DOM 检测。
当组件渲染的内容为 null 或 false 时，findDOMNode 也会返回 null。当组件渲染的是字符串时，findDOMNode 返回的是字符串对应的 DOM 节点。从 React 16 开始，组件可能会返回有多个子节点的 fragment，在这种情况下，findDOMNode 会返回第一个非空子节点对应的 DOM 节点。
一,获取html元素
1getElementByID(id)
通过对元素的ID访问,这是DOM一个基础的访问页面元素的方法
example:
<div id="divid">测试</div>
<script language="javascript">
var div=documentgetElementByID("divid");
alert (divnodeName); //显示元素名
</script>
如果id在元素中不是唯一的,那么获得的将是第一个ID
2getElementsByName(name)
仅用于input radio checkbox等元素,返回名字为name的元素数组
example:
<div name="george"></div>
<input name="george"></div>
<script language=javascript>
var ge=documentgetElementsByName("george");
alert (georgeslength); //获取georges个数,对div唔效果
</script>
3getElementsByTagName(tagname)
返回具有tagname的元素列表数组处理大的DOM结构会用到它
二,DOM Element常用方法
1appendChild(node) //增加内容
向当前对象追加节点,example:
<div id="test">123</div>
<script type="text/javascript">
var newdiv=documentcreateElement("div");
var newtext=documentcreateTextNode("A new div");
newdivappendChild(newtext) ;
documentgetElementById("test")appendChild(newdiv) ;
</script>
当然,上面的功能用documentgetElementById("test")innerHTML="测试一下"就可实现,遗憾的是,innerHTML不属于DOM
2,removeChild(childreference)
移除当前节点的子节点,并返回节点
<div id="father"><div id="child">A child</div></div>
<script type="text/javascript">
var childnode=documentgetElementById("child");
var removednode=documentgetElementById("father")removeChild(childnode)
</script>
3cloneNode(deepBoolean)
复制并返回当前的复制节点,由于复制了原节点的id属性,所以在document树中要改ID属性,以确保ID唯一性
4,insertBefore(newElment,targetElement) 插入新的节点
在当前节点插入一个新节点,如果targetElement为null,那新节点为最后节点
example:
<body>
<span id="lovespan">熊掌我所欲也!</span>
</body>
<script type="text/javascript">
var lovespan=documentgetElementById("lovespan"); //获取id
var newspan=documentcreateElement("span");
var newspanref=documentbodyinsertBefore(newspan, lovespan);
newspanrefinnerHTML="鱼与";
</script>
三,DOM Element常用属性
1、childeNodes 返回所有子节点对象,
例如
<ul id="mylist">
<li>美国</li>
<li>意大利</li>
<li>加拿大</li>
</ul>
<script>
var msg="" ;
var mylist=documentgetElementById("mylist")
for (i=0; i<mylistchildNodeslength; i++){
var li=mylistchildNodes[i];
msg+=liinnerText;
}
alert (msg);
</script>
2,innerHTML
这是一个标准,但它并不书DOM
例如:
<div id="bbb"><span id="aaa">我拉</span></div>
<input type=button value="点击看看">
<script language="javascript">
function change()
{
documentgetElementById("aaa")innerHTML= "修改修改";
}
</script>
3,style
这是一个极其重要的属性,可以获取并修改每个单独的样式
例如:documentgetElementByTagName("body")[0]stylebackgroundColor="#cccccc"
4、firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回父节点的对象。
nextSibling 返回下一个兄弟节点的对象
previousSibling 返回前一个兄弟节点的对象
nodeName 返回节点的HTML标记名称，使用英文的大写字母，如P, FONT
5,click()
执行元素的一次点击，可以用于通过脚本来触发onClick函数
Element rootEle = domgetRootElement();
rootElegetAttributeValue("id") 还是rootElegetChild(name)？
最好有个XML例子 不清楚说的指定节点是啥意思
1DOM 介绍
2查找元素
3DOM 节点
4节点 *** 作
DOM 中的三个字母，D（文档）可以理解为整个 Web 加载的网页文档；O（对象）可
以理解为类似 window 对象之类的东西，可以调用属性和方法，这里我们说的是 document
对象；M（模型）可以理解为网页文档的树型结构。
DOM 有三个等级，分别是 DOM1、DOM2、DOM3，并且 DOM1 在 1998 年 10 月成为
W3C 标准。DOM1 所支持的浏览器包括 IE6+、Firefox、Safari、Chrome 和 Opera17+。
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将
这种树型结构理解为由节点组成。
从上图的树型结构，我们理解几个概念，html 标签没有父辈，没有兄弟，所以 html 标
签为根标签。head 标签是 html 子标签，meta 和 title 标签之间是兄弟关系。如果把每个标签
当作一个节点的话，那么这些节点组合成了一棵节点树。
PS：后面我们经常把标签称作为元素，是一个意思。
W3C 提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行 *** 作。
分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、
setAttribute()和 removeAttribute()。
getElementById()方法，接受一个参数：获取元素的 ID。如果找到相应的元素则返回该
元素的 HTMLDivElement 对象，如果不存在，则返回 null。
当我们通过 getElementById()获取到特定元素节点时，这个节点对象就被我们获取到了，
而通过这个节点对象，我们可以访问它的一系列属性。
getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数
组保存着所有相同元素名的节点列表。
getElementsByName()方法可以获取相同名称(name)的元素，返回一个对象数组
HTMLCollection(NodeList)。
getAttribute()方法将获取元素中某个属性的值。它和直接使用属性获取属性值的方法有
一定区别。
setAttribute()方法将设置元素中某个属性和值。它需要接受两个参数：属性名和值。如
果属性本身已存在，那么就会被覆盖。
removeAttribute()可以移除 HTML 属性。
1node 节点属性
节点可以分为元素节点、属性节点和文本节点，而这些节点又有三个非常有用的属性，
分别为：nodeName、nodeType 和 nodeValue。
节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个
元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。
childeNodes 属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点
和文本子节点。
firstChild 用于获取当前元素节点的第一个子节点，相当于 childNodes[0]；lastChild 用于
获取当前元素节点的最后一个子节点，相当于 childNodes[boxchildNodeslength - 1]。
ownerDocument 属性返回该节点的文档对象根节点，返回的对象相当于 document。
parentNode 属性返回该节点的父节点，previousSibling 属性返回该节点的前一个同级节
点，nextSibling 属性返回该节点的后一个同级节点。
attributes 属性返回该节点的属性节点集合。
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换
节点。
write()方法可以把任意字符串插入到文档中去。
appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
createTextNode()方法创建一个文本节点。
insertBefore()方法可以把节点创建到指定节点的前面。
cloneNode()方法可以把子节点复制出来。
8removeChild()方法
removeChild()方法可以把
以上就是关于React 中 *** 作 DOM 的方法全部的内容，包括:React 中 *** 作 DOM 的方法、怎么获取 dom element、java中dom方式读取xml，怎样根据xml的某个属性找到指定节点 比如id属性等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）