理解JavaScript库（一）——初体验封装获取节点方法

最新推荐文章于 2022-01-22 20:20:52 发布

小公举plum

最新推荐文章于 2022-01-22 20:20:52 发布

阅读量300

点赞数

分类专栏：前端-JavaScript

本文链接：https://blog.youkuaiyun.com/sinat_38328891/article/details/79988030

版权

前端-JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了JavaScript库的概念，并通过具体实例展示了如何封装获取DOM节点的方法。包括使用函数式及对象式两种方式实现getElementById、getElementsByName和getElementsByTagName的功能。

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

理解JavaScript库（一）——初体验封装获取节点方法

一、理解JavaScript库

JavaScript库就是把各种常用的代码片段，组织起来放在一个js文件里，组成一个包，这个包就是JavaScript库。
现如今有太多优秀的开源JavaScript库，比如：jQuery、Prototype、Dojo、Extjs等等。这些JavaScript库已经把最常用的代码进行了有效的封装，以方便开发，从而提高效率。

二、初体验——封装获取节点方法

HTML文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>获取节点方法</title>
    <!--引入文件-->
    <script src="js/base.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <div id="a">a</div>
    <input type="text" name="b" value="b" />
    <p>hellow</p>
</body>
</html>

base.js文件

/**
 * Author pangtong
 */

/**
 * 获取节点方法
 */

//函数式
function getId(id){
    return document.getElementById(id);
}
function getName(name){
    return document.getElementsByName(name);
}
function getTag(tag){
    return document.getElementsByTagName(tag);
}

//对象式
var El = {
    getId:function (id){
        return document.getElementById(id);
    },
    getName:function (name){
        return document.getElementsByName(name);
    },
    getTag:function (tag){
        return document.getElementsByTagName(tag);
    }
};

index.js文件

/**
 * Author pangtong
 */
window.onload = function(){
    console.log(getId('a'));
    console.log(getName('b')[0]);
    console.log(getTag('p')[0]);
    console.log(El.getId('a'));
    console.log(El.getName('b')[0]);
    console.log(El.getTag('p')[0]);
}