document.getElementById의 간편한 방법

8351 단어 document
자신의 원소 획득 방법을 봉하여 원소 획득을 간편하게 하다
주의: 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


좋은 웹페이지 즐겨찾기