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>