web前端教程62dom封装函数

最新推荐文章于 2024-03-13 11:11:16 发布

百目清

最新推荐文章于 2024-03-13 11:11:16 发布

阅读量135

点赞数

分类专栏： web学习笔记文章标签： dom js

本文链接：https://blog.csdn.net/qq_39503991/article/details/108451334

版权

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

2 篇文章 0 订阅

订阅专栏

学习笔记及代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装函数</title>
    <script>
        
        /*     id  document.getElementById()

            tagName node.getelementsByTagName()

            name document,getelementsByName()

            className document.getElementsByClassName() */
        
        /* 
            通过封装函数    简化上诉操作。
            封装一个函数，可以拥有上述几种获取元素节点的功能
            【注】CSS选择器
                #id     通过id获取原色节点
                .class  通过className获取元素节点
                tagName 通过tagName获取元素节点
                name = XXX  通过name获取元素节点
        */
        function $(vArg){
            //<1>对参数进行区分。
            switch(vArg[0]){
                case"#":
                return document.getElementById(vArg.substring(1));
                break;
                case".":
                return elementByClassName(document,vArg.substring(1));
                break;
            default:
                //
                var str = vArg.substring(0,5);
                if(str == "name="){
                    return document.getElementsByName(vArg.substring(5));
                }else{
                    return document.getElementsByTagName(vArg);
                }
                break;
            }
        }

        function  elementByClassName(parent,classStr){
            //<1>找到parent下所有元素节点
            var nodes = parent.getElementsByTagName('*')
            var result = [];
            for(var i = 0;i<nodes.length;i++){
                //<2>如果符合条件，添加到数组
                if(nodes[i].className == classStr){
                    result.push(nodes[i]);
                }
            }
            return result;
        }

    window.onload = function(){
        alert($("#div1").innerHTML);
        alert($(".box").length);
        alert($(".box")[1].innerHTML);
        alert($("div").length);
        alert($("name=hello")[0].innerHTML);
        alert($("name = hello").length);
    }
       
       
    </script>
</head>
<body>
    <div id="div1">1111111</div>
    <div class="box">2222222</div>
    <div class="box">3333333</div>
    <div name = "hello">4444444</div>
</body>
</html>

百目清

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端教程62dom封装函数

学习笔记及代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>封装函数</title> <script> /*
复制链接

扫一扫

专栏目录