JavaScript跨浏览器获取页面中相同class节点的方法_javascript技巧
- WBOY原创
- 2016-05-16 16:11:271215浏览
网页开发时，在很多时候我们需要操作相同类名的元素，即class相同的元素。昨天参加笔试，有一道相关的题目没答上来：
JavaScript获取页面中class为test的节点
于是收集了一些相关的资料，在本文中列举了两种我觉得比较好的方法，不足之处，还望大家批评指正。如果大家有更好的方法，希望可以分享。
Solution1 Jeremy Keuth方案
Jeremy Keuth大叔在《JavaScript DOM 编程艺术》（第2版）（英文：DOM Scripting-Web Design with JavaScript and the Document Object Model）一书的第三章第四节中讲到了getElementsByClass这个方法，并讲到了如何在不支持该属性的浏览器（IE6，IE7和IE8，让我们鄙视他们）中应用这一方法，摘录在此，个别地方有修改。
HTML5 DOM中新增了一个方法让我们通过class属性中的类名来访问元素，这就是：getELementsByClassName，由于方法比较新，某些的DOM实现里还没有，因此在使用的时候要当心。下面我们先来看一看这个方法能帮我们做什么，然后在讨论怎么可靠的使用该方法。
与getELementsByTagName方法类似，getElementsByClassName也只接受一个参数，就是类名：
复制代码 代码如下:
getElementsByClassName(class)
这个方法的返回值也与getElementsByTagName类似，都是一个具有相同类名的元素的数组，下面这行代码返回的就是一个数组，其中包含类名为“sale”的所有元素：
复制代码 代码如下:
document.getElementsByClassName("sale")
使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名，只要在字符串参数中用空格分隔类名即可。例如，在<script>标签中添加下面这行代码：<br /> <div class="codetitle"><span><a style="CURSOR: pointer" data="71155" class="copybut" id="copybut71155" onclick="doCopy('code71155')"><U>复制代码 代码如下:<div class="codebody" id="code71155"><br /> alert(document.getElementsByClassName("sale important").length);<br /> <p><strong>完整代码 <p><div class="codetitle"><span><a style="CURSOR: pointer" data="10676" class="copybut" id="copybut10676" onclick="doCopy('code10676')"><U>复制代码 代码如下:<div class="codebody" id="code10676"><br /> <!DOCTYPE html><br /> <html> <br /> <head><br /> <meta charset="utf-8"> <br /> <title>Shopping List<br /> <br /> <body><br /> <h1>What to buy<br /> <p title="a gentle reminder">Don't forget to buy this stuff.<br /> <ul id="purchase"><br /> <li>A thin of beans<br /> <li class="sale">Cheese<br /> <li class="sale important">Milk<br /> <br /> <script><br /> alert(document.getElementsByClassName("sale important").length);<br /> </script>
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn