<!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>