2.3.1、DOM节点的增删改查

一、

appendChild()
insertBefore()
append()   在下
prepend()  在上
before()    p.append("before")
after();    p.after("after")
remove();    removeClass();

nodetype

nodetype 判断一个节点的类型
1  元素节点
2  文本节点
3  属性节点
getAllributeNames()  获得属性节点
firstChild 获得第一个子节点

<p id="app">hello world</p>
    <script>
        var app = document.getElementById("app");
        var id = app.getAttributeNames("id");
        console.log(app.nodeType)
        console.log(app.firstChild.nodeType)
        console.log(id.nodeType)
    </script>

childNodes Children

childNodes-->包含所有的子节点（不管文本还是元素都包含）
children -->只会获取子节点

<ul>
        <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)
        console.log(children)
    </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);

增加节点

createElement()
createTextNode()
appendChild()

<div id="app"></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>

给元素添加内容innerHTML
insertBeforeparentNode .insertBefore (newNode,targetNode)
insertBefore向某个元素前面添加节点

var app = document.getElementById("app");
var js = document.getElementById("js");
var li = document.createTextNode("li");
li.innerHTML = "vue";
app.insertBefore(li,js);

删除节点

removeChild() 让从元素DOM树，渲染树都消失

 <div id="app">
        <div id="child">child</div>
    </div>
    <script>
        var app = document.getElementById("app");
        var child = document.getElementById("child");
        app.removeChild(child);
    </script>

替换某个元素

replaceChild（newNode,targetNode）

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

克隆节点

node.cloneNode(true);

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

二、 操作css

add();  addClass();      this.classList.add("current")
remove();                this.classList.remove("current")
toggle();                this.classList.toggle("current")
contains();              this.classList.contains("current")