DOM的简单学习
✔ 功能：控制html文档的内容
✔ 获取页面标签(元素)对象Element：document.getElementById("id值") ； --- 通过元素的id获取元素对象
✔ 操作Element对象：
（1） 修改属性值
① 明确获取的对象是哪一个？
② 查看API文档，找其中有哪些属性可以设置
（2）修改标签体内容：属性 innerHTML
① 获取元素对象
② 使用innerHTML属性修改标签体内容
DOM
✔ 概念： Document Object Model 文档对象模型
DOM将标记语言文档的各个组成部分封装为对象，可以使用这些对象对标记语言文档进行CRUD的动态操作
✔ W3C DOM 标准被分为 3 个不同的部分：
（1）核心 DOM - 针对任何结构化文档的标准模型
* Document：文档对象
* Element：元素对象
* Attribute：属性对象
* Text：文本对象
* Comment：注释对象
* Node：节点对象，其他5个的父对象
（2）XML DOM - 针对 XML 文档的标准模型
（3）HTML DOM - 针对 HTML 文档的标准模型
✔ 核心DOM模型：
（1）Document：文档对象
☛ 创建（获取）：在html dom模型中可以使用window对象来获取
① window.document
② document
☛ 方法：
① 获取Element对象：
getElementById() --- 根据id属性值获取元素对象。id属性值一般唯一
getElementsByTagName() --- 根据元素名称获取元素对象们。返回值是一个数组
getElementsByClassName() --- 根据Class属性值获取元素对象们。返回值是一个数组
getElementsByName() --- 根据name属性值获取元素对象们。返回值是一个数组
② 创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
☛ 属性
（2）Element：元素对象
☛ 创建（获取）：通过document来获取和创建
☛ 方法：
removeAttribute() --- 删除属性
setAttribute() --- 设置属性
（3）Node：节点对象，其他5个的父对象
☛ 特点：所有dom对象都可以被认为是一个节点
☛ 方法：
① CRUD dom树：
appendChild() --- 向节点的子节点列表的结尾添加新的子节点
removeChild() --- 删除（并返回）当前节点的指定子节点
replaceChild() --- 用新节点替换一个子节点。
☛ 属性：parentNode 返回节点的父节点
▶ 案例：动态表格
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="num" placeholder="输入编号"> <input type="text" id="name" placeholder=输入姓名"> <input type="text" id="gender" placeholder="输入性别"> <input type="button" id="btn" value="增加"> </div> <table> <caption>学生信息表</caption> <tr> <td>编号</td> <td>姓名</td> <td>性别</td> <td>操作</td> </tr> <tr> <td>1</td> <td>陈阿花</td> <td>女</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> </tr> <tr> <td>2</td> <td>池小强</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> </tr> <tr> <td>3</td> <td>张大华</td> <td>女</td> <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td> </tr> </table> <script> /* 分析： 1.添加： ① 给添加按钮绑定单击事件 ② 获取文本框的内容 ③ 创建td，设置td的文本为文本框的内容 ④ 创建tr ⑤ 将td添加到tr中 ⑥ 获取table，将tr添加到table中 2.删除 ① 确定点击的是哪一个"删除"的超链接 ② 怎么删除？ removeChild() --- 通过父节点删除子节点 */ document.getElementById("btn").onclick = function(){ // 获取文本框的内容 var num =document.getElementById("num").value; var name =document.getElementById("name").value; var gender =document.getElementById("gender").value; var td_num = document.createElement("td"); var text_id = document.createTextNode(num); td_num.appendChild(text_id); var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this)"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); var tr = document.createElement("tr"); tr.appendChild(td_num); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } // 删除方法 function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode ; table.removeChild(tr) ; } </script> </body> </html>
✔ HTML DOM
（1）标签体的设置和获取：innerHTML
也可以用 innerHTML 来实现动态表格添加一行，只需要将上面代码中 script 标签体中的部分内容做如下修改即可实现一样的功能。
<script> /* 分析： 1.添加： ① 给添加按钮绑定单击事件 ② 获取文本框的内容 ③ 创建td，设置td的文本为文本框的内容 ④ 创建tr ⑤ 将td添加到tr中 ⑥ 获取table，将tr添加到table中 2.删除 ① 确定点击的是哪一个"删除"的超链接 ② 怎么删除？ removeChild() --- 通过父节点删除子节点 */ // 使用innerHTML添加一行（这个方法添加不是面向对象的） document.getElementById("btn").onclick = function(){ var num =document.getElementById("num").value; var name =document.getElementById("name").value; var gender =document.getElementById("gender").value; var table = document.getElementsByTagName("table")[0]; table.innerHTML += "<tr>\n" + "<td>"+num+"</td>\n" + "<td>"+name+"</td>\n" + "<td>"+gender+"</td>\n" + "<td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" + "</tr>"; } // 删除方法 function delTr(obj) { var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode ; table.removeChild(tr) ; } </script>
（2）使用html元素对象的属性
（3）控制元素样式
① 使用元素的style属性来设置
如：
div1.style.border = "1px solid red"；
div1.style.width = "200px"；
//font-size--> fontSize
div1.style.fontSize = "20px"；
② 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>样式控制</title> <style> .d1{ border: 1px solid red; width: 100px; height: 100px; } .d2{ border: 1px solid blue; width: 200px; height: 200px; } </style> </head> <body> <div id="div1"> div1 </div> <div id="div2"> div2 </div> <script> var div1 = document.getElementById("div1"); div1.onclick = function() { // 样式1 div1.style.border = "1px solid red" ; div1.style.width = "200px"; div1.style.fontSize = "20px"; } var div2 = document.getElementById("div2"); div2.onclick = function() { // 样式2 div2.className = "d2" ; } </script> </body> </html>
