DOM 基础

1.DOM 的4个基本接口

　　Document　　Node　　NodeList　　NamedNodeMap

2.DOM 基本对象

　　（1）Document 对象

　　（2）Node 对象

　　　　nodeType 属性返回节点的类型：Element（1）、Attr（2）、Text（3）、Comment（8）、Document（9）、DocumentFragment（11）

　　（3）NodeList 对象

　　（4）Elment 对象

　　（5）Attr 对象

3.判断文本是否空格的方法：

　　　　if(node.nodeType == 3 && !/\s/.test(node.nodeValue)){...}

4.DOM操作综合实例。

　　本案例中，要实现添加和删除分类信息，主要用到创建节点、插入节点、删除节点、设置元素节点属性等操作。运行效果及代码如下。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>domdemo</title>
 5     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 6     <script language="javascript" type="text/javascript">
 7         var id = 0;
 8         function addSort(){
 9             var txtInput = document.getElementById("txt");
10             if(txtInput.value == ""){
11                 alert("请输入分类名称！");
12                 txtInput.focus();
13                 return;
14             }
15             var row = document.createElement("tr");
16             var rowId = id;
17             row.setAttribute("id",rowId);
18             row.bgColor="#99FF99";
19             var cell = document.createElement("td");
20             cell.bgColor="#6699CC";
21             var txtNode = document.createTextNode(txtInput.value);
22             cell.appendChild(txtNode);
23             row.appendChild(cell);
24             
25             var deleteButton = document.createElement("input");
26             deleteButton.setAttribute("type","button");
27             deleteButton.setAttribute("value","删  除");
28             deleteButton.onclick = function(){deleteSort(rowId)};
29             cell = document.createElement("td");
30             cell.appendChild(deleteButton);
31             row.appendChild(cell);
32             
33             document.getElementById("sortList").appendChild(row);
34             txtInput.value = "";
35             
36             id++;
37         }
38         
39         function deleteSort(id){
40             if(null != id){
41                 var rowToDelete = document.getElementById(id);
42                 var sortList = document.getElementById("sortList");
43                 sortList.removeChild(rowToDelete);
44             }
45         }
46     </script>
47   </head>
48   
49   <body>
50       <table border="1" width="80%" align="center" bgColor="#99ccff">
51           <tbody>
52           <tr>
53               <td colspan="3" align="center"><b>分类管理</b></td>
54           </tr>
55           <tr>
56               <td>请输入分类名称：</td>
57               <td><input id="txt" type="text" size="40"/></td>
58               <td><input id="addBtn" type="button" value="添加" onclick="addSort()"/></td>
59           </tr>
60           <tr>
61               <td colspan="3" align="center"><b>已添加的分类</b></td>
62           </tr>
63           </tbody>
64       </table>
65       <table border="1" align="center" width="80%">
66           <tr height="30">
67               <td width="80%">分类名称</td>
68               <td>操作</td>
69           </tr>
70           <tbody id="sortList"></tbody>
71       </table>
72   </body>
73 </html>