三十二.节点

1.如何获取节点

getElementById()
getElementsByTagName()
getElementsByClassName()
querySelectorAll()

2.节点的类型

元素节点
文本节点
属性节点

3.判断节点的类型

nodeType

4.获取属性节点

getAttributeNode() 获取属性节点
firtChild获取第一个子节点

<p id="app">hello world</p>

        var app = document.getElementById("app");
        var id = app.getAttributeNode("id");
        console.log(app.nodeType)
        console.log(app.firstChild.nodeType)
        console.log(id.nodeType)

5.获取文本节点和元素节点

childNodes—包含所有的子节点(不管文本还是元素都包含)
children —只会获取子节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

        var app =  document.getElementById("app");
        var childs = app.childNodes;
        var children = app.children;
        console.log(childs)
        console.log(children)

6.获取所有的元素节点

childNodes

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
    </ul>

        var app =  document.getElementById("app");
        var childs = app.childNodes;
        var arr = [];
        for(var i=0;i<childs.length;i++){
            if(childs[i].nodeType == 1){
                  arr.push(childs[i])
            }
        }
        console.log(arr);

7.增加节点

    createElemnt();<br />        createTextNode();<br />        appendChild();

<div id="app">
       <div>
           hello world</div>
       </div>
    </div>

        var app = document.getElementById("app");
        var p = document.createElement("p");
        var txt = document.createTextNode("hello world");
        p.appendChild(txt);
        app.appendChild(p);

8.删除节点

removeChild

<div id="app">
        <div id="child">child</div>
        <div>oooooooooo</div>
    </div>

 var app = document.getElementById("app");
        var child = document.getElementById("child");
        app.removeChild(child);

9.替换节点

repalceChild(newNode,targetNode)

<div id="app">
        <div id="child">child</div>
    </div>

        var app = document.getElementById("app");
        var child = document.getElementById("child");
        var p = document.createElement("p");
        p.innerHTML = "hello world";
        app.replaceChild(p,child);

10.克隆节点

cloneNode

<div id="app">
        <div class="one">
            hello world
        </div>
    </div>

        var app = document.getElementById("app");
        var one = document.getElementsByClassName("one")[0];
        var test = one.cloneNode(true);
        console.log(test);
        app.appendChild(test);

11.元素的父节点

parentNode

 <ul>
        <li>html  <button>删除</button></li>
        <li>css  <button>删除</button></li>
        <li>javascript  <button>删除</button></li>
    </ul>

        var btns = document.getElementsByTagName("button");
        for(var i=0;i<btns.length;i++){
            btns[i].onclick =  function(){
               var temp =  window.confirm("确定吗");
               if(temp){
                   this.parentNode.style.display = "none"
               }
            }
        }

12.第一个/最后一个/兄弟节点等

    firstChild  获取第一个子节点
    firstElementChild   获取第一个子元素节点
    lastchild   获取最后一个子节点
    lastelementchild  获取最后一个子元素节点
    nextsiblings   获取下一个兄弟节点
    nextelementsibings  获取下一个元素的兄弟节点
    prevsiblings   获取上一个兄弟节点
    prevelementsibings  获取上一个元素的兄弟节点

<div>hello</div>
    <ul id="app">
        <li>html</li>
        <li>css</li>
    </ul>
    <div>world</div>

    var  app =document.getElementById("app");
        console.log(app.firstChild);
        console.log(app.firstElementChild);
        console.log(app.lastElementChild);
        console.log(app.lastChild);
        console.log(app.nextSibling);
        console.log(app.nextElementSibling);
        console.log(app.prevSibling);
        console.log(app.prevElementSibling);