小知识，大挑战！本文正在参与「程序员必备小知识」创作活动，本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

为了感谢掘金读者这段时间的支持，在主页放上了私人微信，有需要技术交流等可直接加阿ken微信与我交流哦

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

7.4_节点基础

仔细了解一下什么是节点

HTML 文档可以看作是一个节点树，网页中的所有内容都是节点(包括元素、属性、文本、注释等)。

7.4.1_什么是节点

HTML DOM 树中的所有节点均可通过 JavaScript 进行访问，因此，可以利用操作节点的方式操作 HTML 中的元素。

一般来说，节点至少拥有 nodeType 节点类型)、nodeName ( 节点名称 ) 和 nodeValue ( 节点值 ) 这 3 个基本属性。

元素节点，nodeType 为 1。
属性节点，nodeType 为 2。
文本节点，nodeType 为 3。文本节点包含文字、空格、换行等。

在实际开发中，节点操作主要操作的是元素节点，开发者可以根据 nodeType 的值来判断是否为元素节点。

7.4.2_节点层级

DOM 中将 HTML 文档视为树结构，一个 HTML 文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。
具体示例如下。

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>
	<body>
		
		<a href="#">链接</a>
		<p>段落...</p>
		
	</body>
</html>

在这里插入图片描述

在上述代码中，DOM 根据 HTML 中各节点的不同作用，可将其分别划分为标签节点、文本节点和属性节点。其中，标签节点也被称为元素节点。HTML 文档中的注释则单独叫作注释节点。

节点之间的层级关系，最常见的是父子兄弟层级关系。下面我们以 < head> 、< body> 与 < html> 节点为例进行介绍，具体如下。

根节点: < html> 标签是整个文档的根节点，有且仅有一个。
父节点: 指的是某一个节点的上级节点，例如，< html> 元素则是 < head> 和 < body> 的父节点。
子节点: 指的是某一个节点的下级节点，例如，< head> 和 < body> 节点是 < html> 节点的子节点。
兄弟节点: 两个节点同属于一个父节点，例如，< head> 和 < body> 互为兄弟节点。

在讲解了各种节点的层次关系后，接下来我们针对各层级节点的获取进行详细讲解。

1. 获取父级节点 obj.parentNode

_
在 JavaScript 中，可以使用 parentNode 属性来获得离当前元素的最近的一个父节点，如果找不到父节点就返回为 null,语法格式为: obj.parentNode。其中， obj 是一个 DOM 对象是通过获取元素的方法来获取的元素，如 getElementById() 方法等。

案例：演示如何获取当前元素的父节点，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>
	<body>
		
		<div class="demo">
			<div class="box">
				<span class="child">span元素</span>
			</div>
		</div>
		
		<script>
			
			var child = document.querySelector('.child');
			console.log(child.parentNode);
			
		</script>
		
	</body>
</html>

在这里插入图片描述

上述代码中，通过 querySelector() 获取类名为 child 的 span 元素，存储到 child 对象中。
在控制台输出离 child 元素最近的父级节点 ( box )。

2. 获取子级节点

理解下述案例

_
在 JavaScript 中，可以使用 childNodes 属性或者 children 属性两种方式来获得当前元素的所有子节点的集合。

( 1 ) childNodes 属性

childNodes 属性获得的是当前元素的所有子节点的集合，该集合为即时更新的集合。

案例：演示如何获取当前元素子节点，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>
	<body>
		
		<ul>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
			<li>我是li</li>
		</ul>
		
		<script>
			
			// DOM 提供的方法(API)获取
			var ul = document.querySelector('ul');
			var lis = ul.querySelector('li');
			
			console.log(lis);
			console.log(ul.childNodes);
			console.log(ul.childNodes[0].nodeType);
			console.log(ul.childNodes[1].nodeType);
			
		</script>
		
	</body>
</html>

在这里插入图片描述

上述代码中，定义了一个无序列表 ul 。
测试 DOM 提供的 API 方法是否能够获取全部 li 元素。
使用节点的方式获取 ul 下的所有的子节点 ( 包括文本节点和元素节点 )。
根据 nodeType 属性来获取文本节点和元素节点的节点类型。

运行后发现 childNodes 属性返回的是 NodeList 对象的集合。返回值里面包含了元素节点、文本节点等其他类型的节点。

如果想要获取childNodes 里面的元素节点，需要做专门的处理。在上述代码中编写如下代码获取元素节点。

			for(var i = 0; i < ul.childNodes.length; i++) {
				if(ul.childNodes[i].nodeType === 1) {
					console.log(ul.childNodes[i]);
				}
			}

在这里插入图片描述

上述代码中，ul.childNodes[i] 是元素节点。

需要注意的是，childNodes 属性在 IE 6 ~ IE 8中不会获取文本节点，在 IE 9 及以上版本和主流浏览器中则可以获取文本节点。所以在实际开发中一般不提倡使用 childNodes。

( 2 ) children 属性

children 是一个可读的属性，返回所有子元素节点。children 只返回子元素节点，其余节点不返回。目前各大浏览器都支持该属性，在实际开发中推荐使用 children。

案例：演示如何获取当前元素子节点，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
	</head>
	<body>
		
		<ol>
			<li>我是li1</li>
			<li>我是li2</li>
			<li>我是li3</li>
			<li>我是li4</li>
		</ol>
		
		<script>
			
			var ul = document.querySelector('ol');
			var lis = ul.querySelectorAll('li');
			console.log(ul.children);
			
		</script>
		
	</body>
</html>

在这里插入图片描述

上述代码中，通过 ul.children 属性获取 ul 元素的子元素，在控制台中的输出结果为 HTMLCollection(4) [li, li, li, li] 。

小提示:
_
childNodes 属性与 children 属性虽然都可以以获取某元素的子元素，但是两者之间有一定的区别。前者用于节点操作，返回值是 NodeList 对象集合；后者用于元素操作，返回的是 HTMLCollection 对象集合。

( 3 ) 获取子节点 firstChild 属性和 lastChild 属性

firstChild 属性和 lastChild 属性，前者返回第一个子节点，后者返回的是最后一个子节点，如果找不到则返回 null。需要注意的是，它们的返回值包括文本节点和元素节点等。

( 4 ) 获取子元素节点 firstElementChild 属性和 lastElementChild 属性

firstElementChild 属性和 lastElementChild 属性，前者返回第一个子元素节点，后者返回最后一个子元素节点，如果找不到则返回 null。

需要注意的是，这两个属性有兼容性问题，IE9 以上才支持。

实际开发中，firstChild 和 lastChild 包含其他节点，操作不方便；而 firstElementChild 和 lastElementChild 又有兼容性问题，那么如何获取第一个子元素节点或最后一个子元素节点呢?
为了解决兼容性问题，在实际开发中通常使用 “ obj.children [ 索引 ] ” 的方式来获取子元素节点。示例代码如下。

obj.children[0];// 获取第一个子元素节点
obj.children[obj.children.length - 1] // 获取最后一个子元素节点

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

作者：请叫我阿ken
链接：juejin.cn/post/700278… 来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（十八）

🌊🌈关于前言：

🌊🌈关于内容：

7.4_节点基础

7.4.1_什么是节点

7.4.2_节点层级

1. 获取父级节点 obj.parentNode

2. 获取子级节点

( 1 ) childNodes 属性

( 2 ) children 属性

( 3 ) 获取子节点 firstChild 属性和 lastChild 属性

( 4 ) 获取子元素节点 firstElementChild 属性和 lastElementChild 属性

🌊🌈往期回顾：

🌊🌈关于后记：