E006Web学习笔记-JavaScript（四）：DOM

訾博ZiBo

发布于 2025-01-06 14:36:36

5700

代码可运行

文章被收录于专栏：全栈开发工程师

运行总次数：0

代码可运行

一、概述

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>