如何获取元素节点:
1 document.getElementById : 根据 id 属性获取对应的单个节点
2 document.getElementsByTagName: 根据标签名获取指定节点名字的数组, 数组对象
3 document.getElementsByName:
根据节点的 name 属性获取符合条件的结点数组
但 ie 的实现方式和W3C 标准有差别;
在html 文档中若某个结点(li)没有name属性
则 ie 使用 getElementsByName 不能获取到节点数组 但是火狐可以
4 其他的两个方法, ie 根本就不支持 所以不建议使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//获取指定的元素节点
window.onload = function()
{
//1. 获取id为bj的那个节点.
//在编写HTML文档时 需确保id属性值是唯一的
//该方法为document 对象的方法 ---- 显示Object
//@@@@@显示 Object
var bjNode = document.getElementById("bj");
alert(bjNode);
//2. 获取所有的li节点 .
//使用标签名获取指定节点的集合.
//该方法为 Node 接口的方法 即任何一个结点都有这个方法
//@@@@@显示 8
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
//2.获取指定节点的 的子节点li的个数
//@@@@@显示 4
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);
//3.根据HTML文档元素的 name 属性名来获取指定的节点的集合。
//@@@@@显示 2
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
//若HTML 元素自身没有定义name属性 则 getElementsByName()
//方法对于IE无效. 所以使用该方法需谨慎
//@@@@@显示 1
var bjNodes2 = document.getElementsByName("beijing");
alert(bjNodes2.length);
}
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id = "city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id = "game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br><br>
gender:
<input type="radio" name="gender" value="male"/>Male
<input type="radio" name="gender" value="female"/>Female
</body>
</html>