DOM

最新推荐文章于 2024-05-29 14:49:47 发布

原创最新推荐文章于 2024-05-29 14:49:47 发布 · 85 阅读

CC 4.0 BY-SA版权

本文介绍了如何使用JavaScript进行DOM操作，包括获取、更新、插入和删除DOM节点的方法。详细讲解了document.getElementById(), document.getElementsByTagName(), document.getElementsByClassName()等API的使用，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。最常用的方法是document.getElementById()和document.getElementsByTagName()，以及CSS选择器document.getElementsByClassName()。

document.getElementsByTagName()和document.getElementsByClassName()会获取一组节点，也就相当于一个数组
所以我们要在后面加上[0]来选择

更新DOM

innerHTML       //把整个部分更新，也可以输入html代码
innerText和textContent属性是编译成html，但不会生成标签
示例:document.getElementById( ).innerHTML="   ";

更新css
document.getElementById( ).style.属性="   ";
//要注意的是，属性如果是font-weight这种形式的，在这里要写成驼峰式:fontWeight

插入DOM

appendChild，把一个子节点添加到父节点的最后一个子节点

insertBefore       把子节点插入到指定的位置

示例：<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>


js结构：
var
    list = document.getElementById('list'),
    ref = document.getElementById('python'),
    haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
               (要加入的节点)    (在哪个节点前面)
list.insertBefore(haskell     ,   ref);

重新创建一个节点并加入里面

<!-- HTML结构 -->
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
    <p id="js">JavaScript</p>
</div>

var
    list = document.getElementById('list'),
    haskell = document.createElement('p');       //创建一个新的p节点
haskell.id = 'haskell';                 //id叫什么
haskell.innerText = 'Haskell';           //内容是什么
list.appendChild(haskell);           //加入节点

删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉

var parent = document.getElementById('parent');       //取得父节点
parent.removeChild(parent.children[0]);               //父节点的第一个子节点