js DOM常见操作

Posted 2021-01-17 xu-xiao-jin

1. 元素的获取。

　　常见的有四种方法。

　　（1）document.getElementById()：获取对应ID的元素。ID是不能有重复的。所以返回的是一个元素。

　　  (2)   document.getElementsByTagName():获取对应的标签元素。返回一个数组。

　　  (3)   document.getElementsByClassName()：通过class来获取元素。返回的也是一个数组。注：此方法在IE8浏览器下是不兼容的。

　　 (4)   document.getElementsByName():通过name属性来获取元素，返回的也是一个数组。

　　不常用的两种方法。

　　（5）document.documentElement():获取html标签。

　　（6）document.body():获取body标签。

　　特别的两种

　　  (7)  document.querySelector("#demo")：获取文档中 id=‘demo‘ 的元素。返回匹配指定选择器的第一个元素。

　　  (8)  document.querySelectorAll("#demo")：使用方式和 document.querySelector() 方法一样，只是可以获取css选择器匹配的所有元素。

2.元素的操作方法。

　 (1)node.appendChild(node1)：向某个节点添加一个子节点，这个添加的节点会被放在最后，成为这个节点的最后一个子节点；

　　(2)node.removeChild(node1)：移除某个节点 。

　　(3)insertBefore(nodo1, node2),将node1作为当前元素的子节点，插入到当前元素的节点node2的前面。

　　(4)replaceChild(newnode, oldnode);新节点，代替旧结点。

3.获取节点。

　 (1)hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素。　

　　(2)childNodes 返回当前指定元素所有子元素(包括被注释掉的元素)的数组: document.body.childNodes。它返回指定元素的子元素集合，包括HTML节点(元素节点），文本节点(空格也是文本节点)。可以通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3 是文本节点。

　　(3)children返回当前指定元素所有子元素，但是与childNodes 不同的是，他只会返回HTML节点(元素节点)，不返回文本节点。

　　(4)firstChildelem.firstChild 返回当前元素下的第一个子节点。这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点。

　　(5)lastChildelem.lastChild返回当前元素下的最后一个子节点。

  这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点。

　　(6)nextSbilingelem.nextSbiling 返回紧跟在当前节点后的那一个同级节点(同级元素，不是子元素)。 这个获取到的节点是以childNodes为 标准的，就是包括HTML节点(元素节点），文本节点(空格也是文本节点)，所以返回的有可能是一个文本节点

　　(7)previousSiblingelem.previousSibling 返回前一个同级节点，跟nextSbiling类似，只不过nextSbiling是返回后一个。

　　(8)parentNodeelem.parentNode 返回父节点。

4.属性操作。

　　(1)elem.getAttribute(name); 获取元素属性。

　　(2)elem.setAttribute(name, value); 设置元素属性。

5. 创建元素，文本节点。

　　(1) var p = document.createElement("p")。创建元素，里面的“p”，就是代表创建p元素

div.appendChild(p);就是向div中添加一个p元素，在div的最后面。

　　(2) var txt = document.createTextNode("这是文本"); 这是创建文本元素

p.appendChild(txt);向p元素中添加值。

6.获取元素，节点的值。

　　　　<p id="test">123</p> 要获取p之下的文本值

　　(1), document.getElementById("test").childNodes[0].nodeValue;(这里不能用children替换childNodes，因为children获取不到 文本节点)。

　　(2), document.getElementById("test").innerTEXT;

　　(3), document.getElementById("test").innerHTML;

　　　　（2）和（3）的区别：将上面的标签改为：“  <p id="test"><a href="#">123</a></p>  ”

　　　　　　那么（2）的值还是 123， 但是（3）的值就是<a href="#">123</a>，就是说innerHTML会连html标签也拿到，但是innerText不会。

　　　　　　

 

参考链接：https://blog.csdn.net/yuling__ting/article/details/51490302

　　　　：https://blog.csdn.net/change_any_time/article/details/79721554