节点操作介绍

最新推荐文章于 2024-04-23 21:44:40 发布

一个想做架构师的前端开发学生

最新推荐文章于 2024-04-23 21:44:40 发布

阅读量1.2k

点赞数 1

分类专栏： JavaScript基础知识文章标签： javascript html5 css3 前端

本文链接：https://blog.csdn.net/M_ik_Z/article/details/117335413

版权

JavaScript基础知识专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1-1 节点概述

网页中所有的内容都叫做节点（标签，属性，文本，注释等），在DOM中，节点使用的是 node 表示。
HTML DOM 树中的所有节点都可以通过JavaScript进行访问，所有HTML元素（节点）都可以被修改，也可以创建或者是删除。
一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。
- 元素节点 nodeType 为 1
- 属性节点 nodeType 为 2
- 文本节点 nodeType 为 3 (文本节点包含文字、空格、换行等)
  我们在实际开发中，节点操作主要是对元素节点进行操作。

	<p id="1" date-yhb='18' date-index='10'>文本</p>
/* 上述代码中："id="1" ，date-yhb='18' ，date-index='10'"为属性节点。
          "文本"为文本节点
          "<p></p>"为标签节点 */

1-2 节点层级

利用 DOM 树可以把节点划分为不同的层级关系：
- 父子节点：两个具有嵌套关系的节点是父子节点。比如：<html></html>就是<head></head>和<body></body>的父节点。
- 兄弟节点：两个具有并列关系的节点是兄弟节点。比如：<head></head>和<body></body>就是兄弟节点。

1-2.1 父级节点

node.parentNode

parentNode 属性可以返回某节点的父节点，注意是最近的父节点。
如果指定的节点没有父节点则返回null。

示例：

<div class="demo">
	<div class="box">
		<span class="erwema">x</span>
	</div>
<script>
	// 父节点 parentNode
	var erweima = document.queryselector('.erweima')
	// var box = document.queryselector('.box')
	// 得到的是离元素最近的父级节点，如果找不到父级节点，则返回值为 null 。
	console.log(erweima.parentNode)
</script>

1-2.2 子节点

所有子节点
parentMode.childNodes （标准）
- parentMode.childNodes 返回包含指定节点的子节点的集合，该集合为即时更新的集合。
- 注意：返回值的集合里面包括了所有的子节点，包括元素节点，文本节点等。
- 如果只想要获得里面的元素节点，则需要进行专门的处理，所以我们一般不提倡使用 parentMode.childNodes 。
- 案例：

<body>
	<ul>
		<li>列表1</li>
		<li>列表2</li>
	</ul>
	<script>
		var ul = document.querySelector('ul')
		// childNodes 将空白也会当作子节点。
		console.log(ul.childNodes)
	</script>
</body>

上述代码实现的效果是：
在这里插入图片描述

// 为了避免 childNodes 将空格当作子节点可以将空格删除，但是这样的代码不规范，排版也乱，所以可以使用另外一个属性：children。
console.log(ul.children)
// 虽然 children 不是非标准的，但是各个浏览器都支持，完全可以放心使用。

子节点元素

获取第一个子节点：可以根据索引获取想要的子节点。

// 根据索引获取第一个子节点。
ul.children[0].style.color = 'red'	// 将ul下面的第一个子节点的文字颜色变为红色。
// 使用属性获取第一个节点。
ul.firstElementChild.style.color = 'red'	// 谷歌浏览器和IE9以上支持这个方法。
ul.firstChild.style.color = 'red'	// IE8以下只支持这个方法。

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

1-2.3 兄弟节点

获取下一个节点：
node.nextSibling
返回当前元素的下一个兄弟节点，没有则返回null。
获取上一个节点：
node.previousSibling
返回当前元素的上一个兄弟节点，没有则返回null。
因为兼容性的问题，兄弟节点也具有像父子节点那样的，在不同的浏览器下，获取节点方式的不同。
- 下一个兄弟元素节点：node.nextElementSibling
- 上一个兄弟元素节点：node.previousElementSibling

示例：

<body>
	<ul>
		<li>列表1</li>
		<li id="li2">列表2</li>
		<li>列表2</li>
		<li>列表2</li>
	</ul>
	<script>
		var li = document.querySelector('#li2')
		var next = li.nextSibling
		console.log(next)
		// nextSibling方法在谷歌浏览器会默认将 li2后面的空格看作是元素，所以输出结果是text。所以我们可以采用下面这个方法。
		li.nextElementSibling
		// 但是IE8并不支持这种方法。所以我们依然可以使用下面这种方法：
		var next = li.nextSibling || li.nextElementSibling
	</script>
</body>

1-3 创建节点

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

补充：

获取元素的方式：
1. 根据 id 获取；
2. 根据标签获取；
3. 根据类名称获取；
4. 根据加点之间的关系获取。

一个想做架构师的前端开发学生

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
节点操作介绍

1-1 节点概述网页中所有的内容都叫做节点（标签，属性，文本，注释等），在DOM中，节点使用的是 node 表示。HTML DOM 树中的所有节点都可以通过JavaScript进行访问，所有HTML元素（节点）都可以被修改，也可以创建或者是删除。一般节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3 (文本节点包
复制链接

扫一扫