【html5】04-操作DOM元素

最新推荐文章于 2024-06-01 19:56:47 发布

Mikuc

最新推荐文章于 2024-06-01 19:56:47 发布

阅读量962

点赞数 17

分类专栏： HTML5 文章标签： html5 前端

本文链接：https://blog.csdn.net/m0_68467925/article/details/139039359

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

引言

通过DOM API，开发者可以直接访问、修改和删除页面上的任何元素，包括HTML、CSS和文本内容。这使得开发者能够动态地改变页面的外观和行为。

1 获取单个元素

js

☞ document.querySelector("选择器")；

备注：

选择器：可以是css中的任意一种选择器
通过该选择器只能选中第一个元素

html
	<ul>
		<li>
			<p>
				<span>1</span>
			</p>
		</li>
		<li>
			<span>2</span>
		</li>
	</ul>
css
<style type="text/css">
		li span {
			color: red;
		}
	</style>
js 选择器：内容为1 2 的标签都符合，但只能选中第一个元素，所以只有第一个变成了red
<script type="text/javascript">

	document.querySelector("li span").style.color = "red";
</script>

2 获取多个元素

☞ document.querySelectorAll("选择器");

备注：

与document.querySelector区别： querySelectorAll 可以选中所有符合选择器规则的元素，返回的是一个列表。querySelector返回的只是单独的一个元素

例：获取页面多个元素，并在控制台中打印出来
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	  <ul>
	  	  <li>测试1</li>
	  	  <li>测试2</li>
	  	  <li>测试3</li>
	  	  <li>测试4</li>
	  	  <li>测试5</li>
	  	  <li>测试6</li>
	  	  <li>测试7</li>
	  	  <li>测试8</li>
	  	  <li>测试9</li>
	  	  <li>测试10</li>
	  </ul>

	  <script type="text/javascript">
	  	   var obj=document.querySelectorAll("li");

	  	   for(var i=0; i<obj.length; i++) {
	  	   	   console.log(obj[i].innerText);
	  	   }
	  </script>
</body>
</html>

3 类名操作

html5 提供了下面四个方法：

☞ Dom.classList.add("类名"): 给当前dom元素添加类样式

☞ Dom.classList.remove("类名"); 给当前dom元素移除类样式

☞ classList.contains("类名"); 检测是否包含类样式

☞ classList.toggle("active"); 切换类样式（有就删除，没有就添加）

例：为一个空div设置背景，测试添加删除切换包含，

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">

		 .bg {
		 	 height: 50px;
		 	 background-color: orange;
		 }
	</style>
</head>
<body>
	   <div></div>
	   <input type="button" name="" value="添加类名" class="add">
	   <input type="button" name="" value="移除类名" class="remove">
	   <input type="button" name="" value="切换类名" class="toggle">
	   <input type="button" name="" value="是否包含类名" class="contains">


	   <script type="text/javascript">

	   	   //获取页面中元素
	   	   var  div_obj=document.querySelector("div");

	   	   var  add_btn=document.querySelector(".add");

	   	   var  remove_btn=document.querySelector(".remove");

	   	   var  toolge_btn=document.querySelector(".toggle");

	   	   var  contains_btn=document.querySelector(".contains");


	   	   //添加类名
	   	   add_btn.onclick=function() {
	   	   		div_obj.classList.add("bg");
	   	   }

	   	   //移除类名
	   	   remove_btn.onclick=function () {
	   	   	    div_obj.classList.remove("bg");
	   	   }

	   	   //切换类名
	   	   toolge_btn.onclick=function() {
	   	   		div_obj.classList.toggle("bg");
	   	   }

	   	   //是否包含类名
	   	   contains_btn.onclick=function() {
	   	   	  console.log(div_obj.classList.contains('bg'));
	   	   }


	   </script>

</body>
</html>

添加类名

删除类名

切换：类名（样式）有就删除，没有就添加

包含类名，就会在控制台输出true，反之false

4 自定义属性

☞ 自定义属性                     （小案例分析体验自定义属性）

data-自定义属性名

       备注：在标签中，以data-自定义名称

   1. 获取自定义属性

   Dom.dataset   返回的是一个对象

           Dom.dataset.属性名或者 Dom.dataset[属性名]

          注意：属性名是不包含data-

例：
<body>

	<div class="one" data-test-name="123"></div>
	<div class="two" data-test="567"></div>
	<script type="text/javascript">

		//获取标签的自定义属性值
		var list = document.querySelector(".one").dataset;
		console.log(list);
		console.log("list获取属性值" + list.testName);
		var list1 = document.querySelector(".two").dataset;
		console.log(list1);
		console.log("list1获取属性值" + list1.test);
	</script>
</body>
当有多个属性名包含 - 时，会转换成驼峰命名

2. 设置自定义属性

Dom.dataset.自定义属性名=值或者 Dom.dataset[自定义属性名]=值

例：在上面的例子加上下面代码

//设置自定义属性

list.age = 20;

list.testHeight = 180;

Mikuc

关注

17
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【html5】04-操作DOM元素

dom获取单个、多个元素；类名操作： Dom.classList.add("类名"): 给当前dom元素添加类样式 Dom.classList.remove("类名");classList.contains("类名"); classList.toggle("active");自定义属性的获取与设置
复制链接

扫一扫