js通过classname来获取元素的方法

2024-12-16 15:36:48

原生JS有3种方式来获取元素:

getElementById('id')
getElementsByName('name')
getElementsByTagName('tag')
getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素

function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className==className){
ele[ele.length]=all[i];
 }
}
return ele;
}
console.log(getElementsByClassName("entry"));
console.log(getElementsByClassName("entry","div"));

实现原理很简单,通过getElementsByTagName获取到一个元素集合,如果传入了tagname这个参数就根据传入的

tagname来获取,否则获取所有的元素,然后再一个一个元素来匹配classname是否相等..

上面这个方法很粗糙,能实现我们的基本需求,如果我们要获取的元素有多个 classname怎么办?

明显通过className==是不行了

所以我们只要把上面两篇文章的hasclass函数搬过来就OK了，我们再次来改造下我们的getElementsByClassName函数

function getElementsByClassName(className,tagName){
var ele=[],all=document.getElementsByTagName(tagName||"*");
for(var i=0;i<all.length;i++){
if(all[i].className.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){
ele[ele.length]=all[i];
}
 }
return ele;
}

这样就能处理一个元素含有多个classname的情况了

以上就是小编为大家带来的js通过classname来获取元素的方法全部内容了，希望大家多多支持我们~

JS获取html元素的标记名实现方法

常见的获取元素的方法有3种,分别是通过元素ID.通过标签名字和通过类名字来获取. getElementById DOM提供了一个名为getElementById的方法,这个方法将返回一个与之对应id属性的节点对象.使用的时候请注意区分大小写. 它是document对象特有的函数,只能通过其来调用该方法.其使用的方法如下: document.getElementById('demo') //demo是元素对应的ID 该方法兼容主流浏览器,甚至包括IE6+,可以大胆使用. getElementsBy
js 获取元素所有兄弟节点的实现方法

比如一个ul里面有10个li,而第3个li上有特殊的样式(比如颜色为红色,其他为黑色).我想把其他所有li--不包括红的li--的颜色也设为红色,此时,就需要获得红li的所有兄弟节点. 兄弟,就是和你平辈的,既不是上一级也不是下一级,而且可能有比你大的(兄),也可能比你小(弟).兄弟节点同理,下面是一个常规的获取兄弟节点的办法. 代码如下 function siblings(elm) { var a = []; var p = elm.parentNode.children; for(var i
javascript中获取元素标签中间的内容的实现方法

使用ajax,通过会把服务器端响应获取到reponseText或者reponseXML中的信息,以某种方法动态的写到div和span标记中,这样,可以在无刷新的情况下,改变页面内容的显示. 通过javascript进行动态的修改,修改的方法有两种: 1. 一种是使用html的每个标记的innerHTML属性,使用此属性,只要为它提供一个有意义的html代码片段,那么html解释器就可以将其中的内容进行解释,并显示在页面上,使用这种方式比较简单,每次修改前不需要先把原来的内容清除掉,而可以直接进行
js获取元素的标签名实现方法

有时候我们想获取到一个标签的名称,例如:<div>a</div>得到"div".请看下面的例子: 页面上有一个class="a"的标签,可能是input,也可能是普通的div或者是span标签,现在我们要往这个标签加一个值"value1".如果是input则将其value属性设置为value1,div则将其innerHTML设置为value1.如何实现呢-- 如果纯js实现如下: //找到这个标签的代码略 this 代表找
BootStrap Table 获取同行不同列元素的方法

表格同行中存在元素的相互调用,如何保证元素能够被同行不同列的其他方框使用,方法如下: 页面元素示例如下: <div id="MyTableId" class="content-main-container"> <div class="panel panel-primary gd-panel" id="mywindow"> <div class="panel-heading"&g
如何获取元素的最终background-color

一.题目用JS代码求出页面上一个元素的最终的background-color,不考虑IE浏览器,不考虑元素float情况. 二.题目解析 1.考察底层JavaScript基础前端开发,日常最常接触的就是页面样式的编写.而摆脱jQuery等工具库,用原生js获取样式,是每个前端程序猿进阶阶段必须掌握的技能. 2.考察面试者的思维缜密程度和开发经验如果认为单单求元素计算后的样式,就有点too young了.页面的样式的复杂,永远是最虐心的.就算前端有多牛逼,一听到兼容IE6,论谁都会心塞
jQuery元素属性操作实例(设置、获取及删除元素属性)

本文实例讲述了jQuery元素属性操作的方法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="js/jquery-1.10.1.min.js" type="tex
jQuery获取this当前对象子元素对象的方法

如下所示: <select id="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> $(function(){ $("
jQuery实现获取元素索引值index的方法

本文实例讲述了jQuery实现获取元素索引值index的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
原生js获取元素样式的简单方法

我们在开发过程中经常会遇到通过js获取或者改变DOM元素的样式,方法有很多,比如:通过更改DOM元素的class.现在我们讨论原生js来获取DOM元素的CSS样式,注意是获取不是设置在开始之前先说下获取最终应用在元素上的所有CSS属性对象的意思是,如果没有给元素设置任何样式,也会把浏览器默认的样式返回来. 1.ele.style 在学习DOM的时候就看到通过ele.style来获取元素样式值,但是有时候获取的并非是节点的样式值,而是空值.这是因为ele.style只能获取写在元素标签中的sty

js通过classname来获取元素的方法

相关推荐

随机推荐