很少用的前端基础知识---id直接在js中使用
作者：互联网
很少用的前端基础知识。id直接在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>
<body>
<div id="tab">
<span class="tab_child">Tab1</span>
<span class="tab_child">Tab2</span>
<span class="tab_child">Tab3</span>
<span class="tab_child">Tab4</span>
<span class="tab_child">Tab5</span>
</div>
<div id="content">
我是内容1
</div>
<script>
let tabs = document.querySelectorAll(".tab_child");//获取相同类元素，返回的是数组
tabs[0].classList.add("color_hovw");//给第一个元素添加了一个class
document.getElementById("tab").addEventListener("click", (event) => {//监听子元素
for (let index = 0; index < tabs.length; index++) {
const element = tabs[index];
element.classList.remove("color_hovw");//删除所有样式
element.index = index;//给每个元素设置编号
}
event.target.classList.add("color_hovw");//给当前元素添加样式
content.innerHTML = "我是内容" + (event.target.index + 1);//更改内容
});
/**
* 使用的知识点
* 1、document.querySelectorAll 23行
* 2、dom.classList.add 24、31行
* 3、dom.classList.remove 28行
* 4、addEventListener 25行
* 5、浅拷贝 27行 验证行 29、32行
* 6、id直接在js中使用 32
*/
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: chartreuse;
}
#tab {
height: 60px;
font-size: 30px;
background-color: white;
}
.color_hovw {
background-color: chartreuse;
}
#tab span {
height: 60px;
padding: 15px 20px;
line-height: 60px;
}
#content{
padding-left: 50px;
}
</style>
</body>
</html>
通过上面我又找了一些关于id在js中直接使用的文章。
其实不只是 id 可以这样， name 也是可以的。
答案如下：
HTML5规范文档中指出:如果一个元素符合下面两条规则中的任一条,则window对象中必须要有与之对应的一个属性,属性值就是这个对象.
如果一个元素拥有ID属性,那么ID属性的属性值就会成为window对象的属性名.
如果一个元素拥有name属性,那么name属性的属性值就会成为window对象的属性名.但这个元素的标签名必须是: a, applet, area, embed, form, frame, frameset, iframe, img, object,其中的一个.
HTML5规范文档
当然即使id能直接在上面使用，也不建议使用，容易把你的定义搞乱。
标签：index,color,classList,元素,js,---,id,属性 来源： https://blog.csdn.net/zhangpu_/article/details/120392449