document.getElementById的简便方式

最新推荐文章于 2022-03-01 11:13:37 发布

weixin_30745641

最新推荐文章于 2022-03-01 11:13:37 发布

阅读量137

点赞数

原文链接：http://www.cnblogs.com/wishyouhappy/p/3799911.html

版权

封装自己的元素获取方法，使元素获取变得简便

注意：1、应该要防止定义的被重写，可将同名的重新定义

　　 2、可将封装的对象置为全局对象，方便使用

通过id查找单个元素

封装方式：

//通过id查找单个元素
(function (document){
    //防止覆盖
    var _overwrite = window._,
        _;

    _ = {
        $ : function(id){
            return typeof id === "string" ? document.getElementById(id) : id;
        }
    }

    //将_置为全局对象
    window._ = _;

})(document);

测试：

<!DOCTYPE html>
<html>
<body>
    <div id = "cloud">The cloud is beautiful</div>
</body>
<script><!--
(function (document){
    //防止覆盖
    var _overwrite = window._,
        _;

    _ = {
        $ : function(id){
            return typeof id === "string" ? document.getElementById(id) : id;
        }
    }

    //将_置为全局对象
    window._ = _;

})(document);


var cloud = _.$("cloud");
alert(cloud.innerHTML); //The cloud is beautiful
--></script>
</html>

通过ID获取多个元素

封装方式：

//通过id查找一个或者多个元素
(function (document){
    //防止覆盖
    var _overwrite = window._,
        _;
    _ = {
        $ : function(/*ids....*/){
            var elements = {},
                    id,
                    elt;
            for(var i = 0, len= arguments.length; i < len; i++){
                id = arguments[i];
                elt = document.getElementById(id);
                if(elt === null){
                    throw new Error("No element with id:" + id);
                }
                if(len === 1){
                    return elt;
                }
                elements[id] = elt;
            }
            return elements;        
        }
    }

    //将_置为全局对象
    window._ = _;

})(document);

测试：

 <div id = "cloud">The cloud is beautiful</div>
 <div id = "sea">The white white sea</div>
//获取单个元素
var cloud = _.$("cloud");
alert(cloud.innerHTML);//The cloud is beautiful

//获取多个元素
var all = _.$("cloud", "sea");
alert(all.cloud.innerHTML + "," + all.sea.innerHTML); //The cloud is beautiful,The white white sea

转载于:https://www.cnblogs.com/wishyouhappy/p/3799911.html

weixin_30745641

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.getElementById的简便方式

封装自己的元素获取方法，使元素获取变得简便注意：1、应该要防止定义的被重写，可将同名的重新定义　　 2、可将封装的对象置为全局对象，方便使用通过id查找单个元素封装方式：//通过id查找单个元素(function (document){ //防止覆盖 var _overwrite = window._, _;...
复制链接

扫一扫