JavaScript跨浏览器获取页面中相同class节点的方法_javascript技巧
程序员文章站
2022-05-27 15:39:13
...
网页开发时,在很多时候我们需要操作相同类名的元素,即class相同的元素。昨天参加笔试,有一道相关的题目没答上来:
getElementsByClassName(class)
这个方法的返回值也与getElementsByTagName类似,都是一个具有相同类名的元素的数组,下面这行代码返回的就是一个数组,其中包含类名为“sale”的所有元素:
document.getElementsByClassName("sale")
使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名,只要在字符串参数中用空格分隔类名即可。例如,在
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")
使用这个方法还可以查找那些带有多个类名的元素。要指定多个类名,只要在字符串参数中用空格分隔类名即可。例如,在
推荐阅读
-
JavaScript跨浏览器获取页面中相同class节点的方法_javascript技巧
-
JavaScript跨浏览器获取页面中相同class节点的方法_javascript技巧
-
浏览器页面区域大小的js获取方法_javascript技巧
-
JavaScript获取页面中超链接数量的方法_javascript技巧
-
JavaScript实现获取dom中class的方法_javascript技巧
-
浏览器页面区域大小的js获取方法_javascript技巧
-
JavaScript获取页面中第一个锚定文本的方法_javascript技巧
-
JavaScript获取页面中超链接数量的方法_javascript技巧
-
JavaScript实现获取dom中class的方法_javascript技巧
-
JavaScript获取页面中第一个锚定文本的方法_javascript技巧