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

最新推荐文章于 2024-03-01 22:32:39 发布

abxn2002

最新推荐文章于 2024-03-01 22:32:39 发布

阅读量2.1k

点赞数

分类专栏： javascript学习笔记文章标签： class regex 文档 function html 优化

javascript学习笔记专栏收录该内容

75 篇文章

订阅专栏

本文介绍了一个优化后的getElementsByClassName函数，用于批量获取具有特定类名的DOM元素，并提供了多个使用示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转载地址: http://www.imf7.com/archives/128

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:

<p class="main" id="main">
  <a href="#" class="my">这是链接</a>
  <span class="my">1</span>
  <span id="sss">2</span>
  <span class="my ttt">3</span>
  <span>4</span>
</p>

执行：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命名节点。