您的位置：首页 > Web前端 > JavaScript

轻松学习JavaScript二十：DOM编程学习之获取节点

2015-12-17 19:57 691 查看

我们这里所说的获取节点包含元素节点，属性节点和文本节点。通常，通过DOM我们就能够操作HTML元素。为

了做到这件事情，您必须首先找到该元素。W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节

点进行操作。

我们先来写一个简单的HTML文档以供我们进行测试，并且JS代码都是写在window.onload事件中：

<span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS代码位置</title>
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>

<body>
<p>你喜欢那个城市</p>
<ul id="city">
<li id="bj" class="BJ" name="Beijing" style="color:red">北京市</li>
<li>天津市</li>
<li>上海市</li>
<li>重庆市</li>
</ul>
<p>你喜欢那个游戏</p>
<ul id="game">
<li id="hsjj">红色警戒</li>
<li>天龙八部</li>
<li>罪恶都市</li>
<li>反恐精英</li>
</ul>
<p>选择性别：</p>
<input type="radio" name="sex" value="male" />男
<input type="radio" name="sex" value="female" />女
</body>
</html></span>

(1)getElementById()方法

getElementById()方法接受一个参数，这个参数是一个元素指定的id值，这样就可以获取该元素节点。如果找到相

应的元素则返回元素节点对象，如果不存在，则返回null。在这里我们要注意的一点是id表示一个元素节点的唯一性，

不能同时给两个或以上的元素节点创建通哟个命名的id。

<span style="font-size:18px;">//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode);//返回object HTMLLIElement表示li元素节点对象，但是IE会返回object。同时低版本的IE不兼容。</span>

当我们通过getElementById()方法获取到特定的元素节点对象时，这个元素节点对象就被我们获取到了，而通过

这个元素节点对象，我们可以访问它的一系列属性。

元素节点属性

实例：

<span style="font-size:18px;">//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode.tagName);//返回元素节点的标签名：LI
alert(bjNode.innerHTML);//返回元素节点的文本节点的内容：北京市</span>

对于元素节点的属性除了可以获取指定元素节点的属性，也可以改变其属性的内容。

<span style="font-size:18px;">//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的属性重新赋值
bjNode.innerHTML="河北省";</span>

重新赋值后的结果：原来的北京市被替换为河北省

HTML属性的属性

实例：

<span style="font-size:18px;">//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode.id);//返回元素节点的属性节点id的值：bj
alert(bjNode.className);//返回元素节点的属性节点class的值:BJ
alert(bjNode.style);//返回元素节点的内联样式属性节点对象
alert(bjNode.style.color);//返回：red</span>

对于HTML属性的属性除了可以获取指定元素节点的属性的值，也可以对其属性进行设置。

<span style="font-size:18px;">//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的内联样式属性节点进行属性值的设定
bjNode.style.color="blue";</span>

未设置前的样式效果：

设置后的样式效果：

(2)getElementsByTagName()方法

getElementByTagName()方法接受一个参数，这个参数是HTML元素的标签名，因此该方法返回的是一个对象数

组HTMLCollection，这个数组保存着所有相同元素名的节点列表。

实例一：

<span style="font-size:18px;">//获取元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes); //返回：object HTMLCollection表示元素节点对象数组
alert(liNodes.length);//返回;8，当前文档中确实有8个li元素
alert(liNodes[0]);//返回：object HTMLLIElement表示li元素节点对象   </span>

看到输出元素节点对象，我们就可以看出这个和用id获取元素节点对象那里一致，这样的话我们也可以输出元素

节点的标签名和文本内容。这两个方法的区别是：getElementById()是document对象的方法，而

getElementByTagName()方法是Node接口的方法，即任何一个节点都有这个方法。看下面的例子：

实例二：

<span style="font-size:18px;">//获取id="city"的元素节点
var cityNode=document.getElementById("city");
//获取id="city"的元素节点中的所有元素名为li的元素子节点
var liNodes=cityNode.getElementsByTagName("li");
alert(liNodes); //返回：object HTMLCollection表示元素节点对象数组
alert(liNodes.length);//返回;4，当前文档id="city"元素节点中确实有4个li元素
alert(liNodes[0]);//返回：object HTMLLIElement表示li元素节点对象</span>

从输出的结果看出：实例一是获取整个HTML文档的所有的元素名li的元素节点，而实例二是获取指定id="city"元

素节点中的所有元素名为li的元素子节点。

上面说到如果得到元素节点对象，就可以得到元素节点的属性和文本内容。

<span style="font-size:18px;">//获取HTML文档内所有的元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes[1].innerHTML);//输出：天津市</span>

在这里我们还需要讲述一个很重要的获取body节点的知识，在后面我们做动态的HTML页面这是很有用的，由于HTML文档中只有一个body节点，因此我们可以这样做：

<span style="font-size:18px;">//获取body元素节点
var bodyNode=document.getElementsByTagName("body")[0];
alert(bodyNode);//返回：object HTMLBodyElement表示body元素节点对象</span>

(3)getElementByName()方法(一般是表单元素的name属性的值)

getElementsByName()方法可以获取相同name属性的元素节点，返回的也是一个对象数组NodeList。

实例：

<span style="font-size:18px;">//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes);//返回：ObjectNodeList表示元素节点对象数组
alert(inputNodes.length);//返回：2
alert(inputNodes[0]);//返回：Object HTMLInputElement元素节点对象</span>

同样的写到这里我们也可以获取和设置元素节点的属性节点的值：

<span style="font-size:18px;">//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes[0].type);//返回：radio
alert(inputNodes[0].value);//返回：male</span>

在使用getElementsByName()方法获取元素节点的时候我们可能遇到这样的问题，就是有些元素没有合法的

HTML的name属性(也即是自定义的name)，那么在JS获取的兼容性有差异，IE浏览器支持本身合法的name属性，而

不合法的就会出现不兼容的问题。因此我们一般较少使用这种方法，但是表单中的元素可以使用。

<span style="font-size:18px;">//获取name="Beijing"的元素节点
var inputNodes=document.getElementsByName("Beijing");
alert(inputNodes[0]);//返回：Object HTMLLIElement表示元素节点对象，IE不会返回</span>

后面还有三种方法：getAttribute()方法是获取元素中某个属性的值，它和直接使用.属性获取属性值的方法有一定

的却别；setAttribute()方法是设置元素中某个属性的值和removeAttribute()方法是HTML属性。由于它们三个方法的兼

容性不是很好，使用的也很少，因此就不再进行过多叙述。

说了这么多，还是简单的总结一下

一获取元素节点经常使用的方法：

(1)使用getElementById()方法通过id属性获取对应的单个元素节点

(2)使用getElementByTagName()方法根据标签获取指定元素节点名字的数组，数组对象length属性可以获取数组

的长度。

(3)使用getElementsByName()方法根据name属性获取对应的表单元素节点。

二获取属性节点经常使用的方法

由于属性节点时某一指定元素节点的属性，可以通过先使用getElementById()方法通过id属性获取对应的单个元素

节点再读取指定属性这样的方式来获取和设置属性节点的值。

三获取文本节点(文本节点时元素节点的子节点)

首先也是利用获取元素节点的方法获取到元素节点，再利用元素节点的属性innerHTML属性得到文本节点中的文

本内容，这里的文本内容包含HTML标签。在后面我们还会有一个获取文本节点的属性，一定要注意区别，这一点我

们在后一篇的博文去区别。

这只是本篇博文的方法，后面提到了会继续完善！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航