HTML5新增的获取方式 - 前端学习教程_ 前端_前端开发

HTML5中为document对象新增了getElementsByClassName()、querySelector()和querySelectorAll()方法，在使用时需要考虑到浏览器的兼容性问题。接下来我们就来讲解这3种方法的具体使用。

1. 根据类名获取

document.getElementsByClassName()方法，用于通过类名来获得某些元素集合。下面通过案例代码进行演示。

 1  <body>

 2   <span class="one">英语</span> <span class="two">数学</span>

 3   <span class="one">语文</span> <span class="two">物理</span>

 4   <script>

 5    var Ospan1 = document.getElementsByClassName('one');

 6    var Ospan2 = document.getElementsByClassName('two');

 7    Ospan1[0].style.fontWeight = 'bold';

 8    Ospan2[1].style.background = 'red';

 9   </script>

 10 </body>

上述代码中，分别使用getElementsByClassName()方法获取类名为one和two的集合，并分别存储在Ospan1和Ospan2中。使用下标的形式，查找并设置Ospan1数组中下标为0所对应的第1个元素的fontWeight属性为bold，Ospan2数组中下标为1所对应的第2个元素的background属性为red。浏览器预览效果如图1所示。

图1 通过类名获取元素

2. querySelector()和querySelectorAll()

querySelector()方法用于返回指定选择器的第一个元素对象。querySelectorAll()方法返回指定选择器的所有元素对象集合。下面通过案例代码进行演示。

 1  <body>

 2   <div class="box">盒子1</div>

 3   <div class="box">盒子2</div>

 4   <div id="nav">

 5    <ul>

 6     <li>首页</li>

 7     <li>产品</li>

 8    </ul>

 9   </div>

 10  <script>

 11   var firstBox = document.querySelector('.box'); 

 12   console.log(firstBox); // 获取class为box的第1个div

 13   var nav = document.querySelector('#nav');

 14   console.log(nav);    // 获取id为nav的第1个div 

 15   var li = document.querySelector('li');

 16   console.log(li);    // 获取匹配到的第一个li

 17   var allBox = document.querySelectorAll('.box');

 18   console.log(allBox);  // 获取class为box的所有div

 19   var lis = document.querySelectorAll('li');

 20   console.log(lis);    // 获取匹配到的所有li

 21 </script>

从上述代码可以看出，在利用querySelector()和querySelectorAll()方法获取操作的元素时，直接书写标签名或CSS选择器名称即可，根据类名获取元素时在类名前面加上“.”，根据id获取元素时在id前面加上“#”。最后的输出结果如图2所示。

图2 通过CSS选择器获取元素