DOM节点

在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。

1.DOM 节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点

• 注释是注释节点

  2.节点的分类

• 元素节点 nodeType==1

• 文本节点 nodeType==3
• 属性节点 nodeType==2 ```javascript getAttributeNode() 获取属性节点 firtChild获取第一个子节点

hello world

<a name="138e0"></a>
### 2.1获取子节点
childNodes--包含所有的子节点(不管文本还是元素都包含)<br />children  --只会获取子节点
```javascript
var app =  document.getElementById("app");
var childs = app.childNodes;
var children = app.children;
console.log(childs)
console.log(children)

2.2获取所有元素的节点

  <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;
        var arr = [];
        for(var i=0;i<childs.length;i++){
            if(childs[i].nodeType == 1){
                  arr.push(childs[i])
            }
        }
        console.log(arr);
    </script>

3.增加节点

createElement(); //创建元素节点
createTextNode(); //创建文本节点
appendChild(); //向节点的子节点列表的末尾添加新的子节点

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

3.1给元素添加内容innerHTML

  parentNode.insertBefore(newNode,targetNode)
  parentNode.insertBefore(新添加节点，参照节点)_注意：parentNode是节点的父节点

 <ul id="app">
        <li>html</li>
        <li id="js">js</li>
    </ul>
    <script>
        var app=document.getElementById("app");
        var js=document.getElementById("js");
        var li=document.createElement("li");
        li.innerHTML="vue";
        app.insertBefore(li,js);//在js上面插入
    </script>

3.2.append和prepend

append()用于在被选元素的结尾插入元素。
prepend()用于在被选元素的开头插入元素。

 <ul id="app">
        <li>html</li>
    </ul>
    <script>
        // append,prepend
        var app =  document.getElementById("app");
        var p = "<h1>hello world<h1>";
        //app.append(p);
        app.prepend(p);
    </script>

4.删除节点

parentNode.removeChild(childNode)

 <div id="app">
        <div id="child">child</div>
    </div>
    <script>
        // removeChild()让从元素DOM树,渲染树上都消失
        var app = document.getElementById("app");
        var child = document.getElementById("child");
        app.removeChild(child);
    </script>

5.替换节点

repalceChild(newNode,targetNode)

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

6.克隆节点

node.cloneNode(true)

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