元素节点
元素节点就是HTML标签元素,元素节点主要提供了对元素标签名、子节点及属性的访问;
属性节点
属性节点,有的叫特性节点,差不多一个意思;
文本节点
文本节点的三个node属性,nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本,其父节点 parentNode 指向包含该文本节点的元素节点,文本节点没有子节点;IE8及以下浏览器不识别空白文本节点,而其他浏览器会识别空白文本节点 ;所以有时候我们需要清理空白文本节点;
操作案例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box" value="111">节点</div>
<script>
var ele = document.getElementById("box");//元素节点
var att = ele.getAttributeNode("id");//属性节点
var txt = ele.firstChild;//文本节点
console.log(ele.nodeType);//1
console.log(att.nodeType);//2
console.log(txt.nodeType);//3
//nodeName
console.log(ele.nodeName);//DIV
console.log(att.nodeName);//id
console.log(txt.nodeName);//#text
//nodeValue
console.log(ele.nodeValue);//null
console.log(att.nodeValue);//box
console.log(txt.nodeValue);//你好
</script>
</body>
</html>