用JavaScript 来操作 DOM中需要知道的方法

前言

 文档对象模型(DMO)是构成web页面上所有元素的根，DOM对象API很多，本文主要记录常用的API。

document.querySelector/querySelectorAll

document.querySelector方法返回文档中与指定选择器或选择器组匹配的第一个 html 元素。 如果找不到匹配项，则返回null。
documet.querySelectorAll方法返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。

const list=document.querySelector("ul");
console.log(list);
const lists=document.querySelectorAll("ul");
console.log(lists);

querySelector.png

Node.appendChild

Node.appendChild()方法将节点添加到给定父节点的子节点列表的末尾。 请注意，如果给定的子代是文档中现有节点的引用，则它将移动到新位置。

        let list=document.createElement("div");
        ["dog",'cat','bird'].forEach(ani=>{
            let listp=document.createElement("p");
            listp.innerText=ani;
            list.appendChild(listp);
        })
        document.body.appendChild(list);

Node.insertBefore

此方法在给定的父节点内的子引用节点之前插入给定节点（并返回插入的节点）。

Node.removeChild

Node.removeChild方法从DOM中删除一个子节点并返回删除的节点。 请注意，返回的节点不再是DOM的一部分，而是仍存在于内存中。 如果处理不当，可能会导致内存泄漏。

    <ul>
        <li>a</li>
        <li>b</li>
        <li>c</li>
    </ul>

    <script>
    let list=document.querySelector("ul");
    let firstItem=list.querySelector("li");
    let remove=list.removeChild(firstItem);
    console.log(remove);
    </script>

Node.cloneNode

Node.cloneNode(deep) 方法返回调用该方法的节点的一个副本，deep(可选)表示是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

let listclone = document.querySelector('ul');
let clone = listclone.cloneNode();
console.log(clone)

cloneNode.png

Element.getAttribute / Element.setAttribute

Element.getAttribute方法返回元素上给定属性的值，反之亦然，Element.setAttribute设置给定元素上属性的值。

    <div>div</div>
    <p id="showp"></p>
    <script>
    let list=document.querySelector("div");
    list.setAttribute("id","my-text");
    let id=list.getAttribute("id");
    let p=document.querySelector("#showp");
    p.innerHTML=id;
    </script>

getAttribute.png

Element.hasAttribute / Element.removeAttribute

Element.hasAttribute方法检查给定元素是否具有指定的属性，返回值为boolean。 通过调用Element.removeAttribute方法，我们可以从元素中删除具有给定名称的属性。

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};

总结

DOM的操作还有很多，在使用的时候查阅相关资料。
本节代码