首先我们需要知道：
节点对象分为三类，一类是元素节点、一类是属性节点、一类是文本节点。
在前面的讲解中，我们取出的都是元素节点，元素节点指的是：在这个节点对象中包含的是元素，也叫标签。
本节我们来讲解属性节点和文本节点。
属性节点指的是：在这个节点对象中，存放是元素的所有属性。
文本节点指的是：在这个节点对象中存放的是不被html标签包裹的文本。
请看下面的代码：
<!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">
hello
<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);
var soan2Attr=span2.getAttributeNode('id');//这样获取到的是属性节点
console.log(soan2Attr)
var box=document.getElementById('box');
var text=box.firstChild;//这样获取到的是文本节点
console.log(text);
</script>
</html>
执行结果如下：
解释一下：
以上我们分别取出了元素节点对象、属性节点对象和文本节点对象，这些节点对象里面包含很多内容，这个大家不需要关心。
目前，我们只需要知道通过以上方法可以取出这三种类型的对象即可。
|
窥视卡
雷达卡
发表于 2023-1-25 13:07:00
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 00:29:10
