1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <script type="text/javascript">
6
7 /*
8 DOM Document Object Model 文档对象模型
9 网页中的所有东西都是对象
10 优点: 使用脚本, 动态的访问或操作: 网页的内容, 网页的外观, 网页的结构
11
12 DOM的分类
13 核心 DOM 提供同时操作HTML文档和XML文档的公共属性和方法
14 HTML DOM 只用于HTML文档的专用属性和方法
15 XML DOM 只用于XML文档的专用属性和方法
16 CSS DOM 提供操作CSS的属性和方法
17 Event DOM 事件对象模型
18
19 在HTML中, 称为"标记"
20 在JS中, 称为"对象"
21 在DOM中, 称为"节点"
22
23 根节点: 一个HTML文档中只有一个根节点, 就是HTML节点
24 父节点: 一个节点的上一级节点
25 子节点: 一个节点的下一级节点
26
27 document: 文档节点, 代表整个网页, 不代表任何HTML标记, 但它是HTML节点的父节点
28 element: 元素节点, 代表HTML标记, 每一个HTML标记为一个元素节点, 它有属性节点和文本节点
29 attribute: 属性节点, 代表HTML标记的属性
30 text: 文本节点, 节点树的最底节点
31 */
32
33 /*
34 核心DOM的公共属性和方法
35 nodeName: 节点名称
36 nodeValue: 节点值, 只有文本节点才有值
37 firstChild: 第一个子节点
38 lastChild: 最后一个子节点
39 childNodes: 子节点列表, 返回一个数组
40 parentNode: 父节点
41 */
42 function showTableNode() {
43
44 // (1) html节点
45 var node_html = document.lastChild;
46 // var node_html = document.documentElement;
47
48 // (2) body节点
49 // var node_body = node_html.lastChild;
50 var node_body = document.body;
51
52 // (3) table节点
53 var node_table = node_body.firstChild;
54 alert(node_table);
55
56 }
57
58 function editTextNodeValue() {
59
60 // (1) html节点
61 var node_html = document.lastChild;
62 // var node_html = document.documentElement;
63
64 // (2) body节点
65 // var node_body = node_html.lastChild;
66 var node_body = document.body;
67
68 // (3) table节点
69 var node_table = node_body.firstChild;
70
71 // (4) tbody节点
72 var node_tbody = node_table.firstChild;
73
74 // (5) tr节点
75 var node_tr = node_tbody.childNodes[1];
76
77 // (6) td节点
78 var node_td = node_tr.childNodes[0];
79
80 // (7) 文本节点
81 var node_text = node_td.firstChild;
82
83 // (8) 更改值
84 node_text.nodeValue = "zhaowu";
85 }
86
87 </script>
88 </head>
89
90 <!-- 表格 -->
91 <body><table width="600" border="1" rules="all"><tr><td>zhangsan</td><td>男</td></tr><tr><td>lisi</td><td>男</td></tr></table>
92
93 <!-- 按钮 -->
94 <input type="button" value="显示表格节点" onclick="showTableNode()">
95 <input type="button" value="更改lisi为zhaowu" onclick="editTextNodeValue()">
96 </body>
97 </html>
