本文介绍了JavaScript中获取元素的多种方式，包括通过tagname、class和name，以及使用querySelector和querySelectorAll。同时，文章讲解了字符串拼接的方法，并探讨了JavaScript的数据类型，包括ES5和ES6中的不同数据类型，强调了typeof运算符的局限性和null与undefined的区别。最后，作者提醒在编程中注意id的唯一性和变量声明的重要性。
- 一个对象添加多个样式
- 获取元素的其他方式
- 得出获取元素的相关结论
- 字符串拼接
- 数据类型
###一个对象同时添加多个样式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0; padding: 0;}
#box{
width: 100px;
height: 100px;
background-color: green;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
let oBox = document.getElementById("box");
oBox.onmouseenter = function(){
//当鼠标移入时,这个对象的背景颜色发生改变
oBox.style.backgroundColor = "red";
//当要添加多个样式时,可以采取下面的方法
//需要注意单样式需要按照css的写法书写,不需驼峰命名
oBox.style.cssText = "width: 200px; height: 200px; background-color: yellow;"
}
</script>
</body>
</html>
获取元素的其他方式
- 特殊标签(直接document.tagName, 不会给它起给名字 )
- document.body
- document.head
- document.title
- 一般标签
- ele.getElementsByClassName() 通过class来获取(集合)
- ele.getElementsByTagName() 通过tagname(标签名)来获取(集合)
- ele.getElementsByName() 通过name来获取(集合)
- ele.querySelect() 匹配css选择器的第一个
- ele.querySelectAll() 匹配css选择器匹配的所有的集合
- ClassName类似于数组,而是类数组/伪数组
下面是展示的是通过class来获取
重点:获取的节点是不是集合,不取决于对象的个数,而是取决于方法
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<style>
*{
margin: 0; padding: 0;}
</style>
</head>
<body>
<div class="box">01</div>
<div class="box">02</div>
<div class="box">03</div>
<script>
let divS =
最低0.47元/天 解锁文章
1007
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
