DOM选择器

DOM选择器分为：id、class、name、tagname、高级、关系选择器;（返回的都是标签）

一：元素节点选择器：

1. id: 返回的是单个对象

<body>

    <div class="box" a="10" b="20" id="cont" name="wode"></div>

</body>

var ocont=document.getElementById("cont");  //找到的是有id名为"cont"的div标签;

    console.log(ocont);   //<div class="box" a="10" b="20" id="cont" name="wode"></div>

    console.log(typeof ocont);  //object;

2. class:返回的是数组对象，可以通过索引解析，专门用在input表单中；

var obox=document.getElementsByClassName("box");

        console.log(obox);  //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box];   返回的是数组对象

        console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div>

        console.log(obox[1]);  //undefined;这里的数组是一个个class名为box的标签，索引得到的也是标签，里面的属性名和属性值可以通过attributes等获取。

3. name: 返回的是数组对象，可以通过索引解析

var owode=document.getElementsByName("wode");

        console.log(owode);  //NodeList [div#cont.box];

        console.log(obox[0]); //<div class="box" a="10" b="20" id="cont" name="wode"></div>

        console.log(owode[1]) //undefined;规则和class选择器相同，见上！

4. tagname:返回的是数组对象，可以通过索引解析

var oa=document.getElementsByTagName("div");

        console.log(oa);    //HTMLCollection [div#cont.box, cont: div#cont.box, wode: div#cont.box];     规则和索引取得的值与上面两个选择器相同！

===================================================================================================================================

5.高级选择器，ES5新增

<body>

    <div class="box" a="10" b="20" id="cont" name="wode"></div>

    <div class="box" c="999"></div>

</body>

query.Selector():返回的是单个对象;()里写的是css选择器,如：.box、#cont等

var ele=document.querySelector("#cont");

    console.log(ele);   //<div class="box" a="10" b="20" id="cont" name="wode"></div>

　　当有多个同级元素时，返回最近的一个，即最上面那个;

var aaa=document.querySelector(".box");

    console.log(aaa);       //<div class="box" a="10" b="20" id="cont" name="wode"></div>;

                            //第二个div并没有被显示时

　　querySelectorAll():返回的是数组对象，可以通过索引解析;()里写的是css选择器,如：.box、#cont等

    var ele=document.querySelectorAll(".box");

    console.log(ele)        //NodeList(2) [div#cont.box, div.box];显示一个数组里面有两个div标签

二：关系选择器

1.父选子：返回数组对象，可以通过索引解析

<body>

    <div class="box" a="10" b="20" id="cont" name="wode">

        <li class="msg></li>

        <li></li>

    </div>

    <div class="box" id="qqq" name="ppp">

        <p><p>

        <p></p>

    </div>

</body>

var obox=document.querySelector(".box");

    console.log(obox.children) // HTMLCollection(2) [li.msg, li];返回class名为box的标签内所有子标签；

                               //当有多个同级元素时，显示最上面那个

2.子选父：返回单个对象

    var omsg=document.querySelector(".msg");

    console.log(omsg.parentNode)    //<div class="box" a="10" b="20" id="cont" name="wode">

3.第一个子：单个对象

var obox=document.querySelector(".box");

    console.log(obox.firstElementChild)    ;    //<li class="msg"></li>

4.最后一个子：单个对象

var obox=document.querySelector(".box");

    console.log(obox.lastElementChild)    ;    //<li></li>

=================

<body>

    <div class="box" a="10" b="20" id="cont" name="wode">

        <p></p>

        <li class="msg"></li>

        <li ></li>

    </div>

    <div class="box" id="qqq" name="ppp">

        <p><p>

        <p></p>

    </div>

</body>

5.上一个兄弟：单个对象

var omsg=document.querySelector(".msg");

    console.log(omsg.previousElementSibling)    ;    //<p></p>

6.下一个兄弟：单个对象

var omsg=document.querySelector(".msg");

    console.log(omsg.nextElementSibling)    ;    //<li></li>

=================================================================================================================================

三；其他节点选择器

1:父选子：返回数组对象，可以通过索引解析

<body>

    <div class="box" a="10" b="20" id="cont" name="wode">

        <p></p>

        <li class="msg"></li>

        <li ></li>

    </div>

    <div class="box" id="qqq" name="ppp">

        <p></p>

        <p></p>

    </div>

</body>

var obox=document.querySelector(".box");

    console.log(obox.childNodes)   //NodeList(7) [text, p, text, li.msg, text, li, text];

                                //其中空格+航换行也是一个文本对象，注释属于注释对象

    console.log(obox.childNodes[1])      //<p></p>

    console.log(obox.childNodes[1])     //#text

2：上一个兄弟：返回单个对象

var omsg=document.querySelector(".msg");

    console.log(omsg.previousSibling);  //#text;空格换行也是一个文本对象

3：写一个兄弟：返回单个对象

var omsg=document.querySelector(".msg");

    console.log(omsg.nextSibling);  //#text;空格换行也是一个文本对象

4.第一个子：返回单个对象

var obox=document.querySelector(".box");

    console.log(obox.firstChild)      //#text;空格换行也是一个文本对象

5.最后一个子：返回单个对象

var obox=document.querySelector(".box");

    console.log(obox.lastChild)      //#text;空格换行也是一个文本对象

补充：

             节点类型(nodeType)      节点名字(nodeName)      节点值(nodeValue)

 元素节点                                标签名                    null

 文本节点                                 #text                    文本

 注释节点                                #comment                注释的文字

 文档节点         9                        #document                null

 属性节点         2                        属性名                    属性值

巴特西

DOM选择器

最新文章

热门文章