2、节点操作

1、获取节点w

1-1 nodeType 节点类型

nodeTyoe == 1 元素节点
nodeType == 2 属性节点
nodeType == 3 文本节点

getAttributeNode()获取属性节点

//   getAttributeNode() 获取属性节点
//   firstChild()  获取第一个子节点
<p id="app">hello world</p>
<script>
var app = document.getElementById("app")
var id = app.getAttributeNode("id")
console.log(app.nodeType) //元素节点
console.log(app.firstChild.nodeType); // 文本节点
console.log(id.nodeType); // 属性节点
</script>

1-2 childNodes 获取所有的子节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        var childs = app.childNodes;
        console.log(childs);  // 所有的子节点 共有9个
        var arr = []
        for(var i = 0;i<childs.length;i++){
            if(childs[i].nodeType == 1){
                arr.push(childs[i])
            }
        }
        console.log(arr);
    </script>

1-3children只获取子元素节点

<ul id="app">
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
        <li>hello world</li>
</ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.children)  // 只获取子元素节点
    </script>

1-4节点和元素节点

firstChild()  获取第一个子节点
lastChild()  获取最后一个子节点
childNodes  获取所有子节点
children  获取所有子元素节点
parentNode  获取父节点
firstChild         获取第一个子节点
firstElementChild  获取第一个元素子节点
lastChild
lastElementChild 
nextSibling    前一个节点
nextElementSibling  前一个元素节点
previousSibling
previousElementSibling

<ul id="app">
        <li>html</li>
        <li>css</li>
</ul>
    <script>
        var app = document.getElementById("app")
        console.log(app.firstElementChild);
    </script>

2、增加节点

2-1 appendChild 追加节点(末尾添加节点)

向节点的子节点列表的末尾添加新的子节点

createElement() 创建元素节点
createTextNode() 创建文本节点
createAttribute()创建属性节点

<div id="app">
</div>
    <script>
        var app = document.getElementById("app")
        var p = document.createElement("p")
        var txt = document.createTextNode("hello world")
        p.appendChild(txt)
        console.log(p)
        app.appendChild(p)
        console.log(app)
    </script>

2-2 insertBefore 插入节点

parentNode.insertBefore(newNode，在谁前面）
在已有的子节点前插入一个新的子节点
innerHTML 元素里的文字

<ul id="app">
        <li>html</li>
        <li id="js">javascript</li>
</ul>
    <!-- 
        innerHtml 元素里的文字
        parentNode.insertBefore(newNode,在谁前面) 插入节点
     -->
    <script>
        var app = document.getElementById("app")
        var li = document.createElement("li")
        var js = document.getElementById("js")
        li.innerHTML = "vue"
        console.log(li);
        app.insertBefore(li,js)
        console.log(app)
    </script>

2-3 append 在结尾插入节点

2-4 prepend 在开头插入节点

<ul id="app">
        <li>html</li>
</ul>
    <script>
        // append,prepend
        var app =  document.getElementById("app");
        var p1 = "<h1>我是在结尾插入的</h1>";
        var p2 = "<h1>我是在开头插入的</h1>"
        app.append(p1);
        app.prepend(p2)
    </script>

2-5 before

2-6 after

<p id="p">hello world</p>
    <script>
        var p =  document.getElementById("p");
        p.after("after")
        p.before("before")
    </script>

3、删除节点

3-1 removeChild() 删除节点

<div id="app">
  <div id="child">
    hello world
  </div>
</div>
    <script>
        // removeChild() 让元素从DOM树，渲染树中消失
        var app = document.getElementById("app")
        var child = document.getElementById("child")
        app.removeChild(child)
    </script>

4、替换节点

4-1 replaceChild 替换节点

parentNode.replaceChild(newNode,targetNode) 替换某个元素

<div id="app">
  <div id="child">
    child
    </div>
</div>
    <script>
        var app = document.getElementById("app")
        var child = document.getElementById("child")
        var p = document.createElement("p")
        p.innerHTML = "hello world"
        app.replaceChild(p,child)
        console.log(app);
    </script>

5、克隆节点

5-1 cloneNode 克隆节点

node.cloneNode( )  
括号为空或false浅拷贝，只复制标签不复制内容
括号为true，深拷贝，也复制内容

<div id="app">
    <div id="one">hello world</div>
</div>
    <script>
        var app = document.getElementById("app")
        var one = document.getElementById("one")
        var test = one.cloneNode(true)
        console.log(test);
        app.appendChild(test);
        console.log(app);
    </script>