Web APIs-day01(HM)
案例:淘宝点击关闭二维码
<script>
// 3个步骤, 获取事件源,绑定事件,onclick,添加事件处理程序
// 获取事件源,这里为什么这个document.querySelector(".close-btn");不行,用sel,写"i"也行,i作为标签
/**
* 首先,对于getElementsByClassName()方法来说,
(1) 其返回值是一个伪数组(元素集合),是通过索引来访问数组中的每一个元素的。
* */
var btn = document.querySelector(".close-btn");
console.log(btn);
var box = document.querySelector(".box");
console.log(box);
// var box = document.getElementsByClassName(".box");
// console.log(box);
// 绑定事件
btn.onclick = function () {
// 把那个大盒子隐藏起来,还没获取大盒子
box.style.display = 'none';
}
</script>
由此引用对于 getElementsByClassName()和querySelector()用法上的对比与联系
- 首先,对于getElementsByClassName()方法来说,
(1) 其返回值是一个伪数组(元素集合),是通过索引来访问数组中的每一个元素的。
(2) 可以通过length属性来得到元素的个数。
一.getElementsByClassName()
首先,对于getElementsByClassName()方法来说,
<ul>
<li class="map1" id="map2"></li>
<li class="map1"></li>
<li></li>
</ul>
<script>
//获取所有class选择器为map1的元素,并将返回值赋给map
//即此时的map就是一个伪数组
var map=document.getElementsByClassName("map2");
console.log(map.length);//打印出maps数组的元素个数
for(var i=0;i<map.length;i++)//循环遍历每一个元素
{
console.log(map[i]);//通过过索引访问
}
</script>
二.querySelector()
(1) querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。可以是class选择器、id选择器、标签选择器等。
(2)需要注意的是:querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用querySelectorAll() 方法替代。而querySelectorAll() 方法的返回值是一个伪数组,具体用法和getElementsByClassName()
方法类似。
<ul>
<li class="map1" id="map2"></li>
<li class="map1"></li>
<li></li>
</ul>
<script>
//获取标签选择器为ul的元素
var ul1=document.querySelector("ul");
//获取id选择器为map2的元素
var a1=document.querySelector("#map2");
//获取class选择器为map1的元素
//且为第一个li元素
var a2=document.querySelector(".map1");
//获取class选择器为map1的所有元素
var a3=document.querySelectorAll(".map1");
for(var i=0;i<a3.length;i++)//循环遍历每一个元素
{
console.log(a3[i]);//通过过索引访问
}
console.log(a1);
console.log(a2);
</script>