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