<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点语法操作dom</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>hhhh</div>
<div>yyyy</div>
<script>
const divs=document.querySelectorAll("div");
console.log(divs);//输出dom节点列表 NodeList(2) [div, div]
//数组的map方法
[1,2,3].map(item => console.log(item));
//注意dom节点列表没有map方法，需要将节点列表转换成数组
//divs.map(item => console.log(item)); //报错，divs.map is not a function
//dom节点列表转成数组 方法1:使用Array.from(divs,function());
//Array.from(divs,item => console.log(item));// 输出<div>hhhh</div> <div>yyyy</div>
//Array.from(divs).map(item => console.log(item));//同上
//方法2：使用原型链方法
//Array.prototype.map.call(divs,item => console.log(item));//同上
//方法3：使用点语法
[...divs].map(item=>console.log(item));//同上
[...divs].map(item => {
item.addEventListener("click",()=>{
item.classList.toggle("hide");
});
})
</script>
</body>
</html>
网友评论