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选择器的更多相关文章

  1. 都别说工资低了，我们来一起写简单的dom选择器吧！

    前言 我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了 然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...

  2. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

  3. 一周学会Mootools 1.4中文教程:(1)Dom选择器

    利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...

  4. 订制DOM选择器

    本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...

  5. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  6. Dom选择器及操作文本内容

    文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...

  7. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  8. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  9. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

随机推荐

  1. 微信、QQ、新浪微博等第三方登录，你想知道的都在这了（上） 微信、QQ、新浪微博等第三方登录，你想知道的都在这了（下）

    微信.QQ.新浪微博等第三方登录,你想知道的都在这了(上):https://www.jianshu.com/p/133d84042483 微信.QQ.新浪微博等第三方登录,你想知道的都在这了(下):h ...

  2. Vue对象的生命周期

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 好用的for循环与range

    for循环 # for 变量 in 可迭代对象: # pass s = "1234567890" for each in s: # 遍历字符串 print(each) # 1 2 ...

  4. 6、numpy——高级索引

    NumPy 比一般的 Python 序列提供更多的索引方式.除了之前看到的用整数和切片的索引外,数组可以由整数数组索引.布尔索引及花式索引. 1.整数数组索引 1.1 以下实例获取数组中(0,0),( ...

  5. /dev/random vs /dev/urandom

    If you want random data in a Linux/Unix type OS, the standard way to do so is to use /dev/random or ...

  6. 2019牛客暑期多校训练营（第二场） - H - Second Large Rectangle - dp

    https://ac.nowcoder.com/acm/contest/882/H 正确的办法:dp1[i][j]表示以i,j为底的矩形的高.得到dp1之后,dp2[i][j]表示以dp1[i][j] ...

  7. Newtonsoft.Json 转Json字符串为空不序列化

    原文:Newtonsoft.Json 转Json字符串为空不序列化 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://bl ...

  8. asp.net 连续打印多份HTML页面，出现漏字

    在IE8上打印的内容用了CSS 样式,连续打印多份导致的 可以通过改变CSS样式或更换浏览器解决

  9. JS 函数 学习笔记

    函数是一段可以反复调用的代码块.函数还能接受输入的参数,不同的参数会返回不同的值 声明函数的 5 种方式 具名函数 (function 命令) function f(x, y){ return x + ...

  10. mysql 删除重复数据只保留一条记录

    删除重复数据保留name中id最小的记录 delete from order_info where id not in (select id from (select min(id) as id fr ...