JavaScript之Dom节点类型、遍历节点数。

最新推荐文章于 2022-08-16 20:57:37 发布

c-Tomorrow

最新推荐文章于 2022-08-16 20:57:37 发布

阅读量799

点赞数 2

分类专栏： JavaScript JavaScript学习之路文章标签： JavaScript JavaScript节点类型 JavaScript遍历节点树 JavaScript遍历元素节点树

本文链接：https://blog.csdn.net/c__dreamer/article/details/79337820

版权

JavaScript 同时被 2 个专栏收录

52 篇文章 1 订阅

订阅专栏

JavaScript学习之路

50 篇文章 6 订阅

订阅专栏

在Dom文档查的结构中，实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形，可以通过遍历节点树的形式进行标签的选取。

Dom文档中，遍历节点的节点有，文本节点，注释节点和标签节点。

遍历节点树

以下找孩子节点包括文本节点和注释节点

parentNode -->父节点（最顶端的parentNode是docuemnt）

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div>
	<span>
		<strong></strong>
	</span>
</div>
</body>
<script type="text/javascript">
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentNode);
</script>
</html>
//输出<span></span>

childNodes -->找孩子节点，只包括直系孩子节点，

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div>
	<span>
		<strong></strong>
	</span>
</div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.childNodes);
</script>
</html>
//输出NodeList(3) [text, span, text]

firstChild --->第一个孩子节点，lastChild --->最后一个孩子节点

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div>
	<span>
		<strong></strong>
	</span>
</div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.firstChild);
console.log(div.lastChild);
</script>
</html>
//#text
//#text

nextSibling --->后一个兄弟节点，previousSibling --->前一个兄弟节点。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
</head>
<body>
<div>
	<span></span>
	<strong></strong>
</div>
</body>
<script type="text/javascript">
var span = document.getElementsByTagName('span')[0];
var strong = document.getElementsByTagName('strong')[0];
console.log(span.nextSibling);
console.log(strong.previousSibling);
</script>
</html>
//#text
//#text

遍历元素节点数

上面所说的遍历节点树不仅有元素节点，而且还有文本节点和注释节点。下面所说的是遍历元素节点树。

parentElement-->返回当前元素节点的父元素节点（IE不兼容）

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">123
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var strong = document.getElementsByTagName('strong')[0];
console.log(strong.parentElement);
</script>
</html>
//<div></div>

children --->返回当前元素子节点

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.children);
</script>
</html>
//HTMLCollection(3) [strong, span, em]

node.children.length === node.childElementCount 返回当前元素节点数。（IE不兼容）

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.children.length);
</script>
</html>
//3

firstElementChild--->返回第一个孩子节点。 lastElementChild--->返回最后一个孩子节点。（均IE不兼容）

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.firstElementChild);
console.log(div.lastElementChild);
</script>
</html>
//<strong></strong>
//<em></em>

nextElementSibling --->返回下一个兄弟元素节点。 previousElementSibling -->返回前一个兄弟元素节点。（IE均不兼容）

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var span = document.getElementsByTagName('span')[0];
console.log(span.nextElementSibling);
console.log(span.previousElementSibling);
</script>
</html>
//<em></em>
//<strong></strong>

节点的四个属性

nodeName 返回字符串，只读，不能写。

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var span = document.getElementsByTagName('span')[0];
console.log(span.nodeName);
</script>
</html>
//SPAN

nodeValue 可读可写，只有文本节点和注释节点才有

nodeType 返回该节点是什么类型。节点的类型及返回值：元素节点--1，属性节点--2，文本节点--3，注释节点--8，document--9,DocumentFragment--11，

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
            var arr = div.childNodes;
            for(var prop in arr){
                if(arr.hasOwnProperty(prop)){
                    console.log(arr[prop].nodeType);
                }
            }
</script>
</html>
//3 1 3 1 3 1 3

attribute ---->返回该节点属性的集合

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.attributes);
</script>
</html>
//NamedNodeMap {0: id, 1: class, id: id, class: class, length: 2}

hasChildNodes()方法返回的是一个boolean值，表示该节点是否有子节点。当元素内没有任何东西的时候（包括空格和回车），返回false

<!DOCTYPE html>
<html>
<head>
	<title>Dom</title>
	<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<div id = "demo" class ="Div">
           <strong>
           </strong>
           <span></span>
           <em></em>
       </div>
</body>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
console.log(div.hasChildNodes());
</script>
</html>
//true

JavaScript语言我个人感觉是最有意思的了，我也是一个初学者，遇到问题，喜欢在博客上分享，也希望能帮到大家。

一个初学者，有什么不足或者纰漏的话，希望在下面评论出来，相互学习，共同进步。

--主页传送门--

c-Tomorrow

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之Dom节点类型、遍历节点数。

在Dom文档查的结构中，实际上各级标签呈现树状排列。我们可以把整个html文档看成一个树形，可以通过遍历节点树的形式进行标签的选取。 Dom文档中，遍历节点的节点有，文本节点，注释节点和标签节点。遍历节点树以下找孩子节点包括文本节点和注释节点 parentNode --&gt;父节点（最顶端的parentNode是docuemnt）&lt;!D...
复制链接

扫一扫