JavaScript 中的 DOM 对象（Document 对象、Element 对象、Node 对象）

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<br/>
		<input type="text" id="nameid" name="name" value="oneStar"><br/>
		<input type="text" id="nameid" name="name" value="twoStar"><br/>
		<input type="text" id="nameid" name="name" value="threeStar"><br/>
		<input type="text" id="nameid" name="name" value="fourStar"><br/>
		<script type="text/javascript">
			//getElementById()：通过 id 得到元素
			var Text1 = document.getElementById("nameid");
			document.write(Text1.value);
			//设置value的值
			Text1.value = "twoStar";
			document.write("<hr/>");
			
			//getElementsByName()：通过name的属性值，返回带有指定名称的对象集合
			var Text2 = document.getElementsByName("name");
			for(var i=0;i < Text2.length;i++){
				var Text = Text2[i];
				document.write(Text.value);
				document.write("<br/>");
			}
			document.write("<hr/>");
			
			//getElementsByTagName()：返回带有指定标签名的对象集合
			var Text3 = document.getElementsByTagName("input");
			for(var i=0;i<Text3.length;i++){
				var Text = Text3[i];
				document.write(Text.value);
				document.write("<br/>");
			}
			document.write("<hr/>");
		</script>
	</body>
</html>

三、Element 对象

1、常用方法

element 对象是标签对象，要造作 element 对象的属性，首先要获取到 element，可以使用 document中的方法，element中常用的方法有：

getAttribute(name)：获取属性方法
setAttribute(name，value)：设置属性方法
removeAttribute(name)：删除属性方法（不能删除value）

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<br/>
		<input type="text" id="nameid" value="oneStar"><br/>
		<script type="text/javascript">
			//getElementById()：通过 id 得到元素
			var Text1 = document.getElementById("nameid");
			
			//getAttribute(name)：获取属性方法
			document.write(Text1.getAttribute("value"));
			document.write("<hr/>");
			
			//setAttribute(name，value)：设置属性方法
			Text1.setAttribute("name","myname");
			document.write(Text1.getAttribute("name"));
			document.write("<hr/>");
			
			//removeAttribute(name)：删除属性方法
			Text1.removeAttribute("name");
			document.write(Text1.getAttribute("name"));
		</script>
	</body>
</html>

2、获取子标签

getElementsByTagName()：用来查找其他节点的唯一有效方法

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<ul id="ulid">
			<li>oneStar</li>
			<li>twoStar</li>
			<li>threeStar</li>
		</ul>
		<script type="text/javascript">
			//getElementById()：通过 id 得到元素
			var Text1 = document.getElementById("ulid");
			
			//getElementsByTagName()：用来查找其他节点的唯一有效方法
			var lis = Text1.getElementsByTagName("li");
			document.write(lis.length);
		</script>
	</body>
</html>

三、Node 对象

1、Node 对象的属性

nodeName
- 如果节点是元素节点，返回这个元素的名称
- 如果是属性节点，返回这个属性的名称
- 如果是文本节点，返回这个属性的名称
nodeType
- 1 --元素节点
- 2 --属性节点
- 3 --文本节点
nodeValue
- 如果给定节点是一个元素节点，返回值是 null
- 如果给定节点是一个属性节点，返回值是这个属性的值
- 如果给定节点是一个文本节点，返回值是这个文本的内容

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<span id="spanid">oneStar</span>
		<hr/>
		<script type="text/javascript">
			//获取标签对象
			var Span = document.getElementById("spanid");
			document.write(Span.nodeType);	//1
			document.write("<br/>");	
			document.write(Span.nodeName);	//SPAN
			document.write("<br/>");
			document.write(Span.nodeValue);	//null
			document.write("<hr/>");
			
			//获取属性对象
			var ID = Span.getAttributeNode("id");
			document.write(ID.nodeType);	//2
			document.write("<br/>");
			document.write(ID.nodeName);	//id
			document.write("<br/>");
			document.write(ID.nodeValue);	//spanid
			document.write("<hr/>");
			
			//获取文本对象
			var Text = Span.firstChild;
			document.write(Text.nodeType);	//3
			document.write("<br/>");
			document.write(Text.nodeName);	//#text
			document.write("<br/>");
			document.write(Text.nodeValue);	//内容
			document.write("<hr/>");
		</script>
	</body>
</html>

2、Node 的父子节点对象

父节点：parentNode
- parentNode 属性返回的节点永远是一个元素节点，只有元素节点才有可能包含子节点
- document节点的没有父节点
子节点
- childNodes：获取指定节点的所有子节点集合，但兼容性比较差，一般用 getElementsByTagName()
- firstChild：获取指定节点的第一个子节点
- lastChild：获取指定节点的最后一个子节点
同辈节点
- nextSibling：返回一个给定节点的下一个兄弟节点
- previousSibling：返回一个给定节点的上一个兄弟节点

<html>
	<head>
		<title>oneStar</title>
	</head>
	<body>
		<ul id="ulid">
			<li id="li1">oneStar</li>
			<li id="li2">twoStar</li>
			<li id="li3">threeStar</li>
			<li id="li4">fourStar</li>
		</ul>

		<script type="text/javascript">
			//得到li标签
			var Li = document.getElementById("li1");
			
			//获取父节点ul的id
			var parli = Li.parentNode;
			document.write(parli.id);
			document.write("<hr/>");
			
			//firstChild：lastChild获取指定节点的首位子节点
			//得到ul标签
			var Ul = document.getElementById("ulid");
			var firLi = Ul.firstChild;
			document.write(firLi.id);
			document.write("<br/>");
			var lastLi = Ul.lastChild;
			document.write(lastLi.id);
			document.write("<hr/>");
			
			//nextSibling：previousSibling返回一个给定节点的下/下一个兄弟节点
			var Li3 = document.getElementById("li3");
			var Lnext = Li3.nextSibling;
			document.write(Lnext.id);
			document.write("<br/>");
			var Lpre = Li3.previousSibling;
			document.write(Lpre.id);
		</script>
	</body>
</html>