HTML DOM 中 元素节点和属性节点是啥关系
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML DOM 中 元素节点和属性节点是啥关系相关的知识，希望对你有一定的参考价值。
节点信息
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
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
参考技术A 元素节点包含属性节点DOM节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
获取某个元素下的第一个节点：firstElementChild
获取某个元素下的最后一个节点：lastElementChild
parentNode：查找某个元素的父节点。
找到某个元素的下个兄弟节点：nextElementSibling
找到某个元素的上个兄弟节点：previousElementSibling
以上是关于HTML DOM 中 元素节点和属性节点是啥关系的主要内容，如果未能解决你的问题，请参考以下文章