首页 > 技术文章 > JavaScript节点属性

liheheaiwangxinxin 2016-07-21 11:40 原文

节点属性

在文档对象模型 (DOM) 中,每个节点都是一个对象。DOM 节点有三个重要的属性 :

1. nodeName : 节点的名称

2. nodeValue :节点的值

3. nodeType :节点的类型

一、nodeName 属性: 节点的名称,是只读的。

1. 元素节点的 nodeName 与标签名相同
2. 属性节点的 nodeName 是属性的名称
3. 文本节点的 nodeName 永远是 #text
4. 文档节点的 nodeName 永远是 #document

二、nodeValue 属性:节点的值

1. 元素节点的 nodeValue 是 undefined 或 null
2. 文本节点的 nodeValue 是文本自身
3. 属性节点的 nodeValue 是属性的值

三、nodeType 属性: 节点的类型,是只读的。以下常用的几种节点类型:

元素类型    节点类型
  元素          1
  属性          2
  文本          3
  注释          8
  文档          9

示例:获取所有LI标签,并输出相应节点的名称、节点的值、节点的类型。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>节点属性</title>
</head>
<body>
<ul>
<li>javascript</li>
<li>HTML/CSS</li>
<li>jQuery</li>
</ul>
<script type="text/javascript">

var node=document.getElementsByTagName("li");//获取li标签

for(var i=0;i<node.length;i++)

{
document.write("li["+(i+1)+"]:"+"<br/>"+"节点名:"+node[i].nodeName+"<br/>");
document.write("节点值:"+node[i].nodeValue+"<br/>");
document.write("节点类型:"+node[i].nodeType+"<br/><br/>");
}//输出所有li元素节点的属性

</script>
</body>
</html>

输出结果:

  • javascript
  • HTML/CSS
  • jQuery

li[1]:
节点名:LI
节点值:null
节点类型:1

li[2]:
节点名:LI
节点值:null
节点类型:1

li[3]:
节点名:LI
节点值:null
节点类型:1

注意:nodeName 所包含的 XML 元素的标签名称永远是大写的!!!

 

推荐阅读