JavaScript概述四（DOM文档对象模型）

爪哇师

已于 2023-05-07 15:01:10 修改

阅读量563

点赞数

分类专栏： Java学习笔记文章标签： javascript

于 2023-04-24 22:36:28 首次发布

本文链接：https://blog.csdn.net/qq_51768153/article/details/130317567

版权

Java学习笔记专栏收录该内容

45 篇文章 3 订阅

订阅专栏

本文介绍了DOM的基本概念，如何通过JavaScript操作页面元素，包括按ID、类名、标签名和name属性查找元素，以及使用querySelector和querySelectorAll方法。同时，讨论了Element和Node的区别，以及Element的常用属性如children、parentElement等，展示了如何修改页面内容和样式。

摘要由CSDN通过智能技术生成

1.DOM(Document Object Model)

会把网页里面的元素当成对象去操作,包含对象的属性,属性值,方便我们去操作网页。

整个页面最终会形成一个对象 :document ,页面里面的所有的元素(如标签 ) 最终都会转换成 js 里面的对象。

1.1 获取页面的元素（通过选择器）

1.1.1 按id属性查找

格式：document.getElementById("id属性值");

此函数只能返回两种情况,要么是0个对象(即为null),要么是1个。返回的是一个具体的对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.onload=function(){
			//1.获得input标签的对象
			var input=document.getElementById("mybutton");
			console.log(input);
			//2.修改value的属性值
			var num=3;
			setInterval(function(){
			num--;
			input.value=num;
			if(num==0){
			location.href="https://www.baidu.com";
		}
	},1000);
}
		</script>
	</head>
	<body>
		恭喜你注册成功，
		<input type="button" id="mybutton" value="3" />
		秒后跳转界面。		
	</body>
</html>

最终的效果就是：恭喜你注册成功，3秒后跳转界面-->恭喜你注册成功，2秒后跳转界面-->恭喜你注册成功，1秒后跳转界面-->恭喜你注册成功，0秒后跳转界面;最后直接跳转到百度界面。

1.1.2 通过class查找

格式：document.getElementsByClassName("类名");

返回的是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.c1{
				height: 100px;
				width: 100px;
				background-color: burlywood;
			}
			.c2{
				height: 100px;
				width: 100px;
				background-color:chocolate;
			}
		</style>
		<script type="text/javascript">
			window.onload=function(){
				//通过class类名获取标签对象
				var c1=document.getElementsByClassName("c1");
				console.log(c1);
			}
		</script>
	</head>
	<body>
		<div class="c1">跳跳虎</div>
		<div class="c2">东北虎</div>
		<div class="c1">小哭包</div>
	</body>
</html>

注意：若是使用alert（）函数来输出c1，会显示如下结果

1.1.3 通过标签名查找

格式： document.getElementsByTagName("标签名");

返回的同样是一个HTMLCollection(类数组),具备数组的特性:有下标,有length属性。

				//通过标签名获取标签对象
				var c1=document.getElementsByTagName("div");
				console.log(c1);

1.1.4 通过name属性查找

后期如果想把标签的元素内容发给java服务器,都需要根据name属性值来完成。

格式：document.getElementsByName("name属性的属性值");

返回的是一个NodeList集合(同样可看作一个类数组)，但比HTMLCollection集合更强大。

注意：只有文档对象才能使用getElement……方法，类数组不具备。当类数组需要使用getElement……方法时，需要使用 getElement……[0]来获取对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//1.获得c1所在的对象
			window.onload=function(){
//				var c1=document.getElementsByClassName("c1");
//				console.log(c1);
				//2.获得d1里面的2个c1
				//先获得d1
				var d1=document.getElementsByClassName("d1");//此时d1是类数组，不是document文档对象
				//var d1=document.getElementsByClassName("d1")[0];
				//再获得c1
				var c1=d1.getElementsByClassName("c1");
				console.log(c1);
			}
		</script>
	</head>
	<body>
		<div class="d1">
			<div class="c1">孙尚香</div>
			<div class="c1">鲁班七号</div>
		</div>
		<div class="c1">貂蝉</div>
		<p class="c1">吕布</p>
	</body>
</html>

因为var d1=document.getElementsByClassName("d1");//此时d1是类数组，不是document文档对象，当使用var c1=d1.getElementsByClassName("c1")来获得c1时，根本就不能获取到c1。此时只需要更改获取d1的代码即可。

var d1=document.getElementsByClassName("d1")[0];

1.1.5 通过document.querySelector() 来选择元素

选择单个元素：

document.querySelector("#id值");
document.querySelector(".class值");

返回的是单个元素对象或者null,类似id选择器。

console.log(document.querySelector(".d1"))

选择多个元素：

document.querySelectorAll("标签名1，标签名2……");

				console.log(document.querySelectorAll("div,p"));

返回的是NodeList（类数组）。

1.2 DOM结构

标签名	第一级	第二级	第三极	第四级
div	HTMLDivElement	HTMLElement	Element	Node
p	HTMLParagraphElement	HTMLElement	Element	Node
input	HTMLInputElement	HTMLElement	Element	Node

1.2.1 Element和Node的区别

在网页当中,所有的标签都是Element,也一定是Node ，但是所有的Node不一定是Element,比如文字,注释,回车,是Node而不是Element。

1.2.2 Element的常用属性

1.children:获得当前元素下面的子级别元素,返回的是一个HTMLCollection集合

2.parentElement:获得当前元素的父级元素

3.nextElementSibling:获得当前元素的下一个兄弟元素

4.previousElementSibling:获得当前元素的前一个兄弟元素

案例一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		window.onload=function(){
			//以第一个c1为参照物，作为自己
			//1.获得自己的孩子
			var myself=document.getElementsByClassName("c1")[0];
			var child=myself.children;
			console.log(child);
			//2.获得自己的父级元素
			var parent=myself.parentElement;
			console.log(parent);
			//3.获得自己的上一个元素
			var previous=myself.previousElementSibling;
			console.log(previous);
			//4.获得自己的下一个元素
			var next=myself.nextElementSibling;
			console.log(next);
		}
			
		</script>
	</head>
	<body>
		<div id="d1">
			<div>大哥</div>
			<div class="c1">
				<div>儿子</div>
			</div>
			<div>三弟</div>
		</div>
		<div class="c1">二叔</div>
	</body>
</html>

5.input标签修改内容: 通过value属性,但是其他一些双标签,可以使用以下两类属性去修改

innerHTML:设置或者获取当前对象的标签内容
innerText: 设置或者获取当前对象的文本内容

			//5.将大哥改为giegie,并将颜色设置为red
			var previous=myself.previousElementSibling;
			previous.innerText="giegie";
			previous.style.color="red";
			console.log(previous);

案例二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function f1(){
			//1.获得输入框的对象
			var obj_text=document.getElementById("t1");
			//2.获得输入框的值
			var username=obj_text.value;
			//3.正则表达式
			var reg=/^[a-zA-Z]{3,6}$/;
			//获得span标签的对象
			var obj_span=document.getElementById("msg");
				if(reg.test(username)){
					obj_span.innerText="输入合法！";
					obj_span.style.color="green";
				}else{
					obj_span.innerText="输入不合法！";
					obj_span.style.color="red";
				}
			}
		</script>
	</head>
	<body>
		<input type="text" id="t1" /> <span id="msg"></span> <br />
		<input type="button" value="测试" onclick="f1()"/>
	</body>
</html>