原生操作节点

1.获取子节点

1.1 父节点.children

1.2 父节点.childNodes 标准属性

        var oUl = document.getElementsByTagName("ul")[0];

        //获取子节点
        //1.1 父节点.children  非标准属性  一般用这个
        var children = oUl.children;
        console.log(children); //HTMLCollection(6)

        //1.2 父节点.childNodes  标准属性 
        var childNodes = oUl.childNodes;
        console.log(childNodes); //NodeList(13)  节点列表
        console.log(childNodes.length);

2.节点的属性

2.1 节点.nodeType

2.2 节点.nodeName:节点名称

2.3 节点.nodeValue:节点内容

  //1.4 节点的基本属性
        //节点.nodeType : 返回当前节点的类型   1--标签节点 2--属性节点  3--文本节点 8--注释节点
        console.log(childNodes[0].nodeType); //标签--1
        console.log(childNodes[1].nodeType); //注释--8
        console.log(childNodes[2].nodeType); //文本--3


        //nodeName:节点名称
        console.log(childNodes[0].nodeName); //LI
        console.log(childNodes[1].nodeName); 
        console.log(childNodes[2].nodeName); 


        //nodeValue:节点内容
        childNodes[2].nodeValue = "我是一个我那边节点”

3.获取父节点

3.1 获取直接父节点 子节点.parentNode

3.2 获取定位父节点 子节点.offsetParent ,如果没有定位父节点获取到body

  var oLi = document.getElementsByTagName("li")[0];

   //1.获取直接父节点  子节点.parentNode
  console.log(oLi.parentNode);

 //2.获取定位父节点  子节点.offsetParent ,如果没有定位父节点获取到body
  console.log(oLi.offsetParent);

4.获取兄弟节点

4.1 获取首节点 父节点.firstChild 父节点.firstElementChild

 var oUl = document.getElementsByTagName("ul")[0];
 //1.获取首节点 父节点.firstChild ,ie可以正常获取到第一个标签，标准浏览器会获取到文本
 var first = oUl.firstChild;

 //父节点.firstElementChild ： 解决标准浏览器获取到文本的问题， ie不兼容
  var first = oUl.firstElementChild;

4.2 获取尾节点 父元素.lastChild 父元素.lastElementChild

  var last = oUl.lastElementChild || oUl.lastChild
  last.style.background = "yellow";

4.3 获取下一个兄弟 参考节点.nextSibling 参考节点.nextElementSibling

 var list = document.getElementById("list");
 var next = list.nextElementSibling || list.nextSibling;
 next.style.background = "pink";

4.4 获取上一个兄弟 参考节点.previousSibling 参考节点.previousElementSibling;

 var previous = list.previousElementSibling||list.previousSibling ;
 previous.style.background = "blue";

5.创建节点 添加节点

1.创建节点： document.createElement

     var li = document.createElement('标签名');  //创建标签节点
     var text = document.createTextNode('文本内容');// 创建文本节点；

2. 在父元素末尾追加一个子节点 父节点.appendChild(子节点)

   //父节点.appendChild(子节点)
  // 注意：要添加的子节点必须是一个标签  ,如果添加的是一个已经存   在的标签,不会复制一份再添加,而是发生位置移动
   var oLi = document.createElement("li");
            oLi.innerHTML = "我是添加标签"
            oUl.appendChild(oLi);

6. 在某个元素之前添加节点

6.1 父节点.insertBefore(newChild[新节点],refChild[参考节点])

        var oUl = document.getElementsByTagName("ul")[0];
        var oLi = document.getElementById("li");

        //1、在某个元素之前添加
        //1.在数字2之前添加一个a 父节点.insertBefore(newChild[新节点],refChild[参考节点]) 
        var cLi = document.createElement("li");
        cLi.innerHTML = "a";
        oUl.insertBefore(cLi,oLi);

7. 删除节点

7.1 节点.remove() : 删除节点本身

7.2 父节点.removeChild(子节点)

 //2.删除节点
        var oDiv = document.getElementsByTagName("div")[0];
        var oP = document.getElementsByTagName("p");
        //2.1  节点.remove() : 删除节点本身
        //oP[2].remove();

        //2.2  父节点.removeChild(子节点)
        oDiv.removeChild(oP[2]);

8.替换节点

8.1 父节点.replaceChild(newChild,refChild)

        var oL = document.createElement("p");
        oL.innerHTML = "今天周五需要考试";
        oDiv.replaceChild(oL,oP[1]);

9.复制节点

9.1 被复制的节点.cloneNode(boolean)

// 被复制的节点.cloneNode(boolean) 默认是false   
               // false:复制标签，没有内容  
              //  true:复制标签和内容  
        var copyP = oP[1].cloneNode(true);
        oDiv.appendChild(copyP);

10 查找节点

10.1 document.querySelect(css选择器) ： 获取到当前选择器选中标签的第一个元素

10.2 document.querySelectAll(css选择器) ： 获取到当前选择器选中的所有标签

       <ul>

            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
        <ul id="list" class="list">
            <li>a</li>
            <li>b</li>
            <li><span>c</span></li>
        </ul>


  console.log(document.querySelector("li")); //  <li>1</li>
  console.log(document.querySelectorAll("li")); //  NodeList(6) [li, li, li, li, li, li]

   //获取第二个ul里面的li
 console.log(document.querySelectorAll("#list li")); //NodeList(3) [li, li, li]
 console.log(document.querySelectorAll(".list li")); //NodeList(3) [li, li, li]