DOM = Document Object Model，文档对象模型 DOM是HTML与XML的应用编程接口（API） DOM将整个页面映射为一个由层次节点组成的文件 DOM把网页和脚本以及其他的编程语言联系了起来
DOM模型在AJAX开发中的作用： 在ajax中，DOM模型其实是最核心的结构，是所有ajax开发的基础架构．如果没有DOM模型，就没有办法在客户端改变页面的内容，所有的局部刷新，异步请求也就无从实现。熟练掌握DOM模型的相关技术，才算真正掌握了ajax开发精髓。
根据DOM的规定，HTML文档中的每个成分都是一个节点。 整个文档是一个文档节点 每个HTML标签是一个元素节点 包含在HTML元素中的文本是文本节点 每个HTML属性是一个属性节点 注释属于注释节点 通过DOM，可以访问HTML文档中的每个节点
节点的方法 结点的属性 nodeName:元素结点返回结点类型(即，标记名称)；属性结点返回undefined；文本节点返回"#text".
nodeType:元素节点返回1，属性节点返回2，文本节点返回3nodeValue:元素节点返回null, 属性节点返回undefined, 文本结点返回文本值。 <body> <div id="mydiv"><p class="myp">我是p标记</p> </div> <!-- DOM 中节点的类型 元素节点 属性节点 文本节点 --> <script type="text/javascript"> // mydiv 就是一个DOM对象 var mydiv = document.getElementById("mydiv"); console.log(mydiv.nodeName,mydiv.nodeType,mydiv.nodeValue); var p = mydiv.firstChild; console.log(p.nodeName, p.nodeType, p.nodeValue); var cls = p.getAttributeNode("class"); console.log(cls.nodeName,cls.nodeType,cls.nodeValue); var t = p.firstChild; console.log(t.nodeName, t.nodeType, t.nodeValue); /** * nodeName nodeType nodeValue * 元素节点 标签名称 1 null * 属性节点 属性名称 2 属性的值 * 文本节点 #text 3 文本内容 */ </script> </body> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> tr.mytr{ background-color: #FFFAD0; } tr td{ padding: 5px; } </style> </head> <body> <div align="center"> <table id="tab" border="1" cellspacing="0" style="border-collapse: collapse;" width="400"> <tr> <th>Id</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> <tr> <td>1</td> <td>张三</td> <td>18</td> <td>删除</td> </tr> </table> <div style="margin-top: 40px;"> <input type="text" placeholder="请输入姓名" id="nameId" > <input type="button" value="添加" onclick="addRow();"> </div> </div> <script type="text/javascript"> var index = 1; function addRow(){ // 1.获取需要添加的内容 var input = document.getElementById("nameId"); var val = input.value; // 2.获取table标签 var tab = document.getElementById("tab"); // 3.创建tr标签 var tr = document.createElement("tr"); // 4.创建4个td标签 var td1 = document.createElement("td"); var td2 = document.createElement("td"); var td3 = document.createElement("td"); var td4 = document.createElement("td"); // 5.对td标签赋值 index ++; td1.innerHTML=index; td2.innerHTML=val; td3.innerHTML=33; td4.innerHTML="<input type='button' value='删除' οnclick='removeRow(this)'>"; if(index%2==0){ tr.setAttribute("class","mytr");// 给元素节点添加属性信息 } // 6.将td追加到tr中 tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); // 7.将tr追加到table中 tab.appendChild(tr); } /*** * 删除table中的一行记录 * parentNode:获取直接的父节点 * removeChild:移除子节点 * * * 元素节点： * createElement 创建节点 * appendChile 追加节点 * removerChild 删除节点 * 。。。。 * * 属性节点： * setAttribute 设置属性值 * getAttribute 获取属性值 * removeAttribute 移除属性值 * 文本节点： * innerHTML：设置文本和标签内容 * innerText:设置文本 * */ function removeRow(o){ // console.log(o, o.parentNode, o.parentNode.parentNode, o.parentNode.parentNode.parentNode); // 获取需要被删除的tr var tr = o.parentNode.parentNode; // 获取对应的table var tab = document.getElementById("tab"); // 从table中移除tr tab.removeChild(tr); } </script> </body>