如何根据HTML标签的id属性和标签名称来获取节点

html-css015

如何根据HTML标签的id属性和标签名称来获取节点,第1张

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<script>标签,输入js代码:

var a = '通过id获取:' + $('#test').html()

var b = '通过标签名获取:' + $('div').html()

$('body').append('<br/>' + a)

$('body').append('<br/>' + b)

3、浏览器运行index.html页面,此时成功通过id和标签名称获取到了节点并打印了节点内容。

节点信息

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

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