《JS高程(3)》DOM扩展-API选择符-第11章笔记(18)
来源:互联网 发布:mac如何访问共享文件夹 编辑:程序博客网 时间:2024/06/05 04:59
(最近有些私人的事,忍不住想念叨两句。今天雪格外的大,因为一些拖了很久的事,说不上来的抑郁,很多事到最后往往都是事与愿违。还是太软弱,一刀斩断就不会像现在这样割一次腐肉催眠自己一次了。要让自己强大起来,称为自己的依靠才不会失望!)
新的一天又开始,奋斗吧少年~
浏览器中几乎所有的DOM扩展都是专有的,对DOM的两个主要的扩展是SelectorsAPI(选择符API)和HTML5。还有Element Traversal (元素遍历)规范,为DOM添加了一些属性。
选择符API
JavaScript库中最常用的一项功能,就是根据CSS选择符选择与某个模式匹配的DOM元素。
JQuery的核心就是通过CSS选择符查询DOM文档取得元素的引用,从而抛开了getElementById()和getElementTagName().
Selectors API是由W3C发起定制的一个标准,致力于让浏览器原生支持CSS查询。所有实现这一功能的JavaScript库都会写一个基础的CSS解析器,然后再使用已有的DOM方法查询文档并找到匹配的节点。
Selectors API Level 1的核心是两个方法:
querySelector()方法
querySelectorAll()方法
通过Document和Element类型调用他们。
querySelector()方法
querySelector()方法接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有,返回null:
//取得body元素var body = document.querySelector("body");//取得ID为"myDiv"的元素var selected = document.querySelector("#myDiv");//取得类为"selected"的第一个元素var selected = document.querySelector(".selected");//取得类为"button"的第一个图像元素var img = document.body.querySelector("img.buttom")
通过Document类型调用querySelector()方法时,会在文档元素的范围内查找匹配的元素。
通过Element类型调用querySelector()方法时,只会在该元素后代元素的范围内查找匹配的元素。
querySelectorAll()方法
querySelectorAll()方法接受一个CSS选择符,返回与该模式匹配的所有元素,返回一个带有所有属性和方法的NodeList实例,而底层实现则类似于一组元素的快照,而并非不断对文档进行搜索的动态查询。
//取得某<div>中的所有<em>元素(类似于getElementsByTagName("em"))var ems = document.getElementById("myDiv").querySelectorAll("em");//取得类为"selected"的所有元素var selecteds = document.querySelectorAll(".selected");//取得所有<p>元素中分的所有<strong>元素var strongs = document.querySelectorAll("p strong");
要取得返回的NodeList中的每一个元素,可以使用item()方法,或者[]:
var i, len, strong;for (i = 0, len = strongs.length; i < len; i++){ //或者strong.item(i) strong = strong[i]; strong.className = "important";}
与querySelector()类似,如果传入了浏览器不支持的选择符或者选择符中有语法错误,querySelectorAll()会抛出错误。
matchesSelector()方法
Selectors API Level 2规范为Element类型新增了一个方法matcherSelector()。
参数:一个css选择符;
返回值:调用元素与该选择符匹配,返回true,否则,返回false。
if (document.body.matcherSelector("body.page1")){ //true}
在取得某个元素引用的情况下,使用这个方法能够方便的检测它是否能被querySelector()或querySelectorAll()方法返回。
包装函数:
function matchesSelector(element, selector){ if(element.matcherSelector){ return element.matchesSelector(selector); }else if(element.msMatcherSelector){ return element.msMatchesSelector(selector); }else if(element.mozMatcherSelector){ return element.mozMatchesSelector(selector); }else if(element.webMatcherSelector){ return element.webMatchesSelector(selector); }else{ throw new Error("Not supported."); }}if(matcherSelector(document.body, "body.page1")){ //执行操作}
- 《JS高程(3)》DOM扩展-API选择符-第11章笔记(18)
- 《JS高程(3)》DOM扩展-专有扩展-第11章笔记(21)
- 《JS高程(3)》DOM扩展-元素遍历-第11章笔记(19)
- 《JS高程(3)》DOM扩展-HTML5-第11章笔记(20)
- 《JS高程(3)》DOM节点层次Node类型-第10章笔记(11)
- 《JS高程(3)》DOM节点层次Document类型-第10章笔记(12)
- 《JS高程(3)》DOM节点层次Element类型-第10章笔记(13)
- 《JS高程(3)》DOM节点层次Text类型-第10章笔记(14)
- 《JS高程(3)》DOM节点层次Comment类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次CDATASection类型-第10章笔记(15)
- 《JS高程(3)》DOM节点层次DocumentType类型-第10章笔记(16)
- 《JS高程(3)》DOM操作技术-第10章笔记(17)
- 《JS高程(3)》DOM2和DOM3-DOM变化-第12章笔记(22)
- DOM扩展 ---高程笔记
- 《JS高程(3)》-第6章笔记(01)
- 《JS高程(3)》-第6章笔记(02)
- 《JS高程(3)》-第6章笔记(03)
- 《JS高程(3)》原型链继承模式 -第6章笔记(04)
- jquery之ajaxfileupload异步上传插件
- django-rest-framework Bulk operations
- Linux GCC常用命令
- Android App 评价/跳转到应用市场
- 很全很强大国内值得关注的官方API集合(太幸福啦)
- 《JS高程(3)》DOM扩展-API选择符-第11章笔记(18)
- C++学习一虚函数的实现方式
- 文章标题
- easyui datagrid load 参数表单序列化
- Key Concepts (Mastering CMake)
- springmvc--ResponseStatus注解处理异常
- 【Bzoj1083】繁忙的都市
- nil与null的区别
- 学习Hibernate_04_Hibernate参数设置一览表