DOM-文档对象模型

最新推荐文章于 2024-07-17 20:19:26 发布

胡翔皓

最新推荐文章于 2024-07-17 20:19:26 发布

阅读量397

点赞数 10

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_45901415/article/details/135457980

版权

一.DOM的作用：

用来操作页面上的元素（标签，属性，样式，文本内容）

二.DOM标签元素对象的获取方式：

1 document.getElementById("id值")

通过id值获取标签对象，返回值是第一个元素对象

2 document.getElementsByTagName("标签名")

通过标签名获取标签对象，返回值是一个集合--伪数组：只有数组的下标和length属性，没有数组的方法

3 document.getElementsByClassName("类名")

通过类名获取标签对象，返回值是一个集合--伪数组：只有数组的下标和length属性，没有数组的方法

4 document.querySelector("选择器")

通过选择器获取标签对象，返回值是第一个元素对象

5 document.querySelectorAll("选择器")

通过选择器获取标签对象，返回值是一个集合--伪数组：只有数组的下标和length属性，没有数组的方法

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.dv {
				border: 10px solid rgb(13, 26, 213);
			}
			.box {
				width: 300px;
				height: 300px;
				background-color: red;
			}
			.p1 {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p class="p1"></p>
		<div class="dv"></div>
		<script>
			/* 
                2.操作类名： className 操作CSS
            */
			// 1.获取元素对象
			let boxEle = document.querySelector('div');
			let pEle = document.querySelector('p');
			// 2.添加属性样式
			/* 	boxEle.style.width = '100px';
			boxEle.style.height = '100px';
			boxEle.style.backgroundColor = 'red'; */
			// 3.添加class类名
			boxEle.className = 'dv box';
			// 4.获取class名称
			console.log(pEle.className);
		</script>
	</body>
</html>

三.标签元素对象的固有属性（系统内置的属性）：

1 获取标签元素对象的属性值：标签元素对象.属性名

2 设置标签元素对象的属性值：标签元素对象.属性名 = 属性值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<form action="" method="get">
			<div>
				用户名：<input
					type="text"
					class="username"
					name="username"
					value="admin" />
			</div>
			<div>
				密码：
				<input class="pwd" type="password" name="pwd" />
			</div>
			<div>
				性别：
				<input type="radio" name="sex" class="man" checked />男
				<input type="radio" name="sex" class="woman" />女
			</div>
			<div>
				爱好
				<input type="checkbox" name="hobby" value="玩游戏" />玩游戏
				<input type="checkbox" name="hobby" value="看书" />看书
			</div>
			<button disabled>按钮</button>
		</form>

		<script>
			/* 
            表单基本操作：
            1.获取value值----表单对象.value
            2.设置value值----- 表单对象.value =值
            3.获取type值---- 表单对象.type
            4.设置type值----- 表单对象.type =值
            5表单获取单选checked，多选checked，禁用disable的属性值返回的是布尔类型
            */
			// 1.获取用户名的input对象
			let usernameEle = document.querySelector('.username');
			console.log(usernameEle.value);
			//练习2：获取密码框的type类型，并修改为text
			let manEle = document.querySelector('.man');
			let womanEle = document.querySelector('.woman');
			console.log(manEle.checked);
			console.log(womanEle.checked);
			womanEle.checked = true;
		</script>
	</body>
</html>

四.元素对象的行内style样式属性：

1 获取元素对象的样式属性值：元素对象.style.样式属性名

2 设置元素对象的样式属性值：元素对象.style.样式属性名 = 样式属性值

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.dv {
				border: 10px solid rgb(13, 26, 213);
			}
			.box {
				width: 300px;
				height: 300px;
				background-color: red;
			}
			.p1 {
				width: 100px;
				height: 100px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<p class="p1"></p>
		<div class="dv"></div>
		<div id="box"></div>
		<script>
			/*
			2.操作类名： className 操作CSS
			3.通过classList操作class类名
				添加类名： 对象.classList.add("类名")
				删除类名： 对象.classList.remove("类名")
				切换类名： 对象.classList.toggle("类名")
			4.样式操作的三种方法的区别：
			4.1 操作style属性----操作标签的行内样式---获取与设置属性样式
			4.2 操作className-----class类选择器样式---获取与设置class类名
			4.3 操作classList-----class类选择器样式---获取，设置，切换类名
			*/
			// 1.获取元素对象
			let boxEle = document.querySelector('div');
			let pEle = document.querySelector('p');
			// 2.添加属性样式
			boxEle.style.width = '100px';
			boxEle.style.height = '100px';
			boxEle.style.backgroundColor = 'red';
			// 3.添加class类名
			// boxEle.className = 'dv box';
			// 4.获取class名称
			// console.log(pEle.className);

			// 5.通过classList操作class类名
			// 添加class类名
			/* boxEle.classList.add('box', 'content');
			// 删除class类名：
			pEle.classList.remove('p1');
			// 切换class类名：如果有这个class类名，则删除，如果没有，则添加
			boxEle.classList.toggle('box');
			pEle.classList.toggle('p1'); */

			document.querySelector('#box').classList.add('dv');
		</script>
	</body>
</html>

五.元素对象内容的操作：

1 获取元素对象的内容及标签：元素对象.innerHTML

2 设置元素对象的内容及标签：元素对象.innerHTML = 内容

3 获取元素对象的内容：元素对象.innerText

4 设置元素对象的内容：元素对象.innerText = 内容

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<button class="start">开始</button>
		<button class="pause">暂停</button>
		<p>计数器：<span>0</span></p>
		<script>
			/* 
            鼠标单击事件：对象.onclick = function(){}
            let 定时器的标识=setInterval(function () {
                写逻辑代码
            }, 时间间隔毫秒数);
            1s = 1000ms
            1m = 60s
            1h = 60m
            1d = 24h

            清除计时器：clearInterval(定时器的标识)
            */
			// 1.获取开始按钮对象
			let start = document.querySelector('.start');
			let pause = document.querySelector('.pause');
			let spanEle = document.querySelector('p span');
			let num = 0;
			let total = null; // 定时器的标识
			// 2.注册单击事件
			start.onclick = function () {
				// alert('开始');
				// 3.添加定时器:
				total = setInterval(function () {
					// 每隔1秒钟num自增1
					console.log('每隔1000ms执行一次');
					num++; // num = num + 1;
					spanEle.innerHTML = num;
				}, 1000);
			};
			// 暂停按钮
			pause.onclick = function () {
				// 清除定时器
				clearInterval(total);
				num = 0; // 重置计数器
				spanEle.innerHTML = num; // 重置页面计时器的数据
			};
		</script>
	</body>
</html>