在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id 等方式来查找,这显然是远远不够的,如果想要进行更为精确的选择不得不使用看起来非常繁琐的正则表达式,或者使用某个库。事实上,现在所有的浏览器厂商都提供了 querySelector 和 querySelectorAll 这两个方法的支持,甚至就连微软也派出了 IE 8 作为支持这一特性的代表,querySelector 和 querySelectorAll 作为查找 DOM 的又一途径,极大地方便了开发者,使用它们,你可以像使用 CSS 选择器一样快速地查找到你需要的节点。

  querySelector

querySelector 和 querySelectorAll 的使用非常的简单,就像标题说到的一样,它和 CSS 的写法完全一样,对于前端开发人员来说,这是难度几乎为零的一次学习。假如我们有一个 id 为 test 的 DIV,为了获取到这个元素,你也许会像下面这样:

  document.getElementById("test");

现在我们来试试使用新方法来获取这个 DIV:

  document.querySelector("#test");
document.querySelectorAll("#test")[0];

获取文档中 class=”example” 的第一个

元素:

  document.querySelector("p.example");

获取文档中有 “target” 属性的第一个 元素:

  document.querySelector("a[target]");

使用这两个方法无法查找带伪类状态的元素,比如querySelector(':hover')不会得到预期结果。

  querySelectorAll

该方法返回所有满足条件的元素,结果是个nodeList集合。查找规则与前面所述一样。

elements = document.querySelectorAll('div.foo');//返回所有带foo类样式的div

但需要注意的是返回的nodeList集合中的元素是非实时(no-live)的,想要区别什么是实时非实时的返回结果,请看下例:

  <div id="container">
<div></div>
<div></div>
</div>

//首先选取页面中id为container的元素

container=document.getElementById('#container');

console.log(container.childNodes.length)//结果为2

//然后通过代码为其添加一个子元素

  container.appendChild(document.createElement('div'));

//这个元素不但添加到页面了,这里的变量container也自动更新了

console.log(container.childNodes.length)//结果为3

通过上面的例子就很好地理解了什么是会实时更新的元素。document.getElementById返回的便是实时结果,上面对其添加一个子元素后,再次获取所有子元素个数,已经由原来的2个更新为3个(这里不考虑有些浏览器比如Chrome会把空白也解析为一个子节点)。

感觉区别不大是吧,但如果是稍微复杂点的情况,原始的方法将变得非常麻烦,这时候 querySelector 和 querySelectorAll 的优势就发挥出来了。比如接下来这个例子,我们将在 document 中选取 class 为 test 的 div 的子元素 p 的第一个子元素,当然这很拗口,但是用本文的新方法来选择这个元素,比用言语来描述它还要简单。

  document.querySelector("div.test>p:first-child");
document.querySelectorAll("div.test>p:first-child")[0];

我们使用 querySelectorAll 给所有 class 为 emphasis 的元素加粗显示。

  var emphasisText = document.querySelectorAll(".emphasis");
for( var i = 0 , j = emphasisText.length ; i < j ; i++ ){
emphasisText[i].style.fontWeight = "bold";
}

这是原生方法,比起jquery速度快

注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素,请使用 querySelectorAll() 方法替代。

原生DOM选择器querySelector和querySelectorAll的更多相关文章

  1. 强大的原生DOM选择器querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  2. 原生JS强大DOM选择器querySelector与querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  3. DOM API querySelector与querySelectorAll的用法

    DOM API querySelector与querySelectorAll的用法:  http://www.qttc.net/201309371.html querySelectorAll与quer ...

  4. 原生的强大DOM选择器querySelector - querySelector和querySelectorAll

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  5. 原生的强大DOM选择器querySelector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  6. 【前端】强大的javascript原生选择器querySelector 和 querySelectorAll

    querySelector 和 querySelectorAll 在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 D ...

  7. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  8. js高级选择器querySelector和querySelectorAll

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  9. 关于一个新的DOM选择器querySelector

    在传统的javascript中,提到DOM选择器,大家比较熟悉的方式是通过tag,name,id来获取,其实大家都发现如果获取比较复杂的话,用这个方法会很繁琐,这时大家应该都会想到jquery里获取一 ...

随机推荐

  1. IntelliJ IDEA 详细图解最常用的配置 ,适合新人,解决eclipse转idea的烦恼

    刚刚使用IntelliJ IDEA 编辑器的时候,会有很多设置,会方便以后的开发,磨刀不误砍柴工. 比如:设置文件字体大小,代码自动完成提示,版本管理,本地代码历史,自动导入包,修改注释,修改tab的 ...

  2. 总结:Bias(偏差),Error(误差),Variance(方差)及CV(交叉验证)

    犀利的开头 在机器学习中,我们用训练数据集去训练(学习)一个model(模型),通常的做法是定义一个Loss function(误差函数),通过将这个Loss(或者叫error)的最小化过程,来提高模 ...

  3. HDU2896:病毒侵袭(AC自动机)

    病毒侵袭 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  4. NYOJ 745 dp

    蚂蚁的难题(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3   描述 下雨了,下雨了,蚂蚁搬家了. 已知有n种食材需要搬走,这些食材从1到n依次排成了一个圈.小蚂蚁对每种 ...

  5. like tp

    $where['insurance_order_num'] = array('like',$insurance_order_num.'%'); //右边模糊搜索,2099032902309张三 和 2 ...

  6. ExecuteNonQuery,ExecuteReader,ExecuteScalar 区别

    ExecuteNonQuery方法 :执行非查询SQL操作,包括增insert.删delete.改update ExcuteReader方法 :执行查询,返回DataReader,通过DataRead ...

  7. Spring structs2 hibernate 整合(ssh)

    ssh项目jar包 项目内容: 1. 加入 Spring 1). 加入 jar 包2). 配置 web.xml 文件3). 加入 Spring 的配置文件.(application.xml) 2. 加 ...

  8. MSSQL Procudure Sample

    代码: USE [Internal_Timesheet] GO /****** Object: StoredProcedure [dbo].[ManageTSReminder] Script Date ...

  9. pyttsx3 winsound win32api.MessageBox使用案例

    import requests,time from lxml import etree import win32api,win32con import winsound import pyttsx3 ...

  10. ssh连接提示 "Connection closed by remote host"

    如果原来是可以用ssh连接的, 突然连接不上通常是连接数过多导致的. 解决方法一. 把SSH连接数改大 修改服务器上的这个文件:/etc/ssh/sshd_config 找到这行: # MaxSess ...