博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
封装一个通用选择器的简单写法
阅读量:5272 次
发布时间:2019-06-14

本文共 1196 字,大约阅读时间需要 3 分钟。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>j</title>
</head>
<body>
    <div class="box">
        <div class="cute">11111</div>
        <div class="hh">aaaa</div>
        <div class="hh">bbbb</div>
        <div id="test">ccccc</div>
        <p>标签名实验</p>
    </div>
</body>

<script>

function $(param, obj) {

    obj = obj || document;
    //根据id名查找元素
    if (param[0] === "#")
        return document.getElementById(param.slice(1));
    // 根据指定类名查找元素
    if (param.indexOf(".") === 0)
        return getByClass(param.substring(1), obj);
    //根据标签名查找
    return obj.getElementsByTagName(param);
}
//类名查找元素实现方法
function getByClass(className, obj) {
    obj = obj || document;
    if (obj.getElementsByClassName)
        return obj.getElementsByClassName(className);
    var result = [];
    var tags = obj.getElementsByTagName("*");
    for (var i = 0, len = tags.length; i < len; i++) {
        var classNames = tags[i].className.split(" "); // 获取当前遍历元素的类名
        for (var j = 0, l = classNames.length; j < l; j++) {
            if (className === classNames[j]) { // 找到所需要进行查找的一个元素
                result.push(tags[i]);
                break;
            }
        }
    }
    return result;
}

  $("#test").style.background = "red";

    $(".hh")[0].style.background = "blue";
    $("p")[0].style.background = "green";

</script>

</html>

转载于:https://www.cnblogs.com/html-go/p/5823476.html

你可能感兴趣的文章
关于IE和火狐,谷歌,Safari对Html标签Object和Embed的支持问题
查看>>
poj3320 Jessica's Reading Problem(尺取思路+STL)
查看>>
分布式计算开源框架Hadoop介绍
查看>>
安卓平台接口剖析
查看>>
坏的事情不都会带来坏的结果
查看>>
RPC的基础:调研EOS插件http_plugin
查看>>
HIT1946 希尔伯特分形曲线(dfs)
查看>>
第二次团队冲刺第二天
查看>>
青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 2
查看>>
bzoj 2257 (JSOI 2009) 瓶子与燃料
查看>>
11)Java abstract class 和 interface
查看>>
使用xrdp或Xmanager 远程连接 CentOS6
查看>>
SEH简单研究
查看>>
Linux误删恢复
查看>>
Unity调用Windows窗口句柄,选择文件和目录
查看>>
HashMap循环遍历方式
查看>>
React Native 入门 调试项目
查看>>
C# 通过 Quartz .NET 实现 schedule job 的处理
查看>>
关于java之socket输入流输出流可否放在不同的线程里进行处理
查看>>
目前为止用过的最好的Json互转工具类ConvertJson
查看>>