JavaScript 高淇讲解的代码（三）

7_DOM简单介绍和入门

1.浏览器发送请求

2.服务器响应，发送源代码

3.浏览器加载源代码。需要在内存中构建一个DOM对象。

4.显示DOM对象。

如何得到DOM对象？

1.直接获得

a)getElementById 普通对象

b)getElementsByName 数组

c)getElementsByTagName 数组

2.间接获得

a)获得子节点

childNodes, firstNode, lastNode

b)获得父节点

parentNode

c)获得兄弟节点

nextSibling, previousSibling

操作对象：

属性操作：通过.操作符，setAttribute，getAttribute

内容操作：innerHTML

如何给DOM树增加新的节点？

1.创建节点：document.createElement

2.将新创建的节点加入到DOM树

appendChild, insertBefore

如何删除DOM树上的节点：

removeChild

如何替换DOM树上的节点：

replaceChild

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script>
			//测试直接引用节点对象
			function test() {
				var a1 = document.getElementById("href1");
				var a2 = document.getElementsByTagName("a");
				var a3 = document.getElementsByName("google");
				console.log(a1.href + " , " + a2[1].href + " , " + a3[0].href);
			}

			//测试间接引用节点对象
			function test2() {
				// 子节点
				var a1 = document.getElementById("regFrm");
				var cs = a1.childNodes;
				console.log(cs[1].name);

				var c1 = a1.firstChild;
				var c2 = a1.childNodes[0];
				console.log("firstChild = childNodes[0] : " + (c1 === c2));

				var c3 = a1.lastChild;
				var c4 = a1.childNodes[a1.childNodes.length - 1];
				console.log("lastChild = childNodes[childNodes.length - 1] : " + (c3 === c4));

				// 父节点
				var a2 = document.getElementsByName("uname")[0];
				var f1 = a2.parentNode.id;
				console.log(f1);

				// 兄弟节点
				var a3 = document.getElementsByName("pwd")[0];
				var b1 = a3.previousSibling.nodeValue;
				// nodeValue 经常使用于文本节点
				console.log(b1);

				// 元素节点：nodeType=1, 文本节点：nodeType=3
				var next = a2.nextSibling;
				var nextElm = a2.nextElementSibling;
				while (next.nodeType != 1) {
					next = next.nextSibling;
				}
				console.log("next === nextElm : " + (next === nextElm));
			}

			// 测试处理属性
			function test3() {
				var a1 = document.getElementById("href1");
				a1.href = "http://www.google.com";
				console.log(a1.getAttribute("href"));
				a1.setAttribute("href", "http://www.sougo.com");
			}

			// 测试innerHTML（重要）
			function test4() {
				var a1 = document.getElementById("div1");
				a1.innerHTML = '<input type="button" value="div1"/>';
			}

			// 测试动态添加，删除，替换元素节点
			function test5() {
				var m = document.createElement("input");
				m.type = "textarea";

				var a1 = document.getElementById("div1");
				a1.parentNode.appendChild(m);
				/*
				 * insertBefore(newNode,beforeNode);
				 * replaceChild(newNode,oldNode);
				 * removeChild(node);
				 *
				 */
			}
		</script>
	</head>
	<body>
		<a href="http://www.baidu.com" id="href1">baidu</a>
		<br/>
		<a href="http://www.google.com" name="google">google</a>
		<br/>
		<input type="button" value="测试" οnclick="test();"/>
		<input type="button" value="测试2" οnclick="test2();"/>
		<input type="button" value="测试3" οnclick="test3();"/>
		<input type="button" value="测试4" οnclick="test4();"/>
		<input type="button" value="测试5" οnclick="test5();"/>

		<form id="regFrm">
			用户名：
			<input type="text" name="uname"/>
			密码：
			<input type="password" name="pwd"/>
		</form>

		<div id="div1"></div>
	</body>
</html>