JavaScript之DOM对象讲解

最新推荐文章于 2024-07-16 19:32:16 发布

囿于之间

最新推荐文章于 2024-07-16 19:32:16 发布

阅读量141

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43637366/article/details/104419094

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

概念

Document Object Model 文档对象模型，将标记语言文档的各个部分，封装为对象。可以使用这些对象，对标记语言进行CRUD的动态操作。

分类

核心DOM 针对任何结构化文档的标准模型

Document：文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象
Node：节点对象

XML DOM 针对XML文档的标准模型
HTML DOM 针对HTML文档的标准模型

重点讲解

一、核心DOM模型

Document：文档对象

1.创建（获取）：在html dom模型中可以使用window对象来获取

  1.window.document
  2.document

2.方法

获取Element对象：
1.getElementById()：根据id属性值获取元素对象。id属性值一般唯一
2.getElementsByTagName()：根据元素名称获取元素对象们，返回值为数组
3. getElementsByClassName()：根据Class属性值获取元素对象们，返回值为数组
4. getElementsByName()：根据name属性值获取元素对象们，返回值为数组

创建其它DOM对象：
1.createAttribute(name)
2.createComment()
3.createElement()
4.createTextNode()

3.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document对象</title>
	</head>
	<body>
		
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div id="div3">div3</div>
		
		<div class="class1">class1</div>
		<div class="class1">class2</div>
		
		<input type="text" name="username"/>
	<script>
		var id = document.getElementById("div1");
		
		var divs = document.getElementsByTagName("div");
		alert(divs.length);
		
		var classes = document.getElementsByClassName("class1");
		alert(classes.length);
		
		var names = document.getElementsByName("username");
		alert(names.length);
		
		var table = document.createElement("table");
		alert(table);
	</script>
	</body>
</html>

Element：元素对象

1.创建（获取）

通过document来获取和创建

2.方法

1.removeAttribute()
2.setAttribute()

3.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Element对象</title>
	</head>
	<body>
		<a>点我试一试</a>
		<input type="button" id="btn" value="设置属性" />
		<input type="button" id="btn1" value="删除属性"/>
		
		<script>
			//获取btn
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				//1.获取a标签，由于a已知只有一个，所以取数组第一个即可
				var element_a = document.getElementsByTagName("a")[0];
				//2.设置属性
				element_a.setAttribute("href","https://www.baidu.com");
			}
			
			//获取btn1
			var btn1 = document.getElementById("btn1");
			btn1.onclick = function(){
				//1.获取a标签，由于a已知只有一个，所以取数组第一个即可
				var element_a = document.getElementsByTagName("a")[0];
				//2.删除属性
				element_a.removeAttribute("href");
			}
			
		</script>
	</body>
</html>

Node：节点对象，其它几个对象的父节点

1.特点

所有DOM对象都可以被认为是一个节点

2.方法

CRUD dom树
1.appendChild()：向节点的子节点列表的结尾添加新的子节点
2.removeChild()：删除（并返回）当前节点的指定子节点
3.replaceChild()：用新节点代替一个子节点

3.属性

parentNode：获取当前节点的父节点

4.案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Node对象</title>
		
		<style>
			
			div{
				border:1px solid red;
			}
			
			#div1{
				width: 200px;
				height: 200px;
			}
			
			#div2{
				width: 100px;
				height: 100px;
			}
			
			#div3{
				width: 100px;
				height: 100px;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="div1">
			<div id="div2">
				div2
			</div>
			div1
		</div>
		
		<a href="javascript:void(0);" id="del">删除子节点</a>
		<!-- <input type="button" id="del" value="删除子节点"/> -->
		<a href="javascript:void(0);" id="add">添加子节点</a>
		
	<script>
		//获取超链接
		var element_a = document.getElementById("del");
		//绑定单击事件
		element_a.onclick = function(){
			var div1 = document.getElementById("div1");
			var div2 = document.getElementById("div2");
			div1.removeChild(div2);
		}
		
		//获取超链接
		var element_add = document.getElementById("add");
		//绑定单击事件
		element_add.onclick = function(){
			var div1 = document.getElementById("div1");
			var div3 = document.createElement("div");
			div3.setAttribute("id","div3");
			div3.innerHTML = "div3";
			div1.appendChild(div3);
		}
		
		/*
			特别说明：
			超链接功能：
				1.可以被点击：有下划线点击样式
				2.点击后跳转到href指定的url
			
			当前需求：
				保留1功能，去掉2功能
			
			实现方式：
				href="javascript:void(0);"
		*/
	   
	    var div2 = document.getElementById("div2");
		var div1 = div2.parentNode;
		alert(div1);
	</script>	
	</body>
</html>

二、HTML DOM

1.标签体的设置和获取

innerHTML

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTMLDOM</title>
	</head>
	<body>
		<div id="div1">
			div
		</div>
	<script>
		var div = document.getElementById("div1");
		var innerHtml = div.innerHTML;
		alert(innerHtml);
		div.innerHTML = "<input type='text' />";
		div标签中追加一个文本输入框
		div.innerHTML += "<input type='text' />";
	</script>	
	</body>
</html>

2.使用html元素对象的属性

1.明确获取的对象是哪一个？
2.查看API文档，找其中有哪些属性可以设置

3.控制元素样式

1.使用元素的style属性来设置
2.提前定义好类选择器样式，通过元素的classname属性来设置其class属性值

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制样式</title>
		<style>
			
			.d1{
				border: 1px solid red;
				width: 100px;
				height: 100px;
			}
			
			.d2{
				border: 1px solid blue;
				width: 200px;
				height: 200px;
			}
			
		</style>
		
	</head>
	<body>
		
		<div id="div1">
			div1
		</div>
		
		<div id="div2">
			div2
		</div>
		
	<script>
		
		var div1 = document.getElementById("div1");
		div1.onclick = function(){
			//修改样式方式1
			div1.style.border = "1px solid red";
			
			div.style.width = "200px";
			
		}
		
		
		var div2 = document.getElementById("div2");
		div2.onclick = function(){
			//修改样式方式2
			div2.className = "d2";
		}
		
	</script>
	</body>
</html>

本篇博客就介绍到这里，如发现问题或者产生疑问请及时提出