js document.getElementsByClassName的使用介绍与自定义函数

前端之家收集整理的这篇文章主要介绍了js document.getElementsByClassName的使用介绍与自定义函数前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持搜索

getElementByClassName()函数的使用方法

使用JavaScript访问DOM的一个重大问题是,此过程需要一种通过元素类名称来选择类的类函数,对DOMContentReady,这种类函数的缺失导致开发人员需要自己编写自定义脚本业执行上述任务,许多这个类脚本都是围绕着getElementByClassName()建立的,这种解决方法在HTML5中被标准化,另外,这种方法还本地存在于现代浏览器中,GetElementByClassName()只使用一个字符串值作为输入.并返回一个Nodelist,这个NodeList包含所有类名称匹配这个字符串值的元素:

var el = document.getElementsByClassName('foo');

通过在字符串中使用空格分隔类,也可以匹配多个类,下面的代码挑选出了所有既拥有foo类名称又拥有bar类名称的元素:

var el = document.getElementsByClassName('foo bar');

W3C没有getElementByClassName这个函数,我们可以自己定义一个函数来模拟它。

一般如下几种方法

1、要不就是使用jquery来实现

2、通过自定义函数解决

class单个时 如class="test"

代码二、

class有多个的时候同样匹配,如class="test1 test2 test3"

下面再附一个完整的测试代码

猜你在找的JavaScript相关文章