`
jcyanfan
  • 浏览: 74690 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

document.getElementsByClassName的理想实现

 
阅读更多
function getElementsByClassName(searchClass, node,tag) { 
        if(document.getElementsByClassName){ 
          var nodes = (node || document).getElementsByClassName(searchClass),result = nodes;
if(tag!=undefined){
result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node);
}else{
result.push(node);
}
}
}
return result;
        }else{ 
            node = node || document; 
            tag = tag || "*"; 
            var classes = searchClass.split(" "), 
            elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag), 
            patterns = [], 
            returnElements = [], 
            current, 
            match; 
            var i = classes.length; 
            while(--i >= 0){ 
                patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)")); 
            } 
            var j = elements.length; 
            while(--j >= 0){ 
                current = elements[j]; 
                match = false; 
                for(var k=0, kl=patterns.length; k<kl; k++){ 
                    match = patterns[k].test(current.className); 
                    if (!match)  break; 
                } 
                if (match)  returnElements.push(current);  
            } 
            return returnElements; 
        } 
    };

 

分享到:
评论

相关推荐

    【JavaScript源代码】vue使用echarts画组织结构图.docx

    const sidebarElm = document.getElementsByClassName("sidebar-container")[0]; sidebarElm.addEventListener("transitionend", this.sidebarResizeHandler); }, beforeDestroy() { // 清理事件监听器 window...

    baidupopup最好的遮罩效果

    var mask = document.getElementsByClassName('mask')[0]; if (mask) { mask.remove(); // 关闭弹出窗口的代码... } }); ``` 在实际应用中,设计师还会根据需求调整遮罩层的颜色、透明度以及动画效果,使其...

    第二课 为什么要用jquery1

    var btn1 = document.getElementsByClassName('btn1')[0]; btn1.onclick = function(){ var job = document.getElementsByName('job'); var type = document.getElementsByName('type'); var typeChecked = ''; ...

    全面解析Javascript无限添加QQ好友原理

    var actions = document.getElementsByTagName('iframe')[0].contentWindow.document.getElementsByClassName('action'); function set_interval() { setTimeout(function() { for (var i = 0; i &lt; actions....

    VANCL图片上下滑动代码,琴键效果

    const keys = Array.from(document.getElementsByClassName('key')); // 获取所有图片元素 keys.forEach(key =&gt; key.style.transform = 'translateY(0)'); // 先恢复所有图片到原始位置 target.style.transform =...

    JavaScript实现模态对话框实例

    JavaScript 是实现这种功能的理想选择,因为它可以动态地操作DOM元素,控制其显示和隐藏。在给出的实例中,我们将深入探讨如何使用JavaScript实现一个简单的模态对话框。 首先,我们需要理解HTML和CSS部分。HTML...

    基于Javascript实现返回顶部按钮

    var ele_top = document.getElementsByClassName("top")[0]; var n_half_height = window.screen.height / 2; ele_top.style.top = n_half_height + "px"; window.onscroll = function (e) { var n_stop = e....

    zhihu-style-modal:zhihu.com样式情态

    var span = document.getElementsByClassName("close")[0]; btn.onclick = function() { modal.style.display = "block"; } span.onclick = function() { modal.style.display = "none"; } window.onclick = ...

    查找页面中所有类为test的结点的方法

    console.log(document.getElementsByClassName("A")); ``` 这将返回包含所有类名为“A”的元素的NodeList。 2. `querySelectorAll`:这个方法可以接受CSS选择器作为参数,返回匹配选择器的所有元素。它能处理更...

    js定时间转换图片

    在JavaScript(简称JS)中,实现定时转换图片的需求通常是用于创建动态效果,比如轮播图、动态展示等。这个任务通常涉及到几个关键知识点:计时器(setTimeout 和 setInterval)、DOM操作(元素选择与修改)以及事件...

    各浏览器中querySelector和querySelectorAll的实现差异分析

    接口实现上,`Document`、`DocumentFragment` 和 `Element` 都实现了 `NodeSelector` 接口,这意味着这些类型的元素都具备 `querySelector` 和 `querySelectorAll` 方法。不过,对于某些版本的浏览器,如早期的IE,...

    animais-fantasticos:使用DOM以及.window和.element的研究

    本项目"animais-fantasticos"深入探讨了DOM(Document Object Model)以及JavaScript中的`.window`和`.element`概念,这些都是网页动态交互和操作的关键元素。 DOM是一个树形结构,它将HTML或XML文档表示为一个可...

    前端JavaScript入门学习资源

    例如,`document.createElement()`用于创建新节点,`appendChild()`或`insertBefore()`用于插入节点,`getElementById()`、`getElementsByClassName()`等方法则用于获取特定的节点。 事件处理是JavaScript实现用户...

    智能社JavaScript系列视频资料

    "智能社JavaScript系列视频资料"显然是一份专门针对学习和深入理解JavaScript的教育资源,包含PPT讲解和源码实例,是提升JavaScript技能的理想资源。 1. **JavaScript基础** - 变量与数据类型:JavaScript支持var...

    Ajax中文手册CHM(快速上手).rar

    理解如何使用JavaScript操作DOM元素,如通过getElementById(), getElementsByClassName(), 或querySelectorAll()等方法,是使用Ajax的关键。 5. **AJAX与浏览器兼容性**:不同浏览器对Ajax的支持程度不同,尤其是较...

    JavaScript教程

    例如,通过getElementById、getElementsByClassName、querySelector等方法选取元素,再用innerHTML、textContent等属性改变内容。 4. **事件处理** JavaScript通过监听和处理事件来响应用户的交互,如点击按钮、...

    JAvascript Dom编程艺术 图片库

    JavaScript DOM编程艺术是一本专为前端开发者准备的基础教程,它深入浅出地讲解了如何使用JavaScript操作DOM(Document Object Model)来实现动态网页效果。DOM是HTML和XML文档的结构化表示,允许程序和脚本动态更新...

    上千JavaScript实例

    实例中会包含各种DOM操作方法,如getElementById、getElementsByClassName等。 7. **AJAX**:异步JavaScript和XML,虽然现在通常不涉及XML,而是用于发送异步HTTP请求,获取和更新数据。实例将展示如何使用...

    javascript前台开发

    JavaScript的主要特点包括跨平台性、轻量级和解释执行,使得它成为构建富客户端应用的理想选择。富客户端(Rich Internet Application, RIA)是指具有高度互动性和响应性的Web应用,它通过大量的JavaScript代码,...

Global site tag (gtag.js) - Google Analytics