您的位置: 首页  >  IT文章  >  js的DOM节点操作：创建 ，插入，删除，复制，查找节点  

js的DOM节点操作：创建 ，插入，删除，复制，查找节点  

分类: IT文章 • 2022-06-02 09:19:02
[html] view plain copy
 
  1.   
[html] view plain copy
 
  1. var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。  
  2. var oDivText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。  
  3. oDiv.appendChild(oDivText);//父级.appendChild(子节点);在div元素中添加“666”  
  4. document.body.appendChild(oDiv);//父级.appendChild(子节点);;document.body是指向<body>元素  
  5. document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素  
二、插入节点
1、appendChild（节点）也是一种插入节点的方式，还可以添加已经存在的元素，会将其元素从原来的位置移到新的位置。
2、insertBefore（a,b）是参照节点，意思是a节点会插入b节点的前面。
[html] view plain copy
 
  1. var oDiv = document.createElement("div");//创建一个div元素，因为是document对象的方法。  
  2. var oDiv1 = document.getElementById("div1");  
  3.             document.body.insertBefore(oDiv,oDiv1);//在oDiv1节点前插入新创建的元素节点  
  4.     ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾  
三、删除、移除节点
1、removeChild(节点) 删除一个节点，用于移除删除一个参数（节点）。其返回的被移除的节点，被移除的节点仍在文档中，只是文档中已没有其位置了。
[html] view plain copy
 
  1. var removeChild = document.body.removeChild(div1);//移除document对象的方法div1  
四、替换节点
1、replaceChild(插入的节点，被替换的节点) ，用于替换节点，接受两个参数，第一参数是要插入的节点，第二个是要被替换的节点。返回的是被替换的节点。
[html] view plain copy
 
  1. var replaceChild= document.body.replaceChild(div1,div2); //将div1替换div2  
五、查找节点
1、childNodes 包含文本节点和元素节点的子节点。
[html] view plain copy
 
  1. for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。  
  2. //nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点  
  3. //nodeType==1 是元素节点  
  4. //nodeType==3 是文本节点  
  5.     if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点  
  6.         console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点  
  7.     }  
  8. }  
2、A、children也可以获取子节点，而且兼容各种浏览器。包括IE6-8
B、parentNode：获取父节点
[html] view plain copy
 
  1. var oList = document.getElementById('list');//oList是做的ul的对象  
  2. var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象  
  3. //通过子节点查找父节点//parentNode：获取父节点  
  4. console.log(oChild.parentNode);//在控制器日志中显示父节点  
  5. console.log(oList.children);//在控制器日志中显示oList子节点  
  6. console.log(children.length)//子节点的个数  
3、A、firstChild ; firstElementChild查找第一个子节点。此存在浏览器兼容问题：firstChild是IE兼容，firstElementChild是非IE兼容。
[html] view plain copy
 
  1. <span style="white-space:pre;">     </span>//查找第一个子节点的封装函数  
  2. <span style="white-space:pre;">     </span>function firstChild(ele) {  
  3.     <span style="white-space:pre;">     </span>if (ele.firstElementChild) {<span style="font-family:Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>  
  4.     <span style="white-space:pre;">     </span> return ele.firstElementChild;  
  5.     <span style="white-space:pre;">     </span>} else {  
  6.     <span style="white-space:pre;">     </span> return ele.firstChild;  
  7.     <span style="white-space:pre;">     </span>}  
  8. <span style="white-space:pre;">     </span>}  
  9. <span style="white-space:pre;">     </span>firstChild(oList).style.background = 'red';//将获得的节点的背景变成红色  
B、lastChild ; lastElementChild查找最后一个子节点。此存在浏览器兼容问题：lastChild 是IE兼容，lastElementChild是非IE兼容。
[html] view plain copy
 
  1. <span style="white-space:pre;">     </span>//查找最后一个子节点的封装函数  
  2. <span style="white-space:pre;">     </span>function lastChild(ele) {  
  3.     <span style="white-space:pre;">     </span>if (ele.lastElementChild) {<span style="font-family:Arial, Helvetica, sans-serif;">//如果该条件是true则在该浏览器（IE或非IE）中兼容</span>  
  4.     <span style="white-space:pre;">     </span> return ele.lastElementChild;  
  5.     <span style="white-space:pre;">     </span>} else {  
  6.     <span style="white-space:pre;">     </span> return ele.lastChild;  
  7.     <span style="white-space:pre;">     </span>}  
  8. <span style="white-space:pre;">     </span>}  
  9. <span style="white-space:pre;">     </span>lastChild(oList).style.background = 'red';//将获得的节点的背景变成红色  
C、nextSibling ; nextElementSibling查找下一个兄弟节点。也是存在兼容性问题。
[html] view plain copy
 
  1. <span style="white-space:pre;">     </span>//查找下一个兄弟节点的封装函数  
  2. <span style="white-space:pre;">     </span>function nextSibling(ele) {  
  3.     <span style="white-space:pre;">     </span>if (ele.nextElementSibling) {  
  4.     <span style="white-space:pre;">     </span> return ele.nextElementSibling;  
  5.     <span style="white-space:pre;">     </span>} else {  
  6.     <span style="white-space:pre;">     </span> return ele.nextSibling;  
  7.         <span style="white-space:pre;">     </span>}  
  8.     <span style="white-space:pre;">     </span>}  
  9. <span style="white-space:pre;">     </span>nextSibling(oMid).style.background = 'red';  

D、previousSibling ; previousElementSibling查找上一个兄弟节点。也是存在兼容性问题。

[html] view plain copy
 
  1. <span style="white-space:pre;">     </span>//查找上一个兄弟节点的封装函数  
  2. <span style="white-space:pre;">     </span>function previousSibling(ele) {  
  3.     <span style="white-space:pre;">     </span>if (ele.nextElementSibling) {  
  4.     <span style="white-space:pre;">     </span> return ele.previousElementSibling;  
  5.     <span style="white-space:pre;">     </span>} else {  
  6.     <span style="white-space:pre;">     </span> return ele.previousSibling;  
  7.     <span style="white-space:pre;">     </span>     }  
  8.     <span style="white-space:pre;">     </span>}  
  9. <span style="white-space:pre;">     </span>previousSibling(oMid).style.background = 'red';  

相关推荐