上一节我们已经知道元素节点、属性节点和文本节点的区别，并且已经可以从页面中取出这三种节点对象。
本节需要讲的是：这三种节点对象的nodeName、nodeType和nodeValue分别是什么。
请注意：本节内容非常重要，因为在做节点操作时，我们经常需要使用nodeName、nodeType和nodeValue来取数据。
本节也是节点操作中最容易搞混的部分，请大家认真理解。
请看下面的代码：
<!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');//这样获取到的是元素节点
//元素节点的nodeName、nodeType、nodeValue分别是元素名、1、null
console.log(span2.nodeName,span2.nodeType,span2.nodeValue);
var soan2Attr=span2.getAttributeNode('id');//这样获取到的是属性节点
//属性节点的nodeName、nodeType、nodeValue分别是属性名、2、属性值
console.log(soan2Attr.nodeName,soan2Attr.nodeType,soan2Attr.nodeValue)
var box=document.getElementById('box');
var text=box.firstChild;//这样获取到的是文本节点
//文本节点的nodeName、nodeType、nodeValue分别是#text、3、节点内容
console.log(text.nodeName,text.nodeType,text.nodeValue)
</script>
</html>
解释一下：
在以上的代码中，我们分别取出了元素节点对象、属性节点对象和文本节点对象。
然后用这三种节点对象分别调用nodeName、nodeType和nodeValue属性，并打印这三个属性的结果。
执行结果如下：
再次总结：
- 1、元素节点的nodeName是元素名、nodeType是1、nodeValue是null。
- 2、属性节点的nodeName是属性名、nodeType是2、nodeValue是属性值。
- 3、文本节点的nodeName是#text、nodeType是3、nodeValue是节点内容。
|
窥视卡
雷达卡
发表于 2023-1-25 13:08:07
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 11:33:09
