目录
前言
雄关漫道真如铁，而今迈步从头越
目标
能获取/查找DOM对象
提问
我们想要操作某个标签首先做什么？
肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
查找元素DOM元素就是利用 js 选择页面中标签元素
学习路径
根据CSS选择器来获取DOM元素
其他获取DOM元素的方法
根据CSS选择器来获取DOM元素
选择匹配的第一个元素
语法
document.querySelector('css选择器');示例
<!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>
<style>
.box {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box"></div>
<script>
//获取匹配的第一个元素
const box = document.querySelector('div');
console.dir(box);
console.log(box);
</script>
</body>
</html>参数
包含一个或多个有效的CSS选择器 字符串
返回值
CSS选择器匹配的第一个元素，一个HTMLElement对象
选择匹配的多个元素语法
:document.querySelectorAll('css选择器')参数
包含一个或多个有效的CSS选择器
字符串返回值
CSS选择器匹配的NodeList 对象集合document.queryselectorAll('ul li')
示例
<!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>
<style>
.box {
width: 100px;
height: 100px;
}
</style>
<body>
<div class="box"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</ul>
<script>
const box = document.querySelectorAll('ul li');
console.dir(box);
console.log(box);
</script>
</body>
</html>补充
document.querySelectorAll('css选择器')得到的是一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象，则需要遍历(for)的方式获得。
注意事项哪怕只有一个元素，通过querySelectAll()获取过来的也是一个伪数组，里面只有一个元素而已
其它获取DOM元素方法
根据id获取一个元素
document.getElementById('nav')
根据 标签获取一类元素 获取页面 所有div
document.getElementsByTagName('div')
根据 类名获取元素 获取页面 所有类名为 w的
document.getElementsByClassName('w')
总结
我很久以前很喜欢的一个人告诉我她恋爱了，我却只能恭喜恭喜