原生js的DOM选择器
全文总计4300字，预计阅读时间为10分钟，操作加实践约为20分钟
固定元素的读取
HTML代码中有三个固定的元素可以直接读取
head body documentElement
<script>
// 页面头
console.log('head',document.head);
// 页面主体
console.log('body',document.body);
// 整个页面
console.log('docEL',document.documentElement);
// 页面标题
document.title
</script>
常用属性：title–标签栏
document.title ='hello DOM'
我们可以经常见到有些网页的标题变来变去就是这样实现的
DOM–动态修改css属性
class:用于给HTML元素添加样式类
给元素添加样式风味style和class
style：内联样式–优先级高，适合少量样式
class：内部杨书记：适合大量样式的添加
接下来我们来演示一下，为div添加鼠标悬浮当事件触发时为元素添加元素是active的事件
如下图
代码：
<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>
/* 内部样式 */
.box{
width: 80px;
height: 80px;
border: 1px solid rgb(146, 116, 116);
border-radius: 0%;
transition: .4s;
transition-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.335);
/* transform: calc(); */
}
.box:hover, .active{
border-radius: 40px;
background-color: rgb(107, 162, 184);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<!-- 为div添加鼠标悬浮当事件触发时为元素添加元素是active的事件 -->
</body>
我们可以选择使用querySelsctor来实现box
<script>
const qs=document.querySelectorAll.bind(document);
// 查找到所有的.box
qs('.box').forEach(box => {
// box为形参
console.dir(box);
});
</script>
在这上面可以找到鼠标悬浮的属性
所以我们可写为
<script>
const qs=document.querySelectorAll.bind(document);
// 查找到所有的.box
qs('.box').forEach(box => {
// box为形参
console.dir(box);
box.onmouseover=function(){
console.log('鼠标悬浮了',this);
}
});
</script>
打印输出：
然后我们要实现经过就改变的话就只需要改变其css样式就可以实现了
如下图
接下来我们来做一个实战
实现效果：
首先创建主体框架
书写样式
js部分：
实现：
<!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>
<style>
#box {
background-color: rgb(244, 244, 248);
padding: 20px;
}
#box > span {
padding: 10px;
background-color: rgb(255, 255, 255);
border-radius: 20px;
user-select: none;
/* border: 1px solid rgb(254, 93, 36); */
color: rgb(125, 124, 125);
transition: 0.6s;
}
#box > span:hover {
user-select: none;
/* border: 1px solid rgb(254, 93, 36); */
color: rgb(254, 93, 36);
border: 1px solid rgb(254, 93, 36);
}
#box > span.active {
background-color: rgb(254, 93, 36);
color: rgb(255, 255, 255);
}
</style>
<body>
<div id="box">
<!-- active:激活--自定义的class名 -->
<span class="active">推荐分类</span>
<span>网游竞技</span>
<span>单机热游</span>
<span>手游休闲</span>
<span>娱乐天地</span>
</div>
<script>
const qs = document.querySelectorAll.bind(document);
// 查询span标签
qs("span").forEach((span) => {
// 当点击span标签的时候
span.onclick = function(){
// 设置class属性
this.className='active'
// 打印一下标签显示
console.log(this);
}
});
</script>
</body>
</html>
但是原版网站中有唯一性，点击之后只有一个高亮,所以我们要升级一下
唯一性激活–激活新的选项，要先删除旧的选项
方案1，简单粗暴的遍历，全部清空，所有就是：
就相当于宁可杀错不可放过，但是有个弊端，就是当一组标签里面子标签的class样式如果有其他的操作，也会被清除掉
方案2：先找到高亮的选项然后再清除
代码：
<!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>
<style>
#box {
background-color: rgb(244, 244, 248);
padding: 20px;
}
#box > span {
padding: 10px;
background-color: rgb(255, 255, 255);
border-radius: 20px;
user-select: none;
/* border: 1px solid rgb(254, 93, 36); */
color: rgb(125, 124, 125);
transition: 0.6s;
}
#box > span:hover {
user-select: none;
/* border: 1px solid rgb(254, 93, 36); */
color: rgb(254, 93, 36);
border: 1px solid rgb(254, 93, 36);
}
#box > span.active {
background-color: rgb(254, 93, 36);
color: rgb(255, 255, 255);
}
</style>
<body>
<div id="box">
<!-- active:激活--自定义的class名 -->
<span class="active">推荐分类</span>
<span>网游竞技</span>
<span>单机热游</span>
<span>手游休闲</span>
<span>娱乐天地</span>
</div>
<script>
const qs = document.querySelectorAll.bind(document);
const qp=document.querySelector.bind(document);
// 查询span标签
qs("span").forEach((span) => {
// 当点击span标签的时候
span.onclick = function(){
// 先清空所有属性
// qs('#box>span').forEach(s=>s.className="");
// 单独查找的话则为
qp('#box>span.active').className=' '
// 设置class属性
this.className='active'
}
});
</script>
</body>
</html>
现在大部分都是使用vscode作为编辑器，但是由于vscode对bind语法支持不是很好所以导致bind语法之后代码提示消失，这十分不友好，所以我们可以制作一个回调函数来解决问题
<script>
// 原版
// const spans = document.querySelectorAll('#box>span')
// 通过bind方案来简化代码，但是由于vscode的支持不友好，所有导致代码提示消失
// 所以可以换成
function qs(a){
return document.querySelectorAll(a)
}
console.log(qs('#box>span'));
</script>
现在就有了
当然也可以简化为
<script>
// 简化前
// 所以可以换成
function qs(a){
return document.querySelectorAll(a)
}
// 使用ES6语法糖简化后
var qs = (a) => document.querySelectorAll(a);
console.log(qs("#box>span"));
</script>
classlist
作者为了让程序员更加快捷准确的操作class
把class的相关操偶做进行了封装— 增删改查
使用者可以直接使用这些方法来操作class而不再直接修改class的值