HTML与JavaScript DOM操作技巧-优快云博客

本文介绍了一种结合HTML和JavaScript实现DOM元素选择的方法，通过自定义函数实现了类似YUI库的功能，支持单个及多个元素的选择，并展示了如何在页面加载完成后获取指定ID的输入元素。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <script type=text/javascript charset=utf-8 src=../commons/CommonUtil.js ></script>
        <script type=text/javascript charset=utf-8>
            //适配器： 
          function $(){
                var elements = [] ;
                for(var i = 0 ; i < arguments.length; i++){
                    var element = arguments[i];
                    if(typeof element == 'string')
                        element = document.getElementById(element);
                    if(arguments.length ==1)
                        return element ;
                    elements.push(element);
                }
                return elements;
          }
          
          
          // YUI get function (传递了一个参数 :类型不是字符串 就是数组)
          var YAHOO = {};
          YAHOO.get = function(el){//形参实参个数可以不一样，接收还是按照一个一个匹配，
                if(typeof el == 'string'){
                    return document.getElementById(el);
                } 
                if(el instanceof Array){
                    var elements = [] ;
                    for(var i = 0 ; i < el.length ; i++){
                        elements[elements.length] = YAHOO.get(el[i]);
                    }
                    return elements;
                }
                if(el){
                    return el ; 
                }
                return null;
          };
          
          
          function YUIToPrototypeAdapter(){
                //对于YUI开发人员来说 永远传递一个参数
                if(arguments.length == 1){
                    var e = arguments[0];
                    return  $.apply(window,e instanceof Array?e:[e]);
                } else {
                    return $.apply(window ,arguments);
                }
          }
          
          
          
          window.onload = function(){
                // prototype开发人员习惯的写法
                var domarr = $('inp1','inp2');    //可以传多个参数
                alert(domarr);
                
                // YUI开发人员习惯的写法
                var domarr = YAHOO.get(['inp1','inp2']); //只能创一个参数    
                alert(domarr); 
                
                //可以传一个或多个参数
                var domarr = YAHOO.YUIToPrototypeAdapter(['inp1']);
                alert(domarr); 
         };
              
              
              
               
            
        </script>
    </head>
    <body>
            <input id="inp1" />
            <input id="inp2" />
    </body>
</html>