DOM-文档对象模型

一.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>

  • 10
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值