一、概述
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>