JS批量获取class命名节点 getElementsByClassName()

发布时间：2018-09-20 06:37:41 所属栏目：模式来源：站长网

导读：JS批量获取class命名节点 getElementsByClassName() getElementsByClassName() 是一个老的方法了，将其优化整理后给大家提供。代码如下： // 批量获取class命名节点 function getElementsByClassName(className, tag, parent){ var parent = parent || doc

JS批量获取class命名节点 getElementsByClassName()
getElementsByClassName() 是一个老的方法了，将其优化整理后给大家提供。

代码如下：

// 批量获取class命名节点
function getElementsByClassName(className, tag, parent){
var parent = parent || document;
var tag = tag||"*";
if(!(parent = F$(parent))){return false;}
// 查找所有匹配标签
var allTags = (tag == "*" && parent.all) ? parent.all : F$$(tag, parent);
var classElements = [];

// 创建一个正则表达是来判断className的正确性
className = className.replace(/-/g, "-");
var regex = new RegExp("(^|s)" + className + "(s|$)");
var elenemt;
// 检查每个元素
for(var i=0; i<allTags.length; i++){
elem = allTags[i];
if(regex.test(elem.className)){
classElements.push(elem);
}
}
return classElements;
};

getElementsByClassName(className, tag, parent)接受三个参数：

className：要获取节点的class名称

tag：命名class的标签可选项默认表示“*”所有标签

parent：父节点之下的所有内容，也就是获取的范围，可选项默认表示"document"

实例：

HTML:


<a href="#" class="my">这是链接</a>
1
2
3
4


执行：getElementsByClassName("my", "span", document.getElementById("main"));

或得到的将是包含 SPAN1、SPAN3 两个个节点的数组『其中不包含A标签这个节点，因为参数中指定必须是span才提取』。

还有如下实例：

getElementsByClassName("my") // 获取文档中所有.my 节点

getElementsByClassName("my", "span") // 获取文档下以.my命名的span节点

getElementsByClassName("my", "*", document.getElementById("main")) // 获取#main下的所有.my命名节点。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!