HTML之Javascript——DOM文档对象模型

最新推荐文章于 2023-04-07 11:23:09 发布

松鼠MaSaKi

最新推荐文章于 2023-04-07 11:23:09 发布

阅读量272

点赞数

分类专栏： JAVA Basics 文章标签： java web前端 html javascript DOM

本文链接：https://blog.csdn.net/qq_45337431/article/details/99999950

版权

JAVA Basics 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

一、DOM概述

通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素，完成相关的增删改查。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

二、获取和修改HTML元素

有三种方法可以获取：

通过 id 找到 HTML 元素，只能操作一个元素
通过标签名找到 HTML 元素，可以操作多个元素
通过类名找到HTML 元素，可以操作多个元素

2.1 id找到HTML元素

该方式只能获取唯一个值，一般用于非数组的独立标签元素操作

<div id="div1">
	获取dom元素
</div>
<!--在界面的效果就是，有个按钮可以点击，点击后触发click1()函数，更改div1中内容-->
<input type="button" value="第一种方式getElementById" onclick="click1()" />
<!--直接通过id修改其属性-->
<script type="text/javascript">
function click1(){
	//第一种获取getElementById
	var div1=document.getElementById("div1");
	div1.innerHTML="<h3 style='color: red;'>javascript是一门脚本语言</h3>";//此方法可以解析标签
	//div1.innerText="<h3 style='color: red;'>javascript是一门脚本语言</h3>";//此方法不可以解析标签,直接字符串打印
}
</script>

2.2 通过标签名获取

该方式获取的必然是一个数组，即使元素标签只有一个

<h1>赠汪伦</h1>
<p class="class1">李白乘舟将欲行</p>
<p class="class1">忽闻岸上踏歌声</p>
<p>桃花潭水深千尺</p>
<p>不及汪伦送我情</p>
<!--在界面的效果就是，有个按钮可以点击，点击后触发click3()函数，更改p标签内容-->
<input type="button" value="第三种方法getElementsByTagName" onclick="click3()" />

<!--通过p标签修改其属性-->
<script type="text/javascript">
function click3(){
	var ps2=document.getElementsByTagName("p");
	console.log(ps2.length);//标签内容很多，所以是数组
	for(var i=0;i<ps2.length;i++){
		console.log(ps2[i].innerHTML); //将p标签内容向控制台输出
	}
}
</script>

2.3 通过类名找到HTML 元素

该方式获取的必然是一个数组，即使元素标签只有一个

<h1>赠汪伦</h1>
<p class="class1">李白乘舟将欲行</p>
<p class="class1">忽闻岸上踏歌声</p>
<p>桃花潭水深千尺</p>
<p>不及汪伦送我情</p>
<!--在界面的效果就是，有个按钮可以点击，点击后触发click2()函数，更改class1类内容-->
<input type="button" value="第二种方法getElementsByClassName" onclick="click2()" />

<!--通过class1修改其属性-->
<script type="text/javascript">
function click2(){
	var ps=document.getElementsByClassName("class1");
	console.log(ps.length);
	for(var i=0;i<ps.length;i++){
		var p=ps[i];
		console.log(p.innerHTML);
	}
}
</script>

2.4 通过表单Name找到HTML 元素

该方式获取的必然是一个数组，即使元素标签只有一个

//这里以radio单选表单类型为例，获取性别
var gender;
var genders=document.getElementsByName("gender");
for(var i in genders){
	if(genders[i].checked){
		gender=genders[i].value;
	}
}

只要获取了标签，就可以获取各种属性，比如图片属性，表单属性等
表单必须使用value进行判断，如果判断是否为空，只能使用【value.length==0】进行长度判断

<!--更改图片-->
<img id="img1" src="img/05.jpg" width="100" />
<input type="button" value="修改获取属性1" onclick="click4()" />
<script type="text/javascript">
function click4(){
	var img1=document.getElementById("img1");
	console.log(img1.src);
	img1.src="img/8691.jpg";
}
</script>

<!--从表单获取关键属性，传到后台-->
<input type="text" name="phone" id="phone" />
<input type="button" value="修改获取属性2" onclick="click5()" />
<script type="text/javascript">
function click5(){
	var phone=document.getElementById("phone");
	phone.value="110";//这里的值就是用户在输入框输入的东西
	console.log(phone.value);
}
</script>

三、修改CSS样式

<h1>赠汪伦</h1>
<p id="p1">李白乘舟将欲行</p>
<p id="p2">忽闻岸上踏歌声</p>
<p>桃花潭水深千尺</p>
<p>不及汪伦送我情</p>
<input type="button" value="获取修改cssy样式" onclick="click1()"/>
<script type="text/javascript">
	function click1(){
		var p1=document.getElementById("p1");
		p1.style.color="red";
		p1.style.fontSize="30px";//驼峰名选取，不再需要横杠
		p1.style.backgroundColor="skyblue";
		console.log(p1.style.color);
		console.log(p1.style.fontSize);
		console.log(p1.style.backgroundColor);//修改后将结果传到后台
}			
</script>

四、创建和删除DOM元素

创建

<!--在内部追加-->
document.getElementById("box").appendChild(img1);
<!--在某一标签前面插入-->
document.getElementById("box").insertBefore(img1, span1);

<html>
	<head>
		<meta charset="utf-8">
		<title>创建和删除元素</title>
	</head>
	<body>
		<div id="box">
			<span id="span1">hello</span>
			创建和删除DOM元素
		</div>
		<input type="button" value="创建元素" onclick="click1()"/>
		<script type="text/javascript">
			function click1() {
				//1.创建图片元素
				var img1 = document.createElement("img");
				//2.给元素属性赋值
				img1.src="img/05.jpg";
				img1.alt="图片";//替换内容
				img1.style.width="100px";
				//3.元素从内存加入到DOM树
				//在内部追加
				document.getElementById("box").appendChild(img1);
				//在span1前面插入
				var span1 = document.getElementById("span1");
				document.getElementById("box").insertBefore(img1, span1);
			}
		</script>
	</body>
</html>

删除

<!--一种方式是先获取父节点，然后删除子元素-->
span1.parentNode.removeChild(span1);
<!--一种方式是获取后直接删除-->
span1.remove();

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建和删除元素</title>
	</head>
	<body>
		<div id="box">
			<span id="span1">hello</span>
			创建和删除DOM元素
		</div>
		<input type="button" value="删除元素" onclick="click1()"/>
		<script type="text/javascript">
			function click1() {
				var span1 = document.getElementById("span1");
				//1.获取父元素,再将子元素删除
				span1.parentNode.removeChild(span1);
				//2.直接删除
				span1.remove();
			}
		</script>
	</body>
</html>

五、DOM操作事件

HTML DOM 允许我们通过触发事件来执行代码。比如：元素被点击、页面加载完成、输入框被修改。

<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作事件</title>
	</head>
	<body>
		<div id="div1" style="width: 100px; height: 100px; background-color: red;"></div>	
		<input type="button" value="添加事件" onclick="click1()" />
		<script type="text/javascript">
			function click1(){
				var div1=document.getElementById("div1")
				//调用事件属性赋值
				div1.onmouseover=function(){
					this.style.backgroundColor="skyblue";
				}
				div1.onmouseout=function(){
					this.style.backgroundColor="red";
				}
			}
		</script>
	</body>
</html>

案例：表格行经过变色。

<html>
	<head>
		<meta charset="UTF-8">
		<title>表格行经过变色</title>
	</head>
	<body>
		<table border="1" width="500" height="300">
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
			<tr>
				<td>xxx</td>
				<td>xxx</td>
				<td>xxx</td>
			</tr>
		</table>		
	</body>	
	<script type="text/javascript">		
		var trs=document.getElementsByTagName("tr");
		for(var i=0;i<trs.length;i++){
			trs[i].onmouseover=function(){
				this.style.backgroundColor="skyblue";
			}
			trs[i].onmouseout=function(){
				this.style.backgroundColor="white";
			}
		}		
	</script>	
</html>

在这里插入图片描述

六、EventListener

addEventListener() 方法，在用户点击按钮时触发监听事件。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="btn1" type="button" value="普通按钮" />
	</body>
	<script type="text/javascript">
		document.getElementById("btn1").onclick = function() {
			alert("点我干嘛?");
		}
		document.getElementById("btn1").onclick = function() {
			alert("还敢点我？");
		}
		document.getElementById("btn1").onclick = function() {
			alert("干死你！");
		}
	</script>
</html>

上面这个结果，会发生函数覆盖，扫描后，只执行最后的函数，即“干死你！”

如果我们想让这三个函数都执行，这时候就要使用监听。

<!--第一个参数是事件，第二个是函数-->
element.addEventListener(event, function);

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input id="btn1" type="button" value="普通按钮" />
	</body>
	<script type="text/javascript">
		function f1(){
			alert("你点我干嘛");
		}
		//使用事件监听的方式添加
		document.getElementById("btn1").addEventListener("click",f1);
		document.getElementById("btn1").addEventListener("click",function(){
			alert("还敢点我？");
		});
		document.getElementById("btn1").addEventListener("click",function(){
			alert("干死你！");
		});
		//删除事件监听
		document.getElementById("btn1").removeEventListener("click",f1);
	</script>
</html>

冒泡和捕获

<!--第三个参数是个boolean值
外部标签内套一个标签，如果boolean为false，则为冒泡传递（默认是冒泡），内部元素的事件会先被触发，然后再触发外部元素
如果是true，则使用捕获传递，外部元素的事件会先被触发，然后才会触发内部元素的事件
-->
addEventListener(event, function, useCapture);

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div1" style="width: 200px; height: 200px; background-color: skyblue;">
			<p id="p1" style="width: 100px; height: 100px; background-color: bisque;">
			</p>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("p1").addEventListener("click", function() {
			alert("你点击了p标签");
			//阻止冒泡，点击哪个就显示哪个，不再向外冒泡
			event.stopPropagation();
		}, false);
		document.getElementById("div1").addEventListener("click", function() {
			alert("你点击了div标签");
		}, false);
	</script>
</html>

松鼠MaSaKi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML之Javascript——DOM文档对象模型

一、DOM概述通过 HTML DOM,使用 JavaScript访问 HTML 文档的所有元素，完成相关的增删改查。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML ...
复制链接

扫一扫