DOM选择器

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

都别说工资低了，我们来一起写简单的dom选择器吧！
前言我师父(http://www.cnblogs.com/aaronjs/)说应当阅读框架(jquery),所以老夫就准备开始看了然后公司的师兄原来写了个dom选择器,感觉不错啊!!!原来自己从来 ...
关于一个新的DOM选择器querySelector
在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...
一周学会Mootools 1.4中文教程:(1)Dom选择器
利器: 君欲善其事须先利其器,好吧因为我们的时间比较紧迫,只有六天而已,那么六天的时间用死记硬背的方式学会Mt犹如天方夜谭,因此我们需要借鉴一下Editplus的素材栏帮我们记忆就好了,当我们需要用到 ...
订制DOM选择器
本来是打算参考zepto.js,然后将里面想要的部分抽出来做函数,随调随用. 但后面发现这种写法重复代码太多,代码不整洁,于是就打算模仿下zepto的写法,挑出些比较实用的方法,造一下轮子. 起名叫“ ...
原生的强大DOM选择器querySelector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
Dom选择器及操作文本内容
文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式.我们最为关心的是,DOM把 ...
强大的原生DOM选择器querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
原生JS强大DOM选择器querySelector与querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
原生的强大DOM选择器querySelector - querySelector和querySelectorAll
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

随机推荐

CodeChef Gcd Queries
Gcd Queries Problem code: GCDQ Submit All Submissions All submissions for this problem are ava ...
合并石子（区间dp+前缀和）
[题目描述] N堆石子.现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆石子合并成新的一堆,并将新的一堆石子数记为该次合并的得分.计算出将N堆石子合并成一堆的最小得分. [题目链接] http: ...
Codeforces 735E 树形DP
题意:给你一棵树,你需要在这棵树上选择一些点染成黑色,要求染色之后树中任意节点到离它最近的黑色节点的距离不超过m,问满足这种条件的染色方案有多少种? 思路:设dp[x][i]为以x为根的子树中,离x点 ...
selenium原理（以百度搜索为例）
1.首先导入 Selenium(webdriver)相关模块2.调用 Selenium 的浏览器驱动,获取浏览器句柄(driver)并启动浏览器.3.通过句柄访问百度 URL.4.通过句柄操作页面元素 ...
Centos 安装.NET Core环境
https://dotnet.microsoft.com/learn/dotnet/hello-world-tutorial/install 一.概述本篇讨论如何把项目发布到Linux环境,主要包括 ...
$NOI2014$ 购票（斜率优化点分治）
$NOI2014$购票哇终于可以碰电脑了赶快切些火题找找感觉. 拿到这道题的时候发现简单的斜率优化推一推可以秒掉平方做法,然后一条链也可以做. 然后呢... 卧槽这个在一棵树上怎么办啊. 大力\ ...
在vscode中快速生成vue模板
点击文件-->首选项-->用户代码片段-->输入vue,此时会打开vue.json文件,将下列代码复制进文件保存即可,新建一个vue文件,输入vue回车即可生成模板,$0表示生成模板 ...
如何在MaxCompute上处理存储在OSS上的开源格式数据
0. 前言 MaxCompute作为使用最广泛的大数据平台,内部存储的数据以EB量级计算.巨大的数据存储量以及大规模计算下高性能数据读写的需求,对于MaxCompute提出了各种高要求及挑战.处在大数 ...
CSD编码----数字信号处理--006
有符号数(Signed Digit Number , SD) SD编码 1.有三重值 {0,1,-1} 2.应用在不用进位的加法器或乘法器中能够降低复杂性因为通常可以通过非零元素的数来估计乘法的工作 ...
HDU 6638 - Snowy Smile 线段树区间合并+暴力枚举
HDU 6638 - Snowy Smile 题意给你$n$个点的坐标$(x,\ y)$和对应的权值$w$,让你找到一个矩形,使这个矩阵里面点的权值总和最大. 思路先离散化纵坐标\(y ...

DOM选择器

DOM选择器的更多相关文章

随机推荐

热门专题