查询元素节点

查询元素就是获取元素，获取元素的主要方法

获取方式	语法	返回值
通过id获取元素	document.getElementById("元素的id名")	返回的是一个元素对象
通过className获取	document.getElementByClassName("元素的class名")	返回的是一个类数组(多个对象放在一个数组中)
通过标签名来获取元素	document.getElementsByTagName("标签名")	返回的是一个类数组(多个对象放在一个数组中)
通过name名来获取元素	document.getElementByName ("元素的name属性名")	返回的是有name名属性类数组(多个对象放在一个数组中)
通过选择器获取满足条件的第一个对象	document.querySelector("元素的选择器")	返回的是一个元素对象
通过选择器获取满足条件的所有对象	document.querySelectorAll("元素的选择器")	返回的是所有满足的元素对象的一个类数组(多个对象放在一个数组中)

[详情见] 此篇文章 (url：juejin.cn/post/712018…)

创建元素节点

1.document对象的createElement()方法能够根据参数指定的标签名称创建一个新的HTML元素。

2.返回新创建元素的引用。该方法只有一个参数，传入的是字符串，用来指定创建元素的标签名称。

1.该方法是动态创建元素节点，创建的元素是不会被自动地渲染到页面上的，因为这些创建的元素原先并不存在于DOM树（文档树）中，文档树中的元素才会被渲染到页面上。如果要把这个元素添加到文档树里，还需要使用appendChild()方法或insertBefore()方法。

2.将元素添加到文档树中，浏览器会立即渲染该元素。此后，对这个元素所作的任何修改都会实时反映在浏览器中。

3..x.appendChild(y)=>把y节点对象添加到x节点列表的末尾。y节点要添加到DOM树中，x节点对象必须原先要存在于DOM树中。如果x节点是自己创建的，则x、y节点都不会被渲染到页面上，它们原先都不在DOM树中。

<div id="box1"></div>
    <script>
        //获取DOM树中的元素
        let box1=document.querySelector("#box1");
        //创建元素：创建的元素是不会渲染到页面上的，因为它并不在DOM树中
        let box2=document.createElement("div");//传入的是字符串，是标签的名字,创建div元素
        //元素添加到DOM树中（文挡树）,x.appendChild(y)=>把y节点对象添加到x节点中
        //y节点要添加到DOM树中，x节点对象必须要在DOM树中
        //如果x节点是自己创建的，则x、y节点都不会被渲染到页面上，它们都不在DOM树中
        document.body.appendChild(box2);//添加div元素到body元素子节点列表的末尾。
    </script> 

插入元素节点

appendChild()

1.x.appendChild(y)=>把y节点对象添加到x节点列表的末尾。该方法可向指定的父节点（x）的子节点列表的末尾添加新的子节点（y）。appendChild(newchild)，参数newchild表示新添加的节点对象。

2.appendChild()方法会返回新增的节点。

3.如果文档树中已经存在参数节点，则将从文档树中存在的位置删除，然后重新插入新的位置，且在移动指定节点时，会同时移动指定节点包含的所有子节点，此时并不会再产生一个新的元素节点。如果要添加的节点不存在于文档树中，是把它作为子节点插入当前文档树已有节点的末尾。

    <style>
        #box1 {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        #div-box {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div id="box1">
        <h1>红磨坊</h1>
    </div>
    <div id="div-box">蓝色盒子</div>
    <button class="okay">移动蓝色盒子</button>
    <!-- 蓝色盒子的元素存在于文档树中 -->
    <script>
        let btn=document.querySelector(".okay");
        btn.onclick=function(){
            let red=document.querySelector("#box1");
            let blue=document.querySelector("#div-box");
            red.appendChild(blue);
        };
    </script>

点击按钮之前

点击按钮之后，之前蓝色盒子所在的元素会从文档树中删除

insertBefore()

1.insertBefore()方法将一个节点元素添加到父节点元素指定的已有的子节点前面。insertBefore(newchild, refchild)，参数newchild表示要新插入的节点，refchild表示指定的已有的子节点。

2.insertBefore()该方法将返回新插入的子节点。

3.当文档树中已经存在参数节点，insertBefore()方法与appendChild()方法一样，可以把指定元素及其所包含的所有子节点都一起插入到指定位置中。同时会先删除移动的元素，再重新插入到新的位置。

    <style>
        #box1 {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        #div-box {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div id="box1">
        <h1>红磨坊</h1>
    </div>
    <div id="div-box">
        <h2>蓝色盒子</h2>
    </div>
    <button class="okay">移动蓝色盒子</button>
    <!-- 蓝色盒子的元素存在于文档树中 -->
    <script>
            let btn=document.querySelector(".okay");
            btn.onclick=function(){
            let red=document.querySelector("#box1");
            let blue=document.querySelector("#div-box");
            let redtext=document.querySelector("h1");
            red.insertBefore(blue,redtext);
       };
     </script>

点击按钮之前

点击按钮之后，把蓝色盒子的所有子节点移动到红色盒子内，且位于h1标题前面

删除元素节点

1.removeChild()方法可以从有父元素节点的子节点列表中删除某个子节点。remove()方法可以节点自己删除自己，无须传参。

2.removeChild(node)其中参数node为要删除节点。如果删除成功，则返回被删除节点；如果失败，则返回 null。

3.当使用removeChild()方法删除节点时，该节点所包含的所有子节点将同时被删除。

父级元素移除子级元素

父级元素可能有多个子元素，则需要获取要删除的子元素后，作为参数传入removChild()方法中。

    <style>
        #box1 {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        #div-box {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div id="box1">
        <h1>红磨坊</h1>
    </div>
    <div id="div-box">
        <h2>蓝色盒子</h2>
    </div>
    <button class="okay">删除蓝色盒子中的标题</button>
    <script>
            let btn=document.querySelector(".okay");
            btn.onclick=function(){
            let bluetext=document.querySelector("h2");
            bluetext.parentElement.removeChild(bluetext);
        };
    </script>

点击按钮之前

点击按钮之后，蓝色盒子中子元素的h2标题会被删除

自己移除自己

    <style>
        #box1 {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        #div-box {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div id="box1">
        <h1>红磨坊</h1>
    </div>
    <div id="div-box">
        <h2>蓝色盒子</h2>
    </div>
    <button class="okay">删除红色盒子中的标题</button>
    <script>
            let btn=document.querySelector(".okay");
            btn.onclick=function(){
            let redtext=document.querySelector("h1");
            redtext.remove();
        };
    </script>

点击按钮之前

点击按钮之后，红色盒子中子元素的h1标题会被删除

清空自己

需要清空自己可以将该元素的父级元素的innerHTML等于一个空字符串，则父级元素的所有子级元素都会被删除改为一个空字符串就实现了清空自己。

    <style>
        #box1 {
            width: 400px;
            height: 200px;
            background-color: red;
        }
        #div-box {
            width: 300px;
            height: 100px;
            background-color: blue;
        }
    </style>
    <div id="box1">
        <h1>红磨坊</h1>
    </div>
    <div id="div-box">
        <h2>蓝色盒子</h2>
    </div>
    <button class="okay">删除红色盒子的子级元素</button>
    <script>
            let btn=document.querySelector(".okay");
            btn.onclick=function(){
            let redtext=document.querySelector("h1");
            redtext.parentElement.innerHTML="";
        };
    </script>

点击按钮之前

点击按钮之后，整个红色盒子所在的子级元素都会被删除。

克隆元素节点

1.元素.cloneNode(参数)，参数是布尔值true或者false(默认)，返回调用该方法的一个元素节点的副本，与调用该方法的元素节点是两个不同的对象节点。

1.克隆节点只会在内存中克隆一份，不会添加到页面上 只能使用添加方法才能添加到某个元素内。

2.克隆会把id也克隆则为了保持页面id的唯一性，需要修改克隆元素的id。

3.当参数为true时，连同调用该方法的元素节点的后代元素（包含文本）复制标签，且复制标签里面的内容。事件一起克隆但是只会克隆行内绑定的事件（在标签中设置onclick），对于通过事件监听器添加的事件并不会克隆以及元素属性绑定的事件也不会被绑定到被克隆的节点上。当参数为false时，相当于只克隆了调用该方法元素节点的标签，不会克隆事件等只复制标签，不复制里面的内容。

        <style>
            #box1 {
                width: 100px;
                border: 2px solid;
                border-radius: 26%;
            }
        </style>
        <div id="box1">
            <h1>AOTU</h1>
        </div>
        <div class="box"></div>
        <button class="btn">克隆</button>
        <script>
            let btn=document.querySelector(".btn");
            btn.onclick=function(){
                let div1=document.querySelector("#box1");
                let div2=document.querySelector(".box");
                let samediv=div1.cloneNode();
                div2.appendChild(samediv);
            };
        </script>

点击按钮之前

点击按钮之后，默认为false，只会克隆标签（包括标签的属性）

点击按钮之后，参数为true，会克隆所有的后代元素（包括文本）。

        <style>
            #box1 {
                width: 100px;
                border: 2px solid;
                border-radius: 26%;
            }
        </style>
        <div id="box1">
            <h1>AOTU</h1>
        </div>
        <div class="box"></div>
        <button class="btn">克隆</button> 
        <script>
            let btn=document.querySelector(".btn");
            //元素属性绑定的事件: 事件将不会被绑定到被克隆的节点上
            btn.onclick=function(){
                let div1=document.querySelector("#box1");
                let div2=document.querySelector(".box");
                let samediv=div1.cloneNode(true);
                div2.appendChild(samediv);
            };
        </script>    

    <style>
        #box1 {
            width: 600px;
            background-color: aquamarine;
        }
    </style>
    <div id="box1">
        <h1>AOTU</h1>
    </div>
    <div class="box"></div>
    <!-- 行内绑定的事件:将会被绑定到克隆所得的新节点上 -->
    <button class="btn1" onclick="fn()">clone</button>
    <script>
        function fn() {
            let btn1 = document.querySelector(".btn1");
            let div1 = document.querySelector("#box1");
            let samebtn1 = btn1.cloneNode(true);
            div1.appendChild(samebtn1);
        };
     </script>

点击按钮之前

点击按钮之后，且每个克隆出来的按钮，其事件也会被克隆。