博客列表 >h5新增的js选择器

h5新增的js选择器

神仙不在的博客
神仙不在的博客原创
2019年07月13日 01:05:051102浏览

document.getElementsByClassName('big');

返回是一个伪数组,根据类名来选择。

document.querySelector('.box');   css选择器

document.querySelector('#nav');   css选择器

document.querySelector('li');   css选择器

这个通杀,声明都能选,但是返回的是选中的第一个元素

document.querySelectorAll('box');   返回的是集合

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">盒子1</div>
<div class="box">盒子2</div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<script>
    var box = document.getElementsByClassName('box');
    // 返回第一个元素
    var firstbox = document.querySelector('.box');
    console.log(firstbox);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议