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. POJ1742 coins 动态规划之多重部分和问题

    原题链接:http://poj.org/problem?id=1742 题目大意:tony现在有n种硬币,第i种硬币的面值为A[i],数量为C[i].现在tony要使用这些硬币去买一块价格不超过m的表 ...

  2. BZOJ 1588 (treap)

    题面 传送门 分析 语文题,主要是如何理解最小波动值 设当前天的营业额为x,则最小波动值为min(x-最大的<=x的数,最小的>=x的数-x) 然后用Treap维护序列就可以了 时间复杂度 ...

  3. 13、numpy——算术函数

    NumPy 算术函数 1.NumPy 算术函数包含简单的加减乘除: add(),subtract(),multiply() 和 divide(). 需要注意的是数组必须具有相同的形状或符合数组广播规则 ...

  4. Jenkins windows 执行批量cmd命令XCOPY 提示'XCOPY' 不是内部或外部命令，也不是可运行的程序 或批处理文件。

    由于Jenkins没有配置环境变量造成 打开Jenkins=>Manage Jenkins =>Configure System =>全局属性 新增全局变量 健: Path 值: % ...

  5. MVC与设计模式的关系及MVC的实现原理和设计原理

    1 MVC介绍 众所周知MVC不是设计模式,是一个比设计模式更大一点的模式,称作设计模式不合理,应该说MVC它是一种软件开发架构模式,它包含了很多的设计模式,最为密切是以下三种:Observer (观 ...

  6. JS 数组 学习笔记

    什么是数组 数组(array)是按次序排列的一组值.每个值的位置都有编号(从0开始),整个数组用方括号表示.本质上数组属于一种特殊的,由Array构造出来的对象,typeof运算符返回数组的类型是 o ...

  7. Panabit镜像功能配合wireshark抓包的方法

    Panabit镜像功能配合wireshark抓包的方法 Panabit的协议识别都是基于数据包的特征,因此捕获数据包样本是我们进行识别第一步要做的事情.下面就和大家说一下如何捕获网络应用的数据包. 到 ...

  8. BUUCTF--reverse2

    测试文件:https://buuoj.cn/files/ef0881fc76e5bcd756b554874ef99bec/e8722e94-93d7-45d5-aa06-a7aa26ce01a1.ra ...

  9. MySQL--11 备份的原因

    目录 一.备份的原因 二.备份的类型 三.备份的方式 四.备份策略 五.备份工具 六.企业故障恢复案例 1.模拟环境 2.模拟恢复数据过程: 一.备份的原因 运维工作的核心简单概括就两件事: 1)第一 ...

  10. springboot中MongoDB的使用

    转载参考:http://www.ityouknow.com/springboot/2017/05/08/spring-boot-mongodb.html MongoDB 是一个高性能,开源,无模式的文 ...