DOM属性：
属性是节点（HTML 元素）的值，您能够获取或设置。 文档里的每个节点都有以下3个属性： nodeName, nodeType, nodeValue。更有一些常用属性：innerHTML，parentNode，childNodes ，attributes ，firstChild，lastChild， nextSibling， previousSibling， length
① nodeName
nodeName:一个字符串，其内容是给定节点的名字。
var name = node.nodeName;
* 如果节点是元素节点，nodeName返回这个元素的名称
* 如果是属性节点，nodeName返回这个属性的名称
* 如果是文本节点，nodeName返回一个内容为#text 的字符串
注意：nodeName 是一个只读属性。
② nodeType
nodeType：返回一个整数，这个数值代表着给定节点的类型。
nodeType 属性返回的整数值对应着 12 种节点类型,常用的有三种：
Node.ELEMENT_NODE --- 1 元素节点
Node.ATTRIBUTE_NODE --- 2 属性节点
Node.TEXT_NODE --- 3 文本节点
注意：nodeType 是个只读属性
③nodeValue
nodeValue：返回给定节点的当前值（字符串）
如果给定节点是一个元素节点，返回值是 null
如果给定节点是一个属性节点，返回值是这个属性的值。
如果给定节点是一个文本节点，返回值是这个文本节点的内容。
注意：nodeValue 是一个 读/写 属性，但不能对 元素节点的 nodeValue 属性设置值， 但可以为文本节点的 nodeValue 属性设置一个值。例如：
var li = document.getElementById(“li”);
if(li.firstChild.nodeType == 3)
li.firstChild.nodeValue = “请叫我木丁西QQ1012421396”;
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
11
<body>
12
13
<form name="form1" action="test.html" method="post" >
14
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1" id="tid_1" ><br>
15
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2" id="tid_2" ><br>
16
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3" id="tid_3" ><br>
17
<input type="button" name="ok" value="保存1"/>
18
</form>
19
20
<select name="edu" id="edu">
21
<option value="博士">博士^^^^^</option>
22
<option value="硕士">硕士^^^^^</option>
23
<option value="本科" selected="selected" >本科^^^^^</option>
24
<option value="幼儿园">幼儿园^^^^^</option>
25
</select>
26
27
<select name="job" id="job" >
28
<option value="美容">美容^^^^^</option>
29
<option value="IT">IT^^^^^</option>
30
<option value="程序员">程序员^^^^^</option>
31
<option value="建筑师">建筑师^^^^^</option>
32
</select>
33
34
35
<p id="pid" name="8888">
36
请叫我木丁西 QQ1012421396
37
</p>
38
39
</body>
40
41
<script language="JavaScript">
42
43
//元素节点 id="tid_1" 输出nodeName nodeType nodeValue
44
var tid_1_obj = document.getElementById("tid_1");
45
var nodeName = tid_1_obj.nodeName;
46
var nodeType = tid_1_obj.nodeType;
47
var nodeValue = tid_1_obj.nodeValue;
48
alert(nodeName + "#" + nodeType + "#" + nodeValue);
49
50
51
//元素节点 id="pid" 输出nodeName nodeType nodeValue
52
var pid_obj = document.getElementById("pid");
53
alert(pid_obj.nodeName + "#" + pid_obj.nodeType + "#" + pid_obj.nodeValue);
54
55
//属性节点 id="pid" 中name这个属性节点 输出nodeName nodeType nodeValue
56
var nameAttribute = pid_obj.getAttributeNode("name");
57
alert(nameAttribute.nodeName + "#" + nameAttribute.nodeType + "#" + nameAttribute.nodeValue);
58
59
//文本节点 id="pid" 输出nodeName nodeType nodeValue
60
var textObj = pid_obj.firstChild;
61
alert(textObj.nodeName + "#" + textObj.nodeType + "#" + textObj.nodeValue);
62
63
</script>
64
</html>
④innerHTML（重点）
作用：设置或获取位于对象起始和结束标签内的HTML
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
<body>
11
<div id="city"></div>
12
</body>
13
<script language="JavaScript">
14
//在div层中插入 <h1>今天</h1>
15
var city_node = document.getElementById("city");
16
city_node.innerHTML = "<h1>今天</h1>";
17
</script>
18
19
</html>
⑤parentNode
作用：parentNode 属性以 Node 对象的形式返回指定节点的父节点。
如果指定节点没有父节点，则返回 null。
⑥childNodes
作用：childNodes 属性返回节点的子节点集合，以 NodeList 对象。
注意：您可以使用 length 属性来确定子节点的数量，然后您就能够遍历所有的子节点并提取您需要的信息。
⑦attributes
作用：attributes 属性返回指定节点的属性集合，即 NamedNodeMap。
注意：您可以使用 length 属性来确定属性的数量，然后您就能够遍历所有的属性节点并提取您需要的信息。
⑧firstChild
作用：firstChild 属性返回指定节点的首个子节点，以 Node 对象。
注意：在 HTML 中，文本本身是 HTML 元素的父节点，HEAD 和 BODY 是 HTML 元素的子节点。
⑨lastChild
作用：lastChild 属性返回被选节点的最后一个子节点。 如果选定的节点没有子节点，则该属性返回 NULL。
⑩nextSibling
作用：nextSibling 属性返回指定节点之后紧跟的节点，在相同的树层级中。 被返回的节点以 Node 对象返回。
注意： 如果没有 nextSibling 节点，则返回值为 null。
⑪previousSibling
作用：previousSibling 属性返回选定节点的上一个同级节点（在相同树层级中的前一个节点）。 如果不存在这样的节点，则该属性返回 null。
⑫length
作用： length 属性可返回集合中节点的数目。在遍历节点集合的时候容易出问题，需注意
注意：length属性将返回一个元素所有可能的节点书数目。
例如：
1
<select name="first" size="10" multiple="multiple" class="td3" id="first">
2
<option value="选项1">选项1</option>
3
<option value="选项2">选项2</option>
4
<option value="选项3">选项3</option>
5
<option value="选项4">选项4</option>
6
<option value="选项5">选项5</option>
7
<option value="选项6">选项6</option>
8
<option value="选项7">选项7</option>
9
<option value="选项8">选项8</option>
10
</select>
一个select下有8个option项，document.getElementById("first").childNodes.length=16，而不是8，
document.getElementById("first").getElementsByTagName("option").length=8才是正确的。
