原生JavaScript常用的DOM操作

Posted 2020-10-03 三十亿少女的梦

　　之前项目一直都是用JQuery或者Vue来做的，确实好用，毕竟帮我们解决了很多浏览器兼容问题，但是后面发现大公司面试题都是要原生javascript来做，然后我就一脸懵逼哈哈哈，毕竟大公司需要的框架或者库好多都是公司内部自己构建的，所以说到头来还是要原生JavaScript，这里总结了一些原生js常用的dom操作函数。

　　

一：节点关系

 //元素的子元素都可以通过someNode下的childNodes对象来访问
 var firstChild = someNode.firstChild;          //获得第一个子元素
 var lastChild = someNode.lastChild;            //获得最后一个子元素 
 var secondChild = someNode.childNodes[1];      //获得第二个子元素
 var secondChild = someNode.childNodes.item(1)  //获得第二个子元素
 var count = someNode.childNodes.length;        //获得子元素个数  
 var parentNode = someNode.parentNode;          //获得父元素

 var prevNode = someNode.previousSibling;       //获得前一个同胞元素，如果没有则为null
 var nextNode = someNode.nextSibling;           //获得后一个同胞元素，如果没有则为null

 var isHave = someNode.hasChildNodes();         //节点包含一个或多个子节点返回true
 
 var owner = someNode.ownerDocument;            //指向表示整个文档的文档节点

 

二：操作节点

appendChild(newNode): 在节点子元素列表最后插入一个新节点，返回新增节点，如果节点本来就是文档的一部分，那就是将节点从原来的位置移到新位置。

var returnedNode = someNode.appendChild(newNode);  

insertBefore(newNode, 参照节点): 在指定节点之前插入一个新的节点。

 var returnedNode = someNode.insertBefore(newNode, null)  //参照物为null，则插入子节点列表最后
 var returnedNode = someNode.insertBefore(newNode, someNode.fisrtChild) //以第一个子节点为参照物，相当于新节点变成了第一个子节点

 

  replaceChild(newNode，参照节点): 用新的节点替换旧节点，返回被替换的节点，被替换的节点依然属于文档，只是没有了位置。

  var returnedChild = someNode.replaceChild(newNode, someNode.firstChild) //新节点替换第一个子元素

 

 removeChild(): 移除一个子节点，并且作为返回值返回，被移除的节点依然属于文档，只是没有了位置。

var formerFirstChild= someNode.removeChild(someNode.firstChild); //移除第一个子节点

 

 cloneNode(布尔值)：复制一个节点，当参数为false时只复制节点本身，当参数为true是复制节点和他的所有子节点树。该函数不会复制事件处理程序，但是ie存在一个bug会复制处理程序，所以复制前最好先移除事件处理程序。

   有这样的html代码：

<ul>
     <li>item 1</li>
     <li>item 2</li>
     <li>item 3</li>
 </ul>

  假设我们已经将<ul>元素的引用保存在了myList中。

  var deepList = myList.cloneNode(true); 
  alert(deepList.childNodes.length); //3(IE < 9) 或 7(其他浏览器)

  var deepList = myList.cloneNode(false);
  alert(deepList.childNodes.length);  //0