js通过元素class名字获取元素集合的具体实现

获取元素集合的方法有很多，接下来为大家介绍喜爱使用js通过元素class名字获取元素集合的方法

代码如下:

function

getElementsByClassName(n)

{

var

classElements

=

[],allElements

=

documentgetElementsByTagName('');

for

(var

i=0;

i<

allElementslength;

i++

)

{

if

(allElements[i]className

==

n

)

{

classElements[classElementslength]

=

allElements[i];

}

}

return

classElements;

}

思路：首先获取div对象，然后使用className属性获取类名，关键代码如下

1

documentgetElementById("test")className

实例演示：

1、HTML结构

1

2

<div id = "test" class="test_class">我的类名为test_class</div>

<input type='button' value='获取div类名' onclick="fun()"/>

2、javascript代码

1

2

3

4

function fun(){

name = documentgetElementById("test")className;

alert(name);

}

jquery通过任何选择器取得的对象都是jquery对象而不是JavaScript的dom对象不能用js的方法进行 *** 作 而需要使用jquery对象支持的方法 如果是通过class的话取得的是jquery对象数组

ps 如果想把jquery对象装换为js对象可以用以下方法

1 var obj = $('#xx')[0] 获得dom对象

2 对于数组

var obj = $('xx')each(function(){

alert(this)//这里 this获得的就是每一个dom对象 如果需要jquery对象 需要写成$(this)

});

js获取元素的class名：

var className=documentgetElementsByClassName('names')[0];

jquery获取元素的class名：

var className = $('names')atrr('class');

相关概念

getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。

NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。

/ 

 取得对应类和标签的HTML元素 

 clsName:给定类名 

 tagName：给定的HTML元素，如果为任意 tagName='' 

/  

function getElementsByClassName(clsName, tagName) {  

    var ClassElements = [];  

    selElements = documentgetElementsByTagName(tagName);  

    for (var i = 0; i < selElementslength; i++) {  

        if (selElements[i]className == clsName) {  

            ClassElements[ClassElementslength] = selElements[i];  

        }  

    }  

    return ClassElements;  

}

js中有四种获取dom的方法：

根据ID获取对象：documentgetElementById(ID);

根据class获取对象数组：documentgetElementsByClassName("box");

根据tag获取对象数组：documentgetElementsByTagName("p");

根据name获取对象数组：documentgetElementsByName(NAME);

用jquery选择器就多得去了，一般都用jquery，js一大串代码用jquery几个符号搞定。

根据ID获取对象：$('#ID');

根据class获取对象数组：$("box");

根据tag获取对象数组：$("p");;

根据name获取对象数组：$('input[name="nw"]');

例子：

<div class='view view-case-view-all' >

<div class= 'view-content view-content-case-view-all' >

<table border="1" >

<tr class="odd" >

<td class="view-field view-field-node-title" >任务测试</td >

</tr >

</table >

</div >

</div >

<script language="javascript" type="text/javascript" >

documentgetElementsByClassName = function(_className)

{ //根据class获得对象集合

var aimObj = [];

var elements = documentgetElementsByTagName("") ;//取得所有元素的集合

alert(elementslength);

for(var i=0;i<elementslength;i++)

{

if(elements[i]className==null) continue;

if(elements[i]className == _className)

{

以上就是关于js通过元素class名字获取元素集合的具体实现全部的内容，包括:js通过元素class名字获取元素集合的具体实现、怎样用JS获取CSS中class中的值、jquery 是如何通过 class 来获取元素的等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！