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. 【洛谷UVA307】小木棍Sticks

    小木棍Sticks[传送门] 算法的话:dfs+超强剪枝: (另外注意UVA上好像不接受万能头[因为万能头WA了两次,瑟瑟发抖]) 思路: 最直接的思路,枚举木棍长度来dfs,但这样很容易就TLE了. ...

  2. Pandas的基础使用

    Pandas的数据结构 # 导入pandas与numpy import pandas as pd from pandas import Series, DataFrame import numpy a ...

  3. php数组转换字符串及复选框如何勾选中

    php数组转换字符串及复选框如何勾选中,应用到函数 implode  explode 复选框被选中后如何保存数据,表单提交过来为数组,要转换字符串 用到函数implode if(!empty($_PO ...

  4. 一些常见的js校验

    今天有时间来总结一下那些常用的js校验: vernull = function(value){//非空校验 if(value.trim(value).length == 0){ return fals ...

  5. Java JNA （二）—— dll回调函数实现

    java调用dll文件需要使用回调函数作为公开函数的参数时,用以下方法实现: 首先,看c++中定义的dll公开函数: typedef void (*ccback)(char *name ,int le ...

  6. Java实现二分法（折半）查找数组中的元素

    二分查找 算法思想:又叫折半查找,要求待查找的序列有序.每次取中间位置的值与待查关键字比较,如果中间位置的值比待查关键字大,则在前半部分循环这个查找的过程,如果中间位置的值比待查关键字小,则在后半部分 ...

  7. Linux命令（干货）

    @ vim 编辑快捷键 ctrl + n 是自动补齐 ctrl + p 是往上选择 ctrl + f 是下一屏幕 ctrl + b 是上一屏幕 w:是移动一个单词 b:是向前一个单词 d^:当前行中, ...

  8. windows平台搭建Mongo数据库复制集（类似集群）（三）

    在本篇里面,咱们重点总结一下复制集,以及分析一下它的工作原理 一.常见场景 应用程序和数据库之间的网络连接丢失 计划停机.断电.数据库服务硬盘故障等等 复制可以进行故障转移,复制能让你在副本间均衡读负 ...

  9. fastjson 1.1.1填坑

    java封装Echart数据模型 xAxis  yAxis 属性  转json赋值失败..换名即可 解决办法:升级1.2.2后即可

  10. Spring入门-框架搭建

    步骤: 导包 四个核心包: 日志包:由于市场上已经有更好的日志包,所以spring不用自己的,而是用apache的日志. 搞对象 由于spring是用来装对象的容器,所以得搞个对象让它装 书写配置文件 ...