一、DOM概述
1. 什么是DOM
代码语言：javascript复制* Document Object Model 文档对象模型2. 核心DOM
代码语言：javascript复制① Document：文档对象
② Element：元素对象
③ Attribute：属性对象
④ Text：文本对象
⑤ Comment:注释对象
⑥ Node：节点对象，其他5个的父对象二、Document
1. 获取Element对象
代码语言：javascript复制① getElementById()
根据id属性值获取元素对象。id属性值一般唯一
② getElementsByTagName()
根据元素名称获取元素对象们。返回值是一个数组
③ getElementsByClassName()
根据Class属性值获取元素对象们。返回值是一个数组
④ getElementsByName()
根据name属性值获取元素对象们。返回值是一个数组2. 创建Element对象
代码语言：javascript复制① createAttribute()
② createComment()
③ createElement()
④ createTextNode()三、Element对象
1. 方法
代码语言：javascript复制① setAttribute()
设置属性
② removeAttribute()
删除属性四、Node对象
1. 概述
代码语言：javascript复制* HTML文档会生成一个DOM树。2. 方法
代码语言：javascript复制① appendChild()
向节点的子节点列表的结尾添加新的子节点。
② removeChild()
删除（并返回）当前节点的指定子节点。
③ replaceChild()
用新节点替换一个子节点。3. 属性
代码语言：javascript复制* parentNode ：返回节点的父节点。innerHTML 获取/设置标签体内容 【该标签会刷新父标签内所有内容，会导致id绑定的监听失效，需要设置属性绑定】
五、事件监听机制
1. 点击事件：
代码语言：javascript复制① onclick 单击事件
② ondblclick 双击事件2. 焦点事件
代码语言：javascript复制① onblur 失去焦点
② onfocus 元素获得焦点。3. 加载事件
代码语言：javascript复制① onload 一张页面或一幅图像完成加载。4. 鼠标事件
代码语言：javascript复制① onmousedown 鼠标按钮被按下。
② onmouseup 鼠标按键被松开。
③ onmousemove 鼠标被移动。
④ onmouseover 鼠标移到某元素之上。
⑤ onmouseout 鼠标从某元素移开。5. 键盘事件
代码语言：javascript复制① onkeydown 某个键盘按键被按下。
② onkeyup 某个键盘按键被松开。
③ onkeypress 某个键盘按键被按下并松开。6. 选择和改变
代码语言：javascript复制① onchange 域的内容被改变。
② onselect 文本被选中。7. 表单事件：
代码语言：javascript复制① onsubmit 确认按钮被点击。
② onreset 重置按钮被点击。六、示例
代码语言：javascript复制 //动态添加表格数据，实现全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
table {
width: 500px;
margin: auto;
border: 2px silver solid;
text-align: center;
}
tr, td, th {
border: 2px silver solid;
}
.div {
margin-bottom: 20px;
text-align: center;
}
a:link {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<div class="div">
<input type="text" name="num" id="num"/>
<input type="text" name="name" id="name"/>
<input type="text" name="gender" id="gender"/>
<input type="button" name="but" value="提交" id="but"/>
</div>
<table id="table">
<tr>
<th>
<input type="checkbox" id="box" οnclick="f(this)"/>
</th>
<th>
序号
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
操作
</th>
</tr>
</table>
<script>
//获取table元素
var table = document.getElementById("table");
//获取按钮元素
var but = document.getElementById("but");
//设置按钮单击事件
but.onclick = function () {
//追加一行数据
table.innerHTML =
"<tr>"
"<td>" "<input type='checkbox' name='checked'/>" "</td>"
"<td>" document.getElementById("num").value "</td>"
"<td>" document.getElementById("name").value "</td>"
"<td>" document.getElementById("gender").value "</td>"
"<td>" "<a href='javascript:void(0)' οnclick='del(this)'>删除</a>" "</td>"
"</tr>";
};
//删除节点方法
function del(obj) {
var b = confirm("真的要删除吗");
if (b) {
//获取table节点 删除 获取tr节点
obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
}
}
var a = document.getElementById("a");
a.onclick = function () {
var b = confirm("真的要删除吗");
if (b) {
//获取table节点 删除 获取tr节点
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
};
function f(box) {
var cd = document.getElementsByName("checked");
if (box.checked === true) {
for (var i = 0; i < cd.length; i ) {
cd[i].checked = true;
}
} else {
for (var i = 0; i < cd.length; i ) {
cd[i].checked = false;
}
}
}
</script>
</body>
</html>
