在上一节中，我们说过，元素内的换行符也算一个节点，本节我们告诉大家这是为什么，下面先看一下节点对象长什么样。
一、取出某元素的所有节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
var box=document.getElementById('box');
var nodeobj=box.childNodes;
console.log(nodeobj);
console.log(nodeobj[1]);
</script>
</html>
以上我们取出了id为box的div元素的所有节点。
执行结果如下：
从执行结果中可以看到，其中不仅包含了div中的所有span标签，还有很多text节点，这些text节点在节点中的每一个子节点前后都有。
也就是说，如果我们想要取出div下的第一个span，应该是取其中的第二个子节点，因为第一个子节点是text。
在上面的代码中我们是通过数组的语法取出了div中的第一个子节点span。
其实JS还提供了一系列专门用作取子节点的属性。
二、取父节点中的子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
var box=document.getElementById('box');
console.log(box.firstChild);//当前节点的第一个子节点 返回 #text
console.log(box.lastChild);//当前节点的最后一个子节点 返回 #text
console.log(box.firstElementChild);//当前节点的第一个元素子节点
console.log(box.lastElementChild);//当前节点的最后一个元素子节点
</script>
</html>
上面的代码中我们分别使用box节点对象firstChild、lastChild、firstElementChild和lastElementChild属性取出了box节点中的子节点。
执行结果如下：
三、根据子节点取父节点和兄弟节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<span id="span1">这是span1</span>
<span id="span2">这是span2</span>
<span id="span3">这是span3</span>
</div>
<div id="box1"></div>
<div id="box2">
</div>
</body>
<script>
var span2=document.getElementById('span2');
console.log(span2.parentElement);//取元素的父节点
console.log(span2.nextElementSibling);//取当前节点后面的元素节点
console.log(span2.previousElementSibling);//取当前节点前面的元素节点
</script>
</html>
以上代码中我们先获取了id为span2的节点，然后使用该节点取出了它的父节点和兄弟节点。
执行结果如下：
ok，以上就是关于取某元素的所有节点以及取子节点和父节点的操作，请大家务必动手练习一下再继续下面的学习。
|
窥视卡
雷达卡
发表于 2023-1-25 13:05:06
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 00:29:10
