getelementbytagname("div")方法可以获取所有的DIV元素,但是获取到集合后,如何进一步获取class属性为特

getelementbytagname("div")方法可以获取所有的DIV元素,但是获取到集合后,如何进一步获取class属性为特,第1张

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

getElementById('id') getElementsByName('name') getElementsByTagName('tag') getElementById是获取元素最快的方式,但我们不能给每个HTML元素都加以ID吧,所以我们需要一个很方便的通过className来获取元素 function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]className==className){ ele[elelength]=all[i]; } } return ele; } consolelog(getElementsByClassName("entry")); consolelog(getElementsByClassName("entry","div"));

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

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

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

明显通过className==是不行了

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

function getElementsByClassName(className,tagName){ var ele=[],all=documentgetElementsByTagName(tagName||""); for(var i=0;i<alllength;i++){ if(all[i]classNameclassNamematch(new RegExp('(\\s|^)'+cls+'(\\s|$)'))){ ele[elelength]=all[i]; } } return ele; }

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

id选择器:一个用来查找的ID,即元素的id属性

id选择器也是基本的选择器,jQuery内部使用JavaScript函数documentgetElementById()来处理ID的获取。原生语法的支持总是非常高效的,所以在 *** 作DOM的获取上,如果能采用id的话尽然考虑用这个选择器

值得注意:

id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

类选择器,顾名思义,通过class样式类名来获取节点

描述:

类选择器,相对id选择器来说,效率相对会低一点,但是优势就是可以多选

元素选择器

元素选择器:根据给定(html)标记名称选择所有的元素

描述:

全选择器

抛开jQuery,如果要获取文档中所有的元素,通过documentgetElementsByTagName()中传递""同样可以获取到

不难发现,id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,我这里顺便提及一下,比如:

IE会将注释节点实现为元素,所以在IE中调用getElementsByTagName里面会包含注释节点,这个通常是不应该的

getElementById的参数在IE8及较低的版本不区分大小写

IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A

IE8及较低的版本,浏览器不支持getElementsByClassName

通常 我们是不用ID来设置样式的,一般都是用class来控制样式的!ID只针对一个,CLASS是针对一个数组,因为html的样式很多事可以重复利用的,所以CLASS主要是用来控制样式的,id主要是用来JS获取节点的!

当然,你也可以用ID控制样式,用CLASS来获取节点。

通常来说ID是用来获取节点,class用来控制样式!较为合理一点!

希望可以给你带来帮助!

下面例子通过documentgetElementsByClassName("class1")获取所有同一class的元素,使用for循环把取得的div元素的值存入数组arr中,完成的代码如下:

运行结果,打印数组如下:

扩展资料:

js或jQuery获取html元素的值的常用方法:

例如:<div id="aa">值</div>

js写法:

alert(documentgetElementById('aa')innerHTML);

jQuery写法:

alert($('#aa')html());

说明如下:

innerHTML是取元素的内部html代码,此例中即div内部的所有html代码。

html()方法作用也是取dom节点的内部html内容,是jQuery中的函数方法。

以上就是关于getelementbytagname("div")方法可以获取所有的DIV元素,但是获取到集合后,如何进一步获取class属性为特全部的内容,包括:getelementbytagname("div")方法可以获取所有的DIV元素,但是获取到集合后,如何进一步获取class属性为特、id选择器/类选择器/元素选择器/全选择器、网页设计时,对网页的标签进行s样式设置时,为什么明明已经有了id属性,但是还要设置class属性等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://www.54852.com/web/9542378.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-29
下一篇2023-04-29

发表评论

登录后才能评论

评论列表(0条)

    保存