一、概述
1、简介
Document Object Model文档对象模型；
将标记语言文档的各个部分，封装为对象，可以使用这些对象，对标记语言文档进行CRUD（增删改查）的动态操作；
2、标准
W3C DOM标准被分为3个不同的部分：
核心DOM——针对任何结构化文档的标准模型；
Document文档对象；
Element元素对象；
Attribute属性对象；
Text文本对象；
Comment注释对象；
Node节点对象，是其他5个的父对象；XML DOM——针对XML文档的标准模型；
HTML DOM——针对HTML文档的标准模型；
我们需要学习的内容 = 核心DOM + HTML DOM；
二、Document文档对象
1、创建/获取
在html dom中，可以使用window对象获取；
window.document;
或者document;
2、方法
（1）获取Element对象；
document.getElementById()返回对拥有指定 id 的第一个对象的引用；
document.getElementsByName()返回带有指定名称的对象集合；
document.getElementsByTagName()返回带有指定标签名的对象集合；
document. getElementsByClassName()返回文档中所有指定类名的元素集合，作为 NodeList 对象。（2）创建其他的DOM对象；
document.createAttribute()创建一个属性节点
document.createComment()创建注释节点；
document.createDocumentFragment()创建空的 DocumentFragment 对象，并返回此对象；
document.createElement()创建元素节点；
document.createTextNode()创建文本节点；三、Element对象
1、创建/获取
通过document对象；
2、方法
element.setAttribute()设置或者改变指定属性并指定值；
element.removeAttribute()从元素中删除指定的属性；代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM演示</title>
</head>
<body>
<a>请为我设置或移除链接</a>
<input id="btn1" type="button" value="设置链接" />
<input id="btn2" type="button" value="移除链接" />
</body>
<script type="text/javascript">
var a = document.getElementsByTagName("a")[0];
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
a.setAttribute("href","http://www.baidu.com/");
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
a.removeAttribute("href");
}
</script>
</html>
四、Node对象，其他5个对象的父对象
1、特点
所有DOM对象都可以被认为是一个节点；
2、方法
CRUD DOM树：
appendChild()：向节点的子节点列表的结尾添加新的子节点；
removeChild()：删除（并返回）当前节点的指定子节点；
replaceChild()：用新节点替换子节点；代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM演示</title>
<style type="text/css">
#div3{
width: 50px;
height: 50px;
background-color: #008000;
}
#div4{
width: 70px;
height: 70px;
background-color: blue;
}
</style>
</head>
<body>
<div id="div1" style="width: 200px;height: 200px;background-color: #FF0000;">
div1
<div id="div2"style="width: 100px;height: 100px;background-color: #00FFFF;">
div2
</div>
</div>
<a>a标签说明</a>
<input id="btn1" type="button" value="添加" />
<input id="btn2" type="button" value="删除" />
</body>
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var a = document.getElementsByTagName("a")[0];
var btn1 = document.getElementById("btn1");
btn1.onclick = function(){
//创建子节点
var div3 = document.createElement("div");
div3.setAttribute("id","div3");
div3.innerHTML = "div3";
div1.appendChild(div3);
}
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
//删除子节点
div1.removeChild(div2);
}
</script>
</html>
3、属性
parentNode返回节点的父节点。
4、动态添加删除表格数据案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table</title>
<style type="text/css">
</style>
</head>
<body>
<div id="div_input">
<input type="text" id="num" value="请输入序号"/>
<input type="text" id="name" value="请输入名字"/>
<input type="text" id="sex" value="请输入性别"/>
<input type="button" id="btn" value="添加数据"/>
</div>
<table id="tb" border="1" style="width: 600px;">
<tr>
<th>序号</th>
<th>名字</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>大哥</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>二哥</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>三哥</td>
<td>男</td>
<td><a href="javascript:void(0);" onclick="del(this);">删除</a></td>
</tr>
</table>
</body>
<script type="text/javascript">
//添加功能
document.getElementById("btn").onclick = function(){
var num = document.getElementById("num").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var tr = document.createElement("tr");
var td_num = document.createElement("td");
var text_num = document.createTextNode(num);
td_num.appendChild(text_num);
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_del = document.createElement("td");
var td_del_a = document.createElement("a");
td_del_a.setAttribute("href","javascript:void(0);");
td_del_a.setAttribute("onclick","del(this);");
var td_del_a_text = document.createTextNode("删除");
td_del_a.appendChild(td_del_a_text);
td_del.appendChild(td_del_a);
tr.appendChild(td_num);
tr.appendChild(td_name);
tr.appendChild(td_sex);
tr.appendChild(td_del);
var table = document.getElementById("tb");
table.appendChild(tr);
}
//删除功能
function del(obj){
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</html>
结果截图：
五、HTML DOM
1、innerHTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML</title>
</head>
<body>
<div id="dv1">
哈哈！
</div>
<script type="text/javascript">
var div = document.getElementById("dv1");
//替换为文字
div.innerHTML = "呵呵！";
//替换为标签
div.innerHTML = "<a href='http://www.baidu.com'>百度一下</a>";
//追加标签
div.innerHTML += "<a href='http://www.baidu.com'>百度一下</a>";
</script>
</body>
</html>
2、控制元素样式
方法一：使用元素的style属性来设置；
方法二：使用提前定义好的样式，通过className属性来设置其class属性；
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>innerHTML</title>
<style type="text/css">
.d1{
width: 300px;
height: 300px;
background-color: #00FFFF;
}
</style>
</head>
<body>
<div id="dv1">
哈哈！
</div>
<script type="text/javascript">
var div = document.getElementById("dv1");
div.onclick = function(){
//第一种方式
div.style.background = "fuchsia";
//font-size --> fontSize
div.style.fontSize = "30px";
//第二种方式
div.className = "d1";
}
</script>
</body>
</html>
标签：DOM,JavaScript,getElementById,var,td,document,节点,E006Web From： https://blog.51cto.com/u_13272819/6079073