首 页 行业热点 新车 试驾评测 养车用车 车型库

HTML DOM 中 元素节点和属性节点是什么关系

发布网友 发布时间:2022-04-25 14:08

我来回答

2个回答

热心网友 时间:2022-04-20 14:14

节点信息

每个节点都拥有包含着关于节点某些信息的属性。这些属性是:

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

热心网友 时间:2022-04-20 15:32

元素节点包含属性节点

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com