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

古城微笑少年丶 2024-04-17 19:32 17阅读 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>

### 结果截图： ###

![20190831104330407.jpg][]

# 五、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>

![20190903102459499.gif][]

[20190831104330407.jpg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/1fe334681e3b49949ab42333b4ed9413.jpg
[20190903102459499.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/020deccfd78343209c658ef4abff6e91.gif