1.获取节点

1-1 nodeType 节点类型

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

  getAttributeNode() 获取属性节点

  firstChild() 获取第一个子节点

  ```javascript // getAttributeNode() 获取属性节点 // firstChild() 获取第一个子节点

  hello world

<a name="dKSW1"></a>
## 1-2 childNodes  获取所有子节点
<a name="KNHaM"></a>
## parentNode  父元素节点
```javascript
<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-3 children 只获取元素节点

<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>

2、增加节点

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

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

createElement() 创建节点

createTextNode() 创建文本节点

<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>

6、节点和元素节点

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>