JavaScript--DOM操作（二）

最新推荐文章于 2023-10-19 18:14:27 发布

慎--独

最新推荐文章于 2023-10-19 18:14:27 发布

阅读量179

点赞数

分类专栏：前端文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_48256263/article/details/125573991

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、DOM节点操作

概述：

一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性

元素节点 nodeType 为 1
属性节点 nodeType 为 2
文本节点 nodeType 为 3

一、节点层级（父子兄）

一、父级节点

node.parentNode //返回某节点的父节点（最近的一个父节点）

<div class="box">
	<span class="zxw">x</span>
</div>
var zxw = document.querySelector('.zxw');
console.log(zxw.parentNode);
最后输出的值为：
	<div class="box">
		<span class="zxw">x</span>
</div>

注意：如果指定的节点没有父节点，则返回null；

二、子节点

parentNode.childNodes//返回包含指定节点的子节点的集合，该集合为即时更新的集合

eg: var ul = document.querySelector(‘ul’)
console.log(ul.childNodes);//所有的子节点，包含元素节点文本节点

如果只想要获取里面的元素节点，可以加一个判定条件：

if(ul.childNodes[i].nodeType == 1)//元素节点 nodeType 为 1
注意：返回值里面包含了所有的子节点，包括元素节点，文本节点等。如果只想要获得里面的元素节点，则需要专门处理。所以我们一般不提倡使用childNodes
:::info

parentNode.children//是一个只读属性，返回所有的子元素节点，只返回子元素节点，其余节点不返回
:::
parentNode.firstChild//返回第一个子节点（包含所有节点）
parentNode.lastChild//返回最后一个节点（包含所有的节点）
parentNode.firstElementChild//返回第一个子元素节点（只返回子元素节点）
parentNode.lastElementChild//返回最后一个子元素节点（只返回子元素节点）

注意：
实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便，而 firstElementChild 和 lastElementChild 又有兼容性问题，那么我们如何获取第一个子元素节点或最后一个子元素节点呢？
解决方案：
如果想要第一个子元素节点，可以使用 parentNode.chilren[0] 如果想要最后一个子元素节点，可以使用 parentNode.chilren[parentNode.chilren.length - 1]

三、兄弟节点

node.nextSibling//返回当前元素的下一个兄弟节点（包含所有节点）
node.previousSibling//返回当前元素的上一个兄弟节点（包含所有节点）
node.nextElementSibling//返回当前元素的下一个兄弟元素节点（只返回兄弟元素节点）
node.previousElementSibling//返回当前元素的上一个兄弟元素节点（只返回兄弟元素节点）

四、创建节点

document.createElement('tagName')

document.createElement() 方法创建由 tagName 指定的 HTML 元素。因为这些元素原先不存在，是根据我们的需求动态生成的，所以我们也称为动态创建元素节点。

五、添加节点

node.appendChild(child)

将一个节点添加到指定父节点的子节点列表末尾，类似于css中的after伪元素

node.insertBefore(child, 指定元素)

将一个节点添加到父节点的指定子节点前面。类似于 CSS 里面的 before 伪元素。

<body>
    <ul>
        <li>123</li>
    </ul>
    <script>
        // 1. 创建节点元素节点
        var li = document.createElement('li');
        // 2. 添加节点 node.appendChild(child)  node 父级  child 是子级 后面追加元素  类似于数组中的push
        var ul = document.querySelector('ul');
        ul.appendChild(li);
        // 3. 添加节点 node.insertBefore(child, 指定元素);
        var lili = document.createElement('li');
        ul.insertBefore(lili, ul.children[0]);
        // 4. 我们想要页面添加一个新的元素 ： 1. 创建元素 2. 添加元素
    </script>
</body>

六、删除节点

node.removeChild(child)//从DOM中删除一个子节点，返回删除的节点

var ul = document.querySelector('ul');
ul.removeChild(ul.children[0]);

七、复制(克隆)节点

node.cloneNode()//返回调用该方法的节点的一个副本。也称为克隆节点/拷贝节点

注意：

如果括号参数为空或者为 false ，则是浅拷贝，即只克隆复制节点本身，不克隆里面的子节点。
如果括号参数为 true ，则是深度拷贝，会复制节点本身以及里面所有的子节点。