操作DOM对象

操作DOM对象

核心：

浏览器网页就是一个DOM树形结构

• ​ 更新：更新Dom节点
• ​ 遍历Dom节点：得到Dom节点
• ​ 删除：删除一个Dom节点
• ​ 添加：添加一个新的节点

要操作一个Dom节点就必须先获得一个Dom节点

        let h1 = document.getElementsByTagName('h1');
        let p1 = document.getElementById('p1');
        let p2 = document.getElementsByClassName('p2');
        let father = document.getElementById('father');

        let children = father.children;

id1.innerText='123'修改文本
"123"

id1.innerHTML='<strong>aaaa<strong/>'解析html标签

删除节点的步骤：

先获取父节点，再通过父节点删除自己

    <div id="father">
        <h1>标题一</h1>
        <p id="p1">p1 </p>
        <p class="p2">p2</p>
    </div>
    <script>
        let self = document.getElementById('p1');
        let father = self.parentElement;
        father.removeChild(father.children[0]);
        father.removeChild(father.children[1]);
    </script>

删除节点时，子结点的下标是动态变化的，即删除节点0之后，下一个节点下标就变为0了。

插入节点：

获得某个Dom节点时，若为空，通过innerText可以添加元素，但若该节点不为空，则会覆盖原内容

追加：

 <p id="js">JavaScript</p>
    <div id="list">
        <p id="se">JavaSE</p>
        <p id="EE">JavaEE</p>
        <p id="me">JavaME</p>
    </div>
    <script>
        let js = document.getElementById('js');
        let list = document.getElementById('list');
        list.appendChild(js);
    </script>

append为追加元素