DOM
1.概念：Document Object Model 文档对象模型
*将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作。
2.W3C DOM 标准被分为3个不同的部分：
核心 DOM：针对任何结构化文档的标准模型
*Document：文档对象
*Element：元素对象
*Attrubute：属性对象
*Text：文本对象
*Comment：注释对象
XML DOM：针对XML文档的标准模型
HTML DOM：针对HTML文档的标准模型
3*核心 DOM：针对任何结构化文档的标准模型：
*Document：文档对象：
1.创建:
1.window.document
2.document
2.方法:
1.获取Element对象:
1.getElementById():根据id属性值获取元素对象
2.getElementByTagName():根据元素name属性获取元素的对象们，返回值是一个数组
3.getElementByClassName():根据Class属性值获取元素对象们。返回值是一个数组
4.getElementByName():根据name属性值获取元素对象们，返回值是一个数组
2.创建其他DOM对象：
createAttribute(name)
createComment()
createElement()
createTextNode()
3.属性*Element：元素对象
1.创建:通过document来创建
2.方法:
1.removeAttribute() 删除属性
2.setAttribute() 设置属性*Node：节点对象，其他5个父对象
1.特点:所有的dom对象都可以被认为是一个节点
2.方法:
*CRUD dom树
appendChild():添加子节点
removeChild():删除子节点
replaceChild():更新子节点
3.属性:
parentNode:返回父节点4.案例_动态表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
text-align: center;
margin: 40px;
}
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<input type="text" placeholder="请输入编号" id="id">
<input type="text" placeholder="请输入姓名" id="name">
<input type="text" placeholder="请输入性别" id="sex">
<input type="button" value="添加" id="btn">
</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>
</table>
<script>
//绑定点击事件
document.getElementById("btn").onclick =function () {
//获取对象
var id = document.getElementById("id").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
//创建节点td,赋值td
var td_id = document.createElement("td");
var text_id = document.createTextNode(id);
td_id.appendChild(text_id);
var td_name = document.createElement("td");
var text_name = document.createTextNode(name);
td_name.appendChild(text_name);
var td_sex = document.createElement("td");
var text_sex = document.createTextNode(sex);
td_sex.appendChild(text_sex);
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.append(text_a);
td_a.append(ele_a);
//创建tr对象
var tr = document.createElement("tr");
tr.append(td_id);
tr.append(td_name);
tr.append(td_sex);
tr.append(td_a);
//获取table对象
var table = document.getElementsByTagName("table")[0];
table.append(tr);
}
function delTr(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</body>
</html>5.*HTML DOM：针对HTML文档的标准模型
1.标签体的设置和获取：innerHTML
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.innerHTML+= "<input type = 'text'>";
</script>2.使用html元素对象的属性
3.控制样式：
1.使用元素的style属性设置
<div id="div1">
div
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
div1.style.border = "1px solid red";
div1.style.fontSize = "50px";
div1.style.width = "50%";
}2.提前定义好类选择器的样式，通过元素的className来设置
