标签：
我们这里所说的获取节点包含元素节点，属性节点和文本节点。通常，通过DOM我们就能够操作HTML元素。为
了做到这件事情，您必须首先找到该元素。W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节
点进行操作。
我们先来写一个简单的HTML文档以供我们进行测试，并且JS代码都是写在window.onload事件中：
<!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>
(1)getElementById()方法
getElementById()方法接受一个参数，这个参数是一个元素指定的id值，这样就可以获取该元素节点。如果找到相
应的元素则返回元素节点对象，如果不存在，则返回null。在这里我们要注意的一点是id表示一个元素节点的唯一性，
不能同时给两个或以上的元素节点创建通哟个命名的id。
//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode);//返回object HTMLLIElement表示li元素节点对象，但是IE会返回object。同时低版本的IE不兼容。
当我们通过getElementById()方法获取到特定的元素节点对象时，这个元素节点对象就被我们获取到了，而通过
这个元素节点对象，我们可以访问它的一系列属性。
元素节点属性
//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
alert(bjNode.tagName);//返回元素节点的标签名：LI
alert(bjNode.innerHTML);//返回元素节点的文本节点的内容：北京市 对于元素节点的属性除了可以获取指定元素节点的属性，也可以改变其属性的内容。//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的属性重新赋值
bjNode.innerHTML="河北省"; 重新赋值后的结果：原来的北京市被替换为河北省
实例：
//获取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
对于HTML属性的属性除了可以获取指定元素节点的属性的值，也可以对其属性进行设置。
//获取id="bj"的元素节点
var bjNode=document.getElementById("bj");
//对元素节点的内联样式属性节点进行属性值的设定
bjNode.style.color="blue";
未设置前的样式效果：
设置后的样式效果：
(2)getElementsByTagName()方法
getElementByTagName()方法接受一个参数，这个参数是HTML元素的标签名，因此该方法返回的是一个对象数
组HTMLCollection，这个数组保存着所有相同元素名的节点列表。
实例一：
//获取元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes); //返回：object HTMLCollection表示元素节点对象数组
alert(liNodes.length);//返回;8，当前文档中确实有8个li元素
alert(liNodes[0]);//返回：object HTMLLIElement表示li元素节点对象
看到输出元素节点对象，我们就可以看出这个和用id获取元素节点对象那里一致，这样的话我们也可以输出元素
节点的标签名和文本内容。这两个方法的区别是：getElementById()是document对象的方法，而
getElementByTagName()方法是Node接口的方法，即任何一个节点都有这个方法。看下面的例子：
实例二：
//获取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元素节点对象
从输出的结果看出：实例一是获取整个HTML文档的所有的元素名li的元素节点，而实例二是获取指定id="city"元
素节点中的所有元素名为li的元素子节点。
上面说到如果得到元素节点对象，就可以得到元素节点的属性和文本内容。
//获取HTML文档内所有的元素名为li的元素节点
var liNodes=document.getElementsByTagName("li");
alert(liNodes[1].innerHTML);//输出：天津市 在这里我们还需要讲述一个很重要的获取body节点的知识，在后面我们做动态的HTML页面这是很有用的，由于HTML文档中只有一个body节点，因此我们可以这样做：//获取body元素节点
var bodyNode=document.getElementsByTagName("body")[0];
alert(bodyNode);//返回：object HTMLBodyElement表示body元素节点对象
(3)getElementByName()方法(一般是表单元素的name属性的值)
getElementsByName()方法可以获取相同name属性的元素节点，返回的也是一个对象数组NodeList。
实例：
//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes);//返回：ObjectNodeList表示元素节点对象数组
alert(inputNodes.length);//返回：2
alert(inputNodes[0]);//返回：Object HTMLInputElement元素节点对象
同样的写到这里我们也可以获取和设置元素节点的属性节点的值：
//获取name="sex"的元素节点
var inputNodes=document.getElementsByName("sex");
alert(inputNodes[0].type);//返回：radio
alert(inputNodes[0].value);//返回：male
在使用getElementsByName()方法获取元素节点的时候我们可能遇到这样的问题，就是有些元素没有合法的
HTML的name属性(也即是自定义的name)，那么在JS获取的兼容性有差异，IE浏览器支持本身合法的name属性，而
不合法的就会出现不兼容的问题。因此我们一般较少使用这种方法，但是表单中的元素可以使用。
//获取name="Beijing"的元素节点
var inputNodes=document.getElementsByName("Beijing");
alert(inputNodes[0]);//返回：Object HTMLLIElement表示元素节点对象，IE不会返回
后面还有三种方法：getAttribute()方法是获取元素中某个属性的值，它和直接使用.属性获取属性值的方法有一定
的却别；setAttribute()方法是设置元素中某个属性的值和removeAttribute()方法是HTML属性。由于它们三个方法的兼
容性不是很好，使用的也很少，因此就不再进行过多叙述。
说了这么多，还是简单的总结一下
一获取元素节点经常使用的方法：
(1)使用getElementById()方法通过id属性获取对应的单个元素节点
(2)使用getElementByTagName()方法根据标签获取指定元素节点名字的数组，数组对象length属性可以获取数组
的长度。
(3)使用getElementsByName()方法根据name属性获取对应的表单元素节点。
二获取属性节点经常使用的方法
由于属性节点时某一指定元素节点的属性，可以通过先使用getElementById()方法通过id属性获取对应的单个元素
节点再读取指定属性这样的方式来获取和设置属性节点的值。
三获取文本节点(文本节点时元素节点的子节点)
首先也是利用获取元素节点的方法获取到元素节点，再利用元素节点的属性innerHTML属性得到文本节点中的文
本内容，这里的文本内容包含HTML标签。在后面我们还会有一个获取文本节点的属性，一定要注意区别，这一点我
们在后一篇的博文去区别。
这只是本篇博文的方法，后面提到了会继续完善！
标签：
原文地址：http://blog.csdn.net/erlian1992/article/details/50345915
