DOM选择器

2019-08-25 16:01:57 阅读：351 来源： 互联网

标签：box cont log DOM var console div 选择器

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>

标签：box,cont,log,DOM,var,console,div,选择器
来源： https://www.cnblogs.com/zhouqingfeng/p/11408183.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

DOM选择器