JS18：操作DOM对象

最新推荐文章于 2023-03-31 10:17:26 发布

一个优雅的搬砖人

最新推荐文章于 2023-03-31 10:17:26 发布

阅读量235

点赞数

分类专栏： # JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48306950/article/details/123925232

版权

JavaScript 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

本文档详细介绍了DOM（文档对象模型）的基本操作，包括通过标签名、ID和类名获取DOM节点，更新节点内容和样式，删除节点以及插入新节点的方法。示例代码展示了如何使用JavaScript进行DOM操作，如innerText、innerHTML、style属性以及appendChild和insertBefore等方法。

摘要由CSDN通过智能技术生成

DOM（Document Object Model）文档对象模型。

核心

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

更新：更新 DOM 节点
遍历 DOM 节点：得到 DOM 节点
删除：删除一个 DOM 节点
添加：添加一个 DOM 节点

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

获取 DOM 节点

对应 CSS 选择器，可以通过标签名，id，class 获取 DOM 节点。

<body>
<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>

<script>
    // 通过标签名获取DOM节点
    const h1 = document.getElementsByTagName('h1');
    // 通过id获取DOM节点
    const p1 = document.getElementById('p1');
    // 通过class获取DOM节点
    const p2 = document.getElementsByClassName('p2');

    const father = document.getElementById('father');
    // 获取父节点下的所有子节点
    childrens = father.children;
</script>

更新 DOM 节点

<body>
<div id="id1"></div>
</body>
<script>
    const div = document.getElementById('id1');
</script>

操作内容

从上面的实例可以发现：

innerText：修改文本的值
innerHTML：可以解析 HTML 文本标签

操作样式

通过 style 可以设置 DOM 节点的样式，注意这里的属性名是驼峰命名，属性值是字符串。

删除 DOM 节点

删除节点的步骤：先获取自身节点和父节点，再通过父节点的 removeChild() 方法删除自己。

分别获取自身节点和父节点

<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    const p1 = document.getElementById('p1');
    const father = document.getElementById('father');
</script>

通过自身节点获取父节点

上面是通过分别获取自身节点和父节点来删除自身节点，下面将只通过自身节点的 parentElement 获取到其父节点。

<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    const self = document.getElementById('p1');
    // 通过自身节点获取自己的父节点
    const father = self.parentElement;
    father.removeChild(self);
</script>

通过 children 下标删除子节点

通过父节点的 children 属性可以获取到子节点数组，可以用指定下标的方式删除子节点。

注意：删除是一个动态过程，删除子节点后 children 数组会发现改变，即当删除了 children[0] 后，原来的 children[1] 会变成 children[0]。

<body>
<div id="father">
    <h1>标题1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    const self = document.getElementById('p1');
    // 通过自身节点获取自己的父节点
    const father = self.parentElement;
    // father.children 代表子节点数组
    father.removeChild(father.children[0]);
</script>

删除之后

插入 DOM 节点

当我们获得了某个 DOM 节点，想在这个 DOM 节点插入新的 DOM ，应该怎么做？

如果这个 DOM 节点是空的，那么可以通过 innerHTML 就可以修改 DOM 节点的内容，相当于“插入”了新的 DOM 节点；

如果这个 DOM 节点不是空的，那么不能这么做，因为 innerHTML 会直接替换原来的所有子节点。

有两个办法可以插入新的节点。一个是使用 appendChild()，把一个子节点添加到父节点的最后一个子节点；另一个是使用 insertBefore()，新节点可以插入到父节点的任意位置。

appendChild(newNode)

目标是把 <p id="js">JavaScript</p> 插入到 div 中

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<script>
    const
        js = document.getElementById('js'),
        list = document.getElementById('list');
    // 追加
    list.appendChild(js);
</script>

执行后

通过 JS 创建新的节点

使用 document.createElement 可以创建新的节点，其参数是标签名。

<script>
    // 创建一个 p 标签
    var newP = document.createElement('p');
    
    // 为该标签添加属性 id="newP"
    newP.id = 'newP';
    // 为标签添加属性也可以用下面这句，这两种方式效果是一样的
    // newP.setAttribute('id', 'newP');
    
    // 为该标签添加内容
    newP.innerText = "hello newP";
    
    // 以上的结果：<p id="newP">hello newP</p>
    
    // 创建一个标签节点
    var myScript = document.createElement('script');
    myScript.setAttribute('type', 'text/javascript');
    
    // 创建一个style标签
    var myStyle = document.createElement('style');
    myStyle.setAttribute('type', 'text/css');
    myStyle.innerHTML = 'body {background-color: chartreuse;}';
    // 将 style 标签添加到 head 标签里面
    document.getElementByTagName('head')[0].appendChild(myStyle);
    
</script>

insertBefore(newNode, targetNode)

将新节点插入到目标节点的前面。

<p id="js">JavaScript</p>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>

<script>
    const
        python = document.getElementById('python'),
        js = document.getElementById('js'),
        list = document.getElementById('list');
    // 追加
    list.insertBefore(js, python);
</script>

执行之后