关于HTML中,如何根据元素的className获取元素?

  getElementsByClassName()是HTML5 新增的DOM API。IE8以下不支持
  我们知道,原生的方法,是getElementById()和getElementsByTagName(),这两个不会有兼容问题,但是遇到class的问题还是没法解决。所以这里总结两种封装方法,可以用它们来获取指定的class元素。当然,对于现代浏览器开发,还可以使用querySelector()和querySelectorAll(),他们的功能更加强大。

1.数组遍历的方法:

 1 function getByClass(sClass,oParent){
 2
 3     var parent = oParent || document;
 4     var aEles = parent.getElementsByTagName(‘*‘);
 5     var arr = [];
 6
 7     for(var i=0; i<aEles.length; i++){
 8
 9         var aClass = aEles[i].className.split(‘ ‘);
10
11         for(var j=0; j<aClass.length; j++){
12             if(aClass[j] == sClass){
13
14                 arr.push(aEles[i]);
15
16             }
17         }
18     }
19     return arr;
20 }

2.正则匹配的方法

 1 function getElementsByClassName(oParent, sClass){
 2     var aEle = oParent.getElemnetsByTagName(‘*‘);
 3     var result = [];
 4     var re = new RegExp(‘\\b‘ + sClass + ‘\\b‘, ‘i‘);
 5
 6     for(var i=0; i<aEle.length; i++){
 7         if(re.test(aEle[i].className)){
 8             result.push(aEle);
 9         }
10     }
11     return result;
12 }

  最后,值得一提是,前端页面实现中,性能的影响往往出现在DOM的操作中。此外,还要注意元素的回流和重绘问题。

时间: 2024-10-11 11:23:10

关于HTML中,如何根据元素的className获取元素?的相关文章

如何根据元素的className获取元素?

getElementsByClassName()是HTML5 新增的DOM API.IE8以下不支持 我们知道,原生的方法,是getElementById()和getElementsByTagName(),这两个不会有兼容问题,但是遇到class的问题还是没法解决.所以这里总结两种封装方法,可以用它们来获取指定的class元素.当然,对于现代浏览器开发,还可以使用querySelector()和querySelectorAll(),他们的功能更加强大. 1.数组遍历的方法: function g

根据ClassName获取元素节点

功能描述: 通过ClassName获取元素节点,并解决兼容性问题 实现效果: 编码思路: 利用getElementsByTagName选出所有元素,再根据ClassName条件进行筛选 代码示例:

Selenium2学习-031-WebUI自动化实战实例-029-JavaScript 在 Selenium 自动化中的应用实例之四(获取元素位置和大小)

通过 JS 或 JQuery 获取到元素后,通过 offsetLeft.offsetTop.offsetWidth.offsetHeight 即可获得元素的位置和大小,非常的简单,直接上源码了,敬请参阅! 1 /** 2 * Get element position by jquery, and return integer Array [left distance, top distance, width distance, height distance] 3 * 4 * @author A

关于JS(原生js+jq)中获取、设置或者删除元素属性和获取元素值

一.JS获取.设置或者删除元素属性 原生js: $("要获取属性class/id名").getAttribute("属性"); $("要设置属性class/id名").setAttribute("属性","属性值"); $("要删除属性class/id名").removeAttribute("属性"); jq: $("要获取属性class/id名"

js根据className获取元素封装

虽然有了getElementsByClassName,但是ie低版本不支持,所以我们需要单独定义一个getByClass function getByClass(className,parent){ var oParent=parent?document.getElementById(parent):document; // 判断parent参数是否存在,不存在,使用document选区文档所有class eles=[]; elements=oParent.getElementsByTagNam

解析JQuery中css()方法,获取元素CSS值之getComputedStyle方法(转载,写的很好)

一.碎碎念~前言 我们都用过jQuery的CSS()方法,其底层运作就应用了getComputedStyle以及getPropertyValue方法. 对于那些只想混口饭吃的人来讲,晓得CSS()如何使用就足够了.对于希望在JS道路上越走越远的来人说,简单了解一些JS库底层实现对自己的学习很有帮助.可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路. jQuery为何受欢迎,其中原因之一就是方法名称比较短.好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍:小个子(

Web-Lesson05-初识JavaScript:获取元素 事件

JavaScript:是一种脚本语言,动态类型.弱类型.通常用来操作HTML页面(HTML是骨架结构,CSS是样式装饰,JS是行为交互) 弱类型的体现: 一.JavaScript书写格式     1.Js代码写在哪里 1.JavaScript标签里. 2.写在外部.js后缀文件里,通过script标签引入(引入.js文件的script标签里,一定不能再写js代码,标签里写js代码一般情况不推荐) 2.script标签写在哪里 1.head里 2.body里(如果没有特殊要求,一般script标签

jquery获取元素索引值index()

jquery获取元素索引值index()方法实例. jquery获取元素索引值index()方法: jquery的index()方法 搜索匹配的元素,并返回相应元素的索引值,从0开始计数. 如果不给 .index() 方法传递参数,那么返回值就是这个jQuery对象集合中第一个元素相对于其同辈元素的位置. 如果参数是一组DOM元素或者jQuery对象,那么返回值就是传递的元素相对于原先集合的位置. 如果参数是一个选择器,那么返回值就是原先元素相对于选择器匹配元素中的位置.如果找不到匹配的元素,则

JS获取元素、修改元素/css样式/标签属性、简单事件、数据类型

基本使用 写在Script 标签里 引入外部js文件:<script src=" "></script> console.log(" ") 方法用于在控制台输出信息 注意事项 严格区大小写 每一行完整语句后面加分号 变量名不能使用关键字和保留字 代码要缩进,保持可读性 修改元素内容 获取元素 通过id获取元素:document.getElementById(""); 通过class名字获取元素:document.getEl