HTML DOM 中 元素节点和属性节点是什么关系
2016-12-15
展开全部
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是:
nodeName(节点名称)
nodeValue(节点值)
nodeType(节点类型)
nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是:
元素类型
节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
在实际应用中,经常用到的就是元素节点、属性节点和文本节点了,下面我们通过小段代码进行讲解
1:元素节点
<HEAD>
<TITLE>空谷悠悠</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="john" name="myname">John</td>
<td>Doe</td>
<td id="jack">Jack</td>
</tr>
</table>
<script>
var d = document.getElementById("john");
alert(d.nodeType)
alert(d.nodeName)
alert(d.nodeValue)
</script>
</BODY>
</HTML>
分析运行结果,其三个属性的值分别为:
nodeType:ELEMENT_NODE
nodeType值:1
nodeName:元素标记名 //此处为TD
nodeValue:null
2:属性节点
<HEAD>
<TITLE>空谷悠悠</TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="john" name="myname">John</td>
<td>Doe</td>
<td id="jack">Jack</td>
</tr>
</table>
<script>
var d = document.getElementById("john").getAttributeNode("name");
alert(d.nodeType)
alert(d.nodeName)
alert(d.nodeValue)
</script>
</BODY>
</HTML>
分析运行结果,其三个属性的值分别为:
nodeType:ATTRIBUTE_NODE
nodeType值:2
nodeName:属性名 // name
nodeValue:属性值 //myname
3:文本节点
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<table>
<tr>
<td id="john" name="myname">John</td>
<td>Doe</td>
<td id="jack">Jack</td>
</tr>
</table>
<script>
var d = document.getElementsByTagName("td")[0].firstChild
alert(d.nodeType)
alert(d.nodeName)
alert(d.nodeValue)
</script>
</BODY>
</HTML>
分析运行结果,其三个属性的值分别为:
nodeType:TEXT_NODE
nodeType值:3
nodeName:#text
nodeValue:文本内容 // John
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询