JavaScript操作DOM对象（重点）

核心

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

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

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

 

获得dom节点

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

    var childrens = father.children;  // 获取父节点下的所有子节点
    
    //father.firstChild
    //father.lastChild
</script>

这是原生代码，之后我们尽量都是用jQuery

 

更新节点

let id1 = document.getElementById('father');

innerText可以修改文本的值

innerHTML可以解析HTML

同样可以操作css

 

删除节点

删除节点的步骤：先获取父节点，再通过父节点删除自己

<div id="father">
    <p id="p1"></p>
    <p id="p2"></p>
    <p id="p3"></p>
</div>

<script>
    let id1 = document.getElementById('father');
</script>

 

删除是一个动态的过程

删除第一个节点之后，第二个节点会自动变成第一个节点

 

插入节点

我们获得了某个Dom节点，假设这个dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，我们就不能这个干了，会产生覆盖！

追加

<p id="js">JavaScript</p>
<div id="list">
    <p id="p1">王者荣耀</p>
    <p id="p2">英雄联盟</p>
    <p id="p3">刺激战场</p>
</div>

<script>
    let js = document.getElementById('js');
    let list = document.getElementById('list');
    list.appendChild(js);
</script>

效果： 

创建一个新的标签

<p id="js">JavaScript</p>
<div id="list">
    <p id="p1">王者荣耀</p>
    <p id="p2">英雄联盟</p>
    <p id="p3">刺激战场</p>
</div>

<script>
    let js = document.getElementById('js'); //已经存在的节点
    let list = document.getElementById('list');
    list.appendChild(js);

    //通过JS创建一个新的节点，通过这个属性可以创建任一的
    let newP = document.createElement('p');
    newP.id = 'newP';
    newP.innerText = 'Hello,newElement'
    list.appendChild(newP);
</script>

效果：

 

insert

<p id="js">JavaScript</p>
<div id="list">
    <p id="p1">王者荣耀</p>
    <p id="p2">英雄联盟</p>
    <p id="p3">刺激战场</p>
</div>

<script>
    let js = document.getElementById('js');
    let p2 = document.getElementById('p2');
    let list = document.getElementById('list')
    // 要包含的节点，insertBefore(newNode,targetNode)
    list.insertBefore(js,p2);
</script>