JS node常用属性和方法

一、node常用属性

    1.nodeName/nodeType ***
      描述：nodeName属性返回节点的名称，nodeType属性返回节点的常数值
      语法：node.nodeName/node.nodeType
      例子：
         console.log(document.nodeName,document.nodeType);
         console.log(box.nodeName,box.nodeType);
         var style = document.createAttribute('style');
         console.log(style.nodeName,style.nodeType);
     注意：
         nodeType 返回的是常数值
         nodeName  节点类型不同 返回值不同 document返回#document 元素返回大写的元素名

     2.ownerDocument
       描述：返回当前node的顶层文档对象
       语法：node.ownerDocument
       例子：
         var box = document.querySelector('.box');
         var p2 = document.querySelector('#p2');
         console.log(box.ownerDocument);
         console.log(p2.ownerDocument);
      注意：
          顶层文档对象都是doucument
     3.nextSibling  ***
       描述：返回下一个直接兄弟节点
       语法：node.nextSibling
       例子：
       console.log(p1.nextSibling.nodeName);
       注意：
         1.空白也是节点 #text
         2.当没有后面的兄弟节点时 返回null
         3.支持链式调用
      例子：获取所有的兄弟节点
          只要不是负性的值 就代表true
         var p1 = document.querySelector('.p1');
         while(p1){
         if(p1.nodeType==1){
         console.log(p1.nodeName,p1.nodeType);
         }
         p1 = p1.nextSibling;
         }

       4.previousSibling  ***
         描述：该属性返回当前节点前面的第一个同级节点。
         语法：node.previousSibling
         例子：
           var p5 = document.querySelector('.p5');
           console.log(p5.previousSibling.previousSibling);
         注意：
            1.当没有【哥哥】（前一个兄弟节点）节点时返回null
            2.支持链式调用的
            获取所有的哥哥节点
              var p5 = document.querySelector('.p5');
                 while(p5){
                 console.log(p5);
                 p5 = p5.previousSibling;
                 }

       5.parentNode ***
           描述：返回当前节点的父节点
           语法：node.parentNode
           例子：
            console.log(p1.parentNode.parentNode.parentNode.parentNode.parentNode);
            注意：
             1.支持链式调用
             2.document顶层文档对象是node的终极父节点
             3.document的父节点是 null

        6.parentElement
            描述：返回当前节点的父元素节点
            语法：node.parentElement
            例子：
            注意：
             1.支持链式调用
             2.html是顶级父节点
             3.document不是元素节点
             console.log('--->',p5.parentElement.parentElement.parentElement.parentElement);

    7.textContent:
      描述：textContent属性返回当前节点和它的所有后代节点的文本内容
      语法：node.textContent
      例子：
        var box = document.querySelector('.box');
        console.log(box.textContent);
    8.nodeValue
      描述：属性返回或设置当前节点的值，格式为字符串; 注意：改变的是文本值
      语法：node.nodeValue
      例子：
        var btn = document.querySelector('button');
        btn.onclick = function () {
             console.log(btn.firstChild.nodeValue);
             btn.firstChild.nodeValue ='已赞';
             //btn.innerHTML='已赞';
     };
    9.childNodes *****
       描述：返回所有的子节点
       语法：node.childNodes
       例子：
         var box = document.querySelector('.box');
         var result = box.childNodes;
         console.log(result);
         console.log(result[3]);
       注意：可以采用类似数组的方式调用元素

    10.firstChild/lastChild
       描述：获取当前节点的第一个子节点或最后一个子节点
       语法：node.firstChild/lastChild
       例子：
         var box = document.querySelector('.box');
         console.log(box.firstChild);
         console.log(box.lastChild);

 二、node常用方法

     1.appendChild() *****
        描述：将一个节点追加到当前节点的末尾
        语法：node.appendChild(node);
        例子：
         var box = document.querySelector('.box');
         var h1 = document.createElement('h1');
         h1.innerHTML='999';
         box.appendChild(h1);
        注意：追加一个孩子
     2.hasChildNodes()
        描述：判断当前节点是否含有子节点
        语法：node.hasChildNodes()
        例子：
         var box = document.querySelector('.box');
         console.log(box.hasChildNodes());
        注意：有子节点 返回true
             没有子节点 返回false
     3.cloneNode()
        描述：复制一个节点
        语法：node.cloneNode(false/true);
        例子：
         var box = document.querySelector('.box');
         result = box.cloneNode(true);//复制子节点
         result = box.cloneNode(false);//不复制子节点  默认值
         document.body.appendChild(result);
         console.log(result);
        注意：
           1.参数为true会复制子节点
           2.无论true/false都不会复制事件
     4.insertBefore()
        描述：将指定的节点插入指定位置子节点的前面
        语法：父元素.insertBefore(newNode,childNode);
        例子：
          var box = document.querySelector('.box');
          var p2 = document.querySelector('#p2');
         //新的节点
         var h1 = document.createElement('h1');
         h1.innerHTML = '你好 ';
         box.insertBefore(h1,p2);
     5.removeChild()
        描述：删除所有的孩子
        语法：父节点.removeChild('子节点');
        例子：
          //删除所有的孩子
           var p5 = box.lastChild;
            while (p5) {
               box.removeChild(p5);
               p5 = box.lastChild;
            }
     6.replaceChild()
         描述：本方法用于将一个新的节点，替换当前节点的某一个【子节点】。
         语法：父元素.replaceChild(newNode,oldChildNode);
         例子：
             var box = document.querySelector('.box');
             var p5 = document.querySelector('.p5');
             var h1 = document.createElement('h1');
             h1.innerHTML='999';
             box.replaceChild(h1,p5);
     7.contains()
        描述：判断参数节点是否为当前节点的子节点
        语法：父节点.contains('子节点');
        例子：
         var box = document.querySelector('.box');
         var btn = document.querySelector('button');
         var p5 = document.querySelector('.p5');
         console.log(box.contains(btn));//false
         console.log(box.contains(p5));//true
        注意：是当前节点的子节点返回true
             不是当前节点的子节点返回false
    8.isEqualNode()
       描述：判断两个节点是否相等
       语法：node.isEqualNode(node)
       例子：
         var box = document.querySelector('.box');
         var result = box.cloneNode(false);
         var box1 = document.querySelector('.box1');
         console.log(box.isEqualNode(result));
       注意：两个节点相等的情况 类型相同 属性相同 子节点相同