实现一个简单的DOM选择器

来源：互联网发布：中国高铁发展知乎编辑：程序博客网时间：2024/05/22 12:00

实现一个简单的DOM选择器

预备知识

DOM相关知识

http://www.w3school.com.cn/htmldom/index.asp

具体描述

实现一个方法$，可以完成以下功能

1.可以通过id获取一个DOM

例如：

......

$("#dom1") // 返回一个数组，数组中唯一的元素为id为dom1的div

2.可以通过css的class name获取一组DOM

例如：

<divclass="style1"></div>

.....

$(".style1") // 返回一个数组，数组中两个元素，为class含有style1的div及p

$(".style2 .style1") // 返回一个数组，数组中一个元素，为class含有style1, style2的p

参考：

通过类和id选择获取DOM元素

做一个类似JQuery获取DOM对象的$()

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><body><div id="dom1" style="background: coral">a</div><ul><p class="t">Hello,world!</p><p>Hello,world!</p><li class="t1 t2">afasdfsa</li><li>sfk</li><li class="t">sdklfajsfjk</li><li>end</li><li class="t">of</li></ul><ol>    <li class="t">附加的第一项</li>    <li class="t">附加的第二项</li>    <li class="t">附加的第三项</li></ol><!--首先先建立HTML--><script>    function $( selector ) {        var split = selector.split(" ");       console.log(split);        var el = document;        var len = split.length;        var clName=[];        var type, name;        try {        for( var i = 0; i < len; i++ ) {                name = split[ i ];//.t1 .t2                type = name[ 0 ];                name = name.substr(1, name.length - 1);                clName.push(name);        }            console.log(clName);               name=clName.join(" ");            console.log(name);            console.log(typeof name);                console.log(name);            console.log(type);                switch( type ) {                    case "#":                        el =document.getElementById( name);                        break;                    case ".":                        el = document.getElementsByClassName( name );                        break;                    default:                        el = null;                }            } catch( e ) {                el = null;                throw( "Error with getElement using selector: " + selector + ", error: " + e );            }        if ( el == document ) el = null;        return el;    }    $(".t1 .t2")[0].style.background='blue';    $("#dom1").style.background='green';/*   document.getElementsByClassName("t")[0].style.background='green';    document.getElementById("dom1").style.background='blue';*/  /*  console.log(typeof(document.getElementById("dom1")));*/    /*$(".t1 .t2").style.background='blue';*///错的，因为返回的是数组/*$(document).ready(function(){$("#dom1").click(function(){this.style.background='blue';})});*/</script></body></html>

注意：JQUERY的书写一定要

$(document).ready(function(){$("#dom1").click(function(){this.style.background='blue';})});

<pre name="code" class="html"><strong><span style="font-size:18px;">document.getElementsByClassName返回的是数组</span></strong>

0 0