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. scite配置文件及常用设置

    在linux系统中,SciTE的用户设置文件为 ~/.SciTEUser.properties,优先级高于全局配置文件. scite是个不错的IDE工具,只是本人发现,在开发团队中和其他成员的编辑工具 ...

  2. An easy problem (位运算）

    [题目描述] 给出一个整数,输出比其大的第一个数,要求输出的数二进制表示和原数二进制表示下1的个数相同. [题目链接] http://noi.openjudge.cn/ch0406/1455/ [算法 ...

  3. 在html模板里面加python函数（simple_tag与filter）

    自定义函数 simple_tag a. app下创建templatetags目录 b. 任意xxoo.py文件 c. 创建template对象 register d. @register.simple ...

  4. indexDB的概念

    IndexDB利用数据键(key)访问,通过索引功能搜索数据,适用于大量的结构化数据,如日历,通讯簿或者记事本. 1. 以key/value成对保存数据 IndexDB和WebStorage都是以数据 ...

  5. Linux统计文件内容

    wc:统计文件的行数.单词数.字节数(word count) - wc char.txt:统计出文件char.txt的换行符个数.单词数.字节数 (char.txx有14行.13个单词.66字节) - ...

  6. windows安装 阿里云的Fun工具

    由于项目使用到了 函数计算,特此了解到了需要安装 阿里云的Fun工具 Fun 是一个用于支持 Serverless 应用部署的工具,能帮助您便捷地管理函数计算.API 网关.日志服务等资源.它通过一个 ...

  7. Shell 脚本举例

  8. raw, SOCK_RAW - Linux IPv4 raw socket.

    总 览 #include <sys/socket.h> #include <netinet/in.h> raw_socket = socket(PF_INET, SOCK_RA ...

  9. css3系列--概述

    CSS3分成了不同类别,称为“modules”.而每一个“modules”都有于CSS2中额外增加的功能,以及向后兼容.CSS3早于1999年已经开始制订.[18]直到2011年6月7日,CSS 3 ...

  10. 【抓包工具之Fiddler】中session的请求/响应类型与图标对照表