一、DOM 工作原理
DOM工作流程分为三个环节
第一步：浏览器将硬盘中的代码读取到内存
第二步：编译器解析代码，生成一颗 DOM 树
（1） DOM 树在内存中以对象的方式存储，称之为 DOM 对象(document)
（2） DOM 的工作原理就是在这个环节，通过 js 语法修改 DOM 对象，DOM 树变了，渲染的页面也变化
第三步：渲染引擎开始渲染 DOM 树，并最终呈现页面
二、查询页面元素
获取满足条件的第一个元素
- querySelector
- getElementById
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box1">我是 box1</div>
<div id="box2">我是 box2</div>
<p id="p1">我是 P1</p>
<script>
// 获取满足条件的第一个元素
let box1 = document.querySelector('.box1')
let box2 = document.querySelector('#box2')
let p1 = document.getElementById('p1')
// 设置样式
box1.style.color = 'purple'
box2.style.color = 'skyBlue'
p1.style.backgroundColor = 'yellowGreen'
console.log(box1, box2, p1)
</script>
</body>
</html>
获取满足条件的所有元素(伪数组)
- querySelectorAll
- getElementsByName
- getElementsByClassName
- getElementsByTagName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul class="liList">
<li>未来可期1</li>
<li>未来可期2</li>
<li>未来可期3</li>
<li>未来可期4</li>
<li>未来可期5</li>
</ul>
<hr>
<span name="span">我是 span1</span>
<span name="span">我是 span2</span>
<hr>
<a class="small" href="">我是 a1</a>
<a class="small" href="">我是 a2</a>
<a class="small" href="">我是 a3</a>
<hr>
<input type="text">
<input type="text">
<input type="text">
<script>
// 获取满足条件的所有元素(伪数组)
let liList = document.querySelectorAll('li')
let spanList = document.getElementsByName('span')
let aList = document.getElementsByClassName('small')
let inputList = document.getElementsByTagName('input')
// 设置样式
liList[0].style.color = 'red'
spanList[0].style.color = 'yellow'
aList[0].style.color = 'green'
inputList[0].style.backgroundColor = 'pink'
console.log(liList, aList, spanList, inputList)
</script>
</body>
</html>
三、元素内容操作
- 元素.innerText : 获取文本（包含子元素文本）
- 元素.innerHTML : 获取文本+标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box">
我是div文本
<a href="#">我是 a 链接</a>
<p>我是p 标签</p>
</div>
<script>
//获取元素
let box = document.querySelector('.box')
//1.元素.innerText : 获取文本（包含子元素文本）
console.log(box.innerText)
//2.元素.innerHTML : 获取文本+标签
console.log(box.innerHTML)
</script>
</body>
</html>
通过分别设置 innerText 与 innerHTML 了解两者区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<script>
//获取元素
let box1 = document.querySelector('.box1')
let box2 = document.querySelector('.box2')
//(1) innerText : 不可以解析字符串中的标签
box1.innerText = '<a href="#">我是a标签<a><b>我是span</b>'
//(2) innerHTML : 可以解析字符串中的标签
box2.innerHTML = '<a href="#">我是a标签<a><b>我是span</b>'
</script>
</body>
</html>
四、元素属性操作
- href : a标签的链接
- src : img标签的路径
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<a href="******">点我呀</a>
<br />
<img src="./images/01.png" title="美少女战士" />
<script>
//获取元素
let a = document.querySelector('a')
let img = document.querySelector('img')
//1.修改 a 标签的 href
a.href = 'https://www.baidu.com'
//2.修改 img 标签的 src
img.src = './images/02.jpg'
img.title = '全民女神'
</script>
</body>
</html>
五、元素样式操作
1.元素 style 操作样式
通过style操作样式: 元素.style.样式名
- 应用场景:用于修改单个样式
- 注意点:如果样式名有- 需要转驼峰(去掉- -后面首字母大写)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>你好呀</p>
</body>
<script>
let p=document.querySelectorAll('p')
p[0].style.color='red'
p[0].style.display='flex'
p[0].style.width='200px'
p[0].style.height='200px'
p[0].style.width='200px'
p[0].style.backgroundColor='#ccc'
p[0].style.textAlign='center'
p[0].style.justifyContent='center'
p[0].style.alignItems='center'
p[0].style.margin='20px auto'
p[0].style.opacity='.5'
p[0].style.borderRadius='50%'
p[0].style.boxShadow='1px -1px 2px 1px #999'
p[0].style.fontSize='30px'
</script>
</body>
</html>
2.元素 className 操作样式
通过 className 操作类名: 元素.className='类名'
- 注意点:
- DOM 操作类名需要使用 className,因为 class 是 js 关键字
- 使用 className 会覆盖原先的类名
- 场景(使用不多) :只操作一个类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.one{
margin: 20px auto;
}
.two{
/* 注意这里宽高背景改不掉，因为行内样式权重大 */
width: 200px;
height: 200px;
background-color: blue;
border: 10px solid yellow;
}
</style>
</head>
<body>
<div class="box one" style="width: 100px;height: 100px;background-color: pink"></div>
<script>
//先获取元素
let box = document.querySelector('.box')
/* 使用className会覆盖原先的类名 */
box.className = 'two'
</script>
</body>
</html>
3.元素 classList 操作样式
通过 clasList 操作类名:不会覆盖原先的类名
- 追加类名: 元素.classList.add('类名')
- 移除类名: 元素.classList.remove('类名')
- 切换类名: 元素.classList.toggle('类名')
- 有责移除,无责追加!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.one {
font-size: 30px;
border: 5px solid green;
}
.two {
border: 5px solid yellow;
margin: 50px auto;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box one" style="width:200px;height:200px;background-color:#ccc;">未来可期</div>
<script>
// 先获取元素
let box =document.querySelector('.box')
// 1.追加类名: 元素.classList.add('类名')
box.classList.add('two')
// 2.移除类名: 元素.classList.remove('类名')
box.classList.remove('one')
// 3.切换类名: 元素.classList.toggle('类名')
// 切换:有则移除,无则追加
box.classList.toggle('two')
</script>
</body>
</html>
