HTML dom中常用的三种节点分别是元素节点、属性节点、文本节点。
具体指的内容可参考下图:
以下为测试用例:
<!DOCTYPE html>
<html>
<head>
<title>元素节点、属性节点、文本节点的测试</title>
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript">
window.onload = function(){
var btnNode = document.getElementsByTagName("button");
var fruitNode = document.getElementById("fruit");
//元素节点 ul 为元素节点
var ulNode = document.getElementsByTagName("ul");
//属性节点 name="水果" 为属性节点
var attrNode = document.getElementById("fruit").getAttributeNode("name");
var attr2Node = document.getElementById("fruit").getAttributeNode("width");
//文本节点 点我
var textNode = document.getElementById("btn1").firstChild; //注意这里获取文本节点的方式
btnNode[0].onclick = function(){
alert(fruitNode.getElementsByTagName("li").length);
//以下右边注释为运行的结果
//获取元素节点的三要素:nodeType,nodeName,nodeValue
alert(ulNode[0].nodeType); //1
alert(ulNode[0].nodeName); //UL
alert(ulNode[0].nodeValue); //null
//获取属性节点的三要素:nodeType,nodeName,nodeValue
alert(attrNode.nodeType); //2
alert(attrNode.nodeName); //name
alert(attrNode.nodeValue); //水果
alert(attr2Node.nodeType); //2
alert(attr2Node.nodeName); //width
alert(attr2Node.nodeValue); //80px;
//获取文本节点的三要素:nodeType,nodeName,nodeValue
alert(textNode.nodeType); //3
alert(textNode.nodeName); //#TEXT
alert(textNode.nodeValue); //点我
}
}
</script>
</head>
<body>
节点分三类:
1: 元素节点
2:属性节点
3:文本节点
<ul id="fruit" name="水果" width="80px;">
<li>苹果</li>
<li>香蕉</li>
<li>梨子</li>
<li>葡萄</li>
</ul>
<button id="btn1">点我</button>
</body>
</html>