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

JavaScript的DOM编程--02--获取元素节点

2015-09-23 23:36 711 查看

如何来获取元素节点:

1) .document.getElementById: 根据 id 属性获取对应的单个节点

2) .document.getElementsByTagName:
根据标签名获取指定节点名字的数组, 数组对象 length 属性可以获取数组的长度

3) .document.getElementsByName:
根据节点的 name 属性获取符合条件的节点数组,
但 ie 的实现方式和 W3C 标准有差别:
在 html 文档中若某节点(li)没有 name 属性,　
则 ie 使用 getElementsByName 不能获取到节点数组, 但火狐可以.

4). 其它的两个方法,　ie 根本就不支持, 所以不建议使用

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>

<script type="text/javascript">

//获取指定的元素节点.
window.onload = function(){

//1. 获取 id 为 bj 的那个节点.
//在编写 HTML 文档时, 需确保 id 属性值是唯一的.
//该方法为 document 对象的方法
var bjNode = document.getElementById("bj");
alert(bjNode);

//2. 获取所有的 li 节点.
//使用标签名获取指定节点的集合.
//该方法为 Node 接口的方法, 即任何一个节点都有这个方法.
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);

//获取指定节点的li
var cityNode = document.getElementById("city");
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);

//3. 根据 HTML 文档元素的 name 属性名来获取指定的节点的集合.
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);

//若 HTML 元素自身没有定义 name 属性, 则 getElementsByName()
//方法对于 IE 无效. 所以使用该方法时需谨慎.
var bjNode2 = document.getElementsByName("BeiJing");
alert(bjNode2.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>

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

标签：

相关文章推荐

新的分享

章节导航