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

来源：互联网发布：粤语听古仔软件下载编辑：程序博客网时间：2024/05/18 04:36

我们这里所说的获取节点包含元素节点，属性节点和文本节点。通常，通过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);//返回元素节点的标签名：LIalert(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的值：bjalert(bjNode.className);//返回元素节点的属性节点class的值:BJalert(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);//返回：2alert(inputNodes[0]);//返回：Object HTMLInputElement元素节点对象</span>

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

<span style="font-size:18px;">//获取name="sex"的元素节点var inputNodes=document.getElementsByName("sex");alert(inputNodes[0].type);//返回：radioalert(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标签。在后面我们还会有一个获取文本节点的属性，一定要注意区别，这一点我

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

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

2 0