DOM选择器

最新推荐文章于 2022-10-23 16:18:34 发布
最新推荐文章于 2022-10-23 16:18:34 发布
阅读量152 收藏 1
点赞数
原文链接：http://www.cnblogs.com/zhouqingfeng/p/11408183.html
版权

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)
 元素节点         1                        标签名                    null
 文本节点         3                        #text                    文本
 注释节点         8                        #comment                注释的文字
 文档节点         9                        #document                null    
 属性节点         2                        属性名                    属性值

 

转载于:https://www.cnblogs.com/zhouqingfeng/p/11408183.html

a315278631
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DOM选择器用法大全
qq_38110274的博客
11-03 3004
JS,选择器，DOM,document,节点，关系
精解Dom 选择器
M_DREAMER的博客
06-09 311
DOM定义Dom : 全称 Doncument Object ModelDOM定义了表示和修改文档所需方案。DOM 对象即为宿主对象。由浏览器的厂商定义，用来操作 html 和 xml 功能的一类对象的集合。也有人称DOM是对html和xml的标准编程接口。DOM不能操作css，但是DOM可以通过html 间接操作css（行间样式），但不能操作css样式表表。例如： var div = do...
JavaScript：DOM选择器
读心悦
10-23 1406
在通过id、name、class或者标签名来获取元素的时候，只能通过document来调用对应函数，在查找特定元素的时候可能不太方便，比如获取p元素的子元素。一、通过id定位元素，JavaScript提供了getElementById()函数来来查找对应的ID的元素的，返回的是匹配到ID的第一个元素。通过绑定不同的事件，就可以修改文档的结构、样式喝内容。，baseElement表示的是基准元素，常见的基准元素有document和element，selectors表示是一个标准的css选择器，
JavaScript--DOM选择器
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-14 922
1.Dom选择器 什么是DOM 文档对象模型（Document Object Model，简称DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者xhtml）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。 DOM是W3C组织制定的一套处理 html和xml文档的规范，所有的浏览器都遵循了这套标准。 DOM树 DOM树 又称为文档树模型，把文档映射成树形结构，通过节点对象对其处理，处理的结果可以加入到当前的页面。
超详细的原生DOM选择器教程手把手教你学会DOM
00后的一位普通处女座前端程序员
09-21 697
现在大部分都是使用vscode作为编辑器，但是由于vscode对bind语法支持不是很好所以导致bind语法之后代码提示消失，这十分不友好，所以我们可以制作一个回调函数来解决问题。就相当于宁可杀错不可放过，但是有个弊端，就是当一组标签里面子标签的class样式如果有其他的操作，也会被清除掉。接下来我们来演示一下，为div添加鼠标悬浮当事件触发时为元素添加元素是active的事件。// 通过bind方案来简化代码，但是由于vscode的支持不友好，所有导致代码提示消失。方案2：先找到高亮的选项然后再清除。
JavaScript实现自己的DOM选择器原理及代码
10-27
实现自己的DOM选择器时匹配行为也应该和浏览原生匹配行为一致,接下来本文将详细介绍下实现思路及方法，感兴趣的你可以参考下或许对你巩固知识有所帮助
Mootools 1.2教程(2) DOM选择器
09-05
今天开始本系列教程的第2讲。在这一讲中，我们会学习几种选择HTML元素的方法。在许多方面，这是MooTools用得最多最基本的。毕竟，要创建一个基于HTML元素的交互性用户体验，你必须首先把它们掌握在手中。
JavaScript实现DOM对象选择器
10-21
主要为大家详细介绍了JavaScript实现DOM对象选择器,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
dom选择器练习
02-13
DOM选择 如何从DOM中挑选元素。
DOM简介及选取元素(新手入门)
Bioye_的博客
11-05 2183
DOM 文档对象模型 JavaScript 通过 DOM (Document Object Model) 对浏览器中打开的网页文档进行修改. document 对象 浏览器窗口中的 网页文档, 被看成 DOM 模型的一个实例对象. document 对象 它属于 window 对象的 子对象 DOM模型呈现树状结构，因此也叫“树模型”，树中的内容（标签、属性、文本）称为“节点”，包含有元素节点（标签）、属性节点、文本节点。每个节点 都是一个dom节点对象。 选取DOM节点 遗留DOM ​ 早期
html原生选择器,HTML5:原生DOM选择器，类jquery
weixin_36410141的博客
06-03 166
1.querySelector()：返回匹配的第一个元素，若没有匹配项，返回null2.querySelectorAll()：返回匹配的元素集合，若没有匹配项，返回空的nodelist节点数组3.返回的结果是静态的，dom结构改变不会更新之前取到的结果浏览器支持：目前 IE8＋，ff，chrome 都支持此API(IE8中的selector string 只支持css2.1的)FeatureChr...
【JavaScript】DOM选择大全
叶遮沉阳的博客
07-30 341
1. getElementsByClassName 通过class类名获取元素。 示例： <div class="logom fl"></div> let logoAds = document.getElementsByClassName('logom'); console.log(logoAds[0].outerHtml); 返回HTMLCollection集合对象。 2. querySelectorAll 通过css选择器来获取元素。 可以根据自定义的属性来获取元素。 示例：
Dom常用选择器
weixin_44094720的博客
01-18 412
选择器 选择dom中的元素时，常用选择器： document.getElementById()；通过选择Id选择器，来选择标签。 document.getElementsByTagName()；通过标签名来选择标签。 document.getElementsByName()；通过name属性来选择标签。 document.getElementsByClassName()；通过Class选择器来选择标签。 document.querySelector()；可以像css一样，选择标签。eg:("#id")类似
JavaScript--13 DOM 选择符(id、class) 和元素替换
邪人君子的博客
10-21 651
本节目录一、选择符1.1 querySelector() 方法1.2 querySelectorAll() 方法 一、选择符 1.1 querySelector() 方法 querySelector()方法接收一个CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。 获取文档中第一个 <p>元素： document.querySelector("p...
JavaScript----DOM基础知识（四）DOM选择器
yufanhui的博客
07-20 246
JavaScript----DOM基础知识（四）DOM选择器 在DOM经常要选中标签，下面就详细介绍五种在DOM中的常规操作节点 1.直接查找 &lt;script type="text/javascript"&gt; //1.document.getElementById(''); var a = document.getElementById('div'...
http response 返回 没有内容_HTTP 教程2
weixin_36012152的博客
12-22 1282
前言最近公众号的推送机制有了新的改动，订阅号内显示的文章不再是按照时间来排序，而是根据用户常读或星标来推送公众号。这种情况下打开订阅号会先看到昨天甚至是前几天的文章，新发送的都在后面，这样一来大家可能会错过我们的精彩文章~所以如果大家觉得这个公众号不错并且对你有帮助的话，请大家点击公众号右上角的“星标”置顶公众号，每天第一时间获取更多优质资源！HTTP 请求方法根据 HTTP 标准，H...
JS几种DOM选择器总结
xmx1314520的博客
08-14 1778
document.querySelectorAll() 可以以ID丶类丶标签作为选择项，但是ID之前要加#选择，classname要加.选择，标签可以直接加，并且可以以数组的形式访问例如：document.querySelectorAll(‘.p’)[0] getElementByTagName()返回带有指定标签名的对象集合 file不是标签名 通过标签选择 getElementSByClas...
CSS选择器选中DOM节点的方式
最新发布
03-25
A：CSS选择器是一种用于选择DOM节点的方式。它基于节点的标记名称、类、ID、属性等特征来选择节点。 以下是一些常见的CSS选择器： - 标签选择器：按照标签名称来选择节点，例如```div```、```p```、```a```等。 - ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值