JS--DOM

最新推荐文章于 2023-04-08 11:48:31 发布

小伟呀

最新推荐文章于 2023-04-08 11:48:31 发布

阅读量89

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.csdn.net/weixin_43879167/article/details/113500407

版权

JS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

文章目录

一、什么叫DOM操作？
二、document对象
三、document获取标签对象
四、通过标签的DOM对象修改内容、属性
五、通过标签的DOM对象修改样式
五、通过标签的DOM对象修改事件

一、什么叫DOM操作？

通过某一种方式，找到网页中的某个标签，得到该标签封装成的DOM对象，再对这个DOM对象进行一系列的操作。

二、document对象

document对象是html标签的DOM对象，通过它可以调用方法对html内的标签元素进行操作。

三、document获取标签对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作</title>
		<script type="text/javascript">
			function f1() {
				//通过id获取到标签对象
				var a1 = document.getElementById("2");
				//通过name获取到标签对象，name可能有多个，所以返回数组
				var a2 = document.getElementsByName("n1");
				//通过标签名获取到标签对象
				var a3 = document.getElementsByTagName("input");
				//通过class获取到标签对象
				var a4 = document.getElementsByClassName();
				//获取到的a1-a4都为对象元素，可以调用方法。
				alert(a2.length);
				alert(a3.length);

			}
		</script>
	</head>
	<body>
		<button onclick="f1()">按钮</button>
		<div id="1" name="n1"></div>
		<input id="2" type="text" name="n1" value="" class="" />
	</body>
</html>

四、通过标签的DOM对象修改内容、属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作</title>
		<script type="text/javascript">
			function f2(){
				var a1 = document.getElementById("1");
				a1.innerText = "<p>aaaaa</p>";
				alert(a1.innerText);
			}
			function f3(){
				var a1 = document.getElementById("1");
				a1.innerHTML = "<p>aaaaa</p>";	
				alert(a1.innerHTML);
			}
			function f4(){
				var a1 = document.getElementById("2");
				a1.type ="password";
			}
		</script>
	</head>
	<body>
		<button onclick="f2()">按钮1</button>
		<button onclick="f3()">按钮2</button>
		<button onclick="f4()">按钮3</button>
		<div id="1" name="n1">bb</div>
		<input type="text" id="2" name="n2" value="" />
	</body>
</html>

结果：
初始：
在这里插入图片描述
按钮1：

通过 innerText修改div标签的值。

按钮2：
在这里插入图片描述

innerHTML也是修改div标签的内容，但是会自动识别修改内容的html语句并将其转化为相应的html样式。

按钮3：
在这里插入图片描述

可以通过DOM对象修改标签的属性（由text变为了password）。

五、通过标签的DOM对象修改样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作</title>
		<script type="text/javascript">
			function f5(){
				var a1 = document.getElementById("1");
				a1.style.backgroundColor = "red";
			}
		</script>
	</head>
	<body>
		<button onclick="f5()">按钮4</button>
		<div id="1" name="n1">bb</div>
	</body>
</html>

在这里插入图片描述

调用方式：DOM对象.style.属性 = “要修改的值”。

五、通过标签的DOM对象修改事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>DOM操作</title>
		<script type="text/javascript">
			function f1(){
				var a1 = document.getElementById("1");
				a1.onclick = function(){
					alert("T_T");
				};
				alert("绑定成功！");
			}
		</script>
	</head>
	<body>
		<button onclick="f1()">按钮1</button>
		<button id="1">按钮2</button>
	</body>
</html>

在这里插入图片描述

（1）起初点击按钮2是没有反应的，只有点击了按钮1为按钮2赋值事件后，点击按钮2才会有反应，这叫做事件绑定。
（2）当将DOM对象.οnclick=null时，点击无反应。

小伟呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS--DOM

文章目录一、什么叫DOM操作？二、document对象三、document获取标签对象四、通过标签的DOM对象修改内容、属性五、通过标签的DOM对象修改样式五、通过标签的DOM对象修改事件一、什么叫DOM操作？通过某一种方式，找到网页中的某个标签，得到该标签封装成的DOM对象，再对这个DOM对象进行一系列的操作。二、document对象document对象是html标签的DOM对象，通过它可以调用方法对html内的标签元素进行操作。三、document获取标签对象<!DOCTYPE ht
复制链接

扫一扫