<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//在编写html文档时需要确定id属性值是唯一的
//该方法为document对象的方法
var bjNode = document.getElementById("bj");
alert(bjNode);
//获取所有的li节点。使用标签名获取所有节点的结合。
//该方法为Node接口的方法，任何一个节点都有这个方法
var liNodes = document.getElementsByTagName("li");
alert(liNodes.length);
var cityNode = document.getElementById("city");
var cityLiNode = cityNode.getElementsByTagName("li");
alert(cityLiNode.length);
//根据HTML文档元素的name属性来获取指定的节点的集合
var genderNodes = document.getElementsByName("gender");
alert(genderNodes.length);
//li标签下的name属性是人为加的。IE上可能有问题。谨慎使用。
var bjNode2 = document.getElementsByName("beijing");
alert(bjNode2.length);
//IE不支持这个方法，不推荐使用。
//document.getElementsByTagNameNS(namespaceURI, localName)
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<br />
<input type="radio" name="gender" value="M" />Male
<input type="radio" name="gender" value="F" />Female
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//1.属性节点即为某一元素节点的属性
//var usernameNode = document.getElementById("username");
//alert(usernameNode.value);//获取属性值
//usernameNode.value = "123456";//设置属性值
//获取city节点的所有子节点
var cityNode = document.getElementById("city");
//获取cieyNode下所有子节点。不实用，换行也算一个子节点。下面语句的结果是9。
//alert(cityNode.childNodes.length);
var cityLiNodes = cityNode.getElementsByTagName("li");
alert(cityLiNodes.length);//4
//获取指定节点的第一个子节点和最后一个子节点
alert(cityNode.firstChild);
alert(cityNode.lastChild);
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<br />
name:<input type="text" name="username" id="username" value="umgsai"/>
<br />
<input type="radio" name="gender" value="M" />Male
<input type="radio" name="gender" value="F" />Female
</body>
</html><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function() {
//获取文本节点，文本节点一定是元素节点的子节点
//1.获取文本节点坐在的元素节点
var bjNode = document.getElementById("bj");
//通过firstChild定位到文本节点
var bjTextNode = bjNode.firstChild;
//通过nodeValue读取文本节点的值
alert(bjTextNode.nodeValue);
//设置文本节点的值
bjTextNode.nodeValue = "123456789";
}
</script>
</head>
<body>
<p>你喜欢哪个城市？</p>
<ul id="city">
<li id="bj" name="beijing">北京</li>
<li>上海</li>
<li>武汉</li>
<li>深圳</li>
</ul>
<ul id="book">
<li id="xyj" name="xyj">西游记</li>
<li>三国演义</li>
<li>水浒传</li>
</ul>
<br />
name:<input type="text" name="username" id="username" value="umgsai"/>
<br />
<input type="radio" name="gender" value="M" />Male
<input type="radio" name="gender" value="F" />Female
</body>
</html>本文出自 “阿凡达” 博客，请务必保留此出处http://shamrock.blog.51cto.com/2079212/1564462
原文地址：http://shamrock.blog.51cto.com/2079212/1564462
