DOM扩展-Selectors API(选择符 API)、元素遍历
DOM扩展
对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5
SelectorsAPI(选择符API)是由W3C发起制定的一个标准,致力于浏览器原生支持CSS查询,SelectorsAPILevel 1的核心是两个方法:querySelector()和querySelectorAll(),可以通过Document及Element类型的实例调用他们。
querySelector()方法接受一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。
//取得body元素
var body = document.querySelector('body');
//取得ID为"myDiv"的元素
var myDiv = document.querySelector('#myDiv');
//取得类为"selected"的第一个元素
var selected = document.querySelector('.selected');
//取得类为"button"的第一个图像元素
var img = document.body.querySelector('img.button');
通过Document类型调用querySelector()方法时,会在文档元素的范围内查找匹配的元素。而使用Element类型调用querySelector()方法时,会在该元素的后代元素中查找匹配的元素。
querySelectorAll(),接受的参数是一个CSS选择符,返回的是所有匹配元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
//取得某<div>中的所有<em>元素
var em = document.getElementById('myDiv').querySelectorAll('em');
//取得类为"selected"的所有元素
var selected = document.querySelectorAll('.selected');
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll('p strong');
要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法,比如:
var i,len,strong;
for(i=0,len=strong.length;i<len;i++){
strong = strong[i]; //或者strong.item(i)
strong.chassName = 'important';
}
matchesSelector(),接受一个参数,即CSS选择符,如果调用元素与该选择符匹配,返回true;否则,返回false。这是Selectors API Level 2 规范为Element类型新增的一个方法。
但是现在这个方法还没有得到所有浏览器的支持,所以要想使用这个方法,最好是编写一个包装函数。
function matchesSelector(element,selector){
if(element.matchesSelector){
return element.matchesSelector(selector);
}else if(element.msMatchesSelector){ //IE 9+
return element.msMatchesSelector(selector);
}else if(element.mozMatchesSelector){ //Firefox 3.6+
return element.mozMatchesSelector(selector);
}else if(element.webKitMatchesSelector){ //Safari 5+和Chrome
return element.webKitMatchesSelector(selector);
}else {
throw new Error("Not supported.");
}
} if(matchesSelector(document.body,"body.page1")){
//执行操作
}
对于元素间的空格,IE9及之间版本不会返回文本节点,而其他浏览器都会返回文本节点。这样就导致了在使用childNodes和firstChild等属性时的行为不一致。为了弥补这一差异,而同时又保持DOM规范不变,Element Traversal规范新定义了一组属性。
childElementCount:返回子元素的个数
firstElementChild:指向第一个子元素;firstChild的元素版
lastElementChild:指向最后一个子元素;lastChild的元素版
previorsElementSibling:指向前一个同辈元素;previousSibling的元素版
nextElementSibling:指向后一个同辈元素;nextSibling的元素版
利用这些元素不必担心空白文本节点,从而可以更方便的查找DOM元素了。
过去,要跨浏览器遍历某个元素的所有子元素,需要下面这样写代码
var i,
len,
child = element.firstChild;
while(child != element.lastChild){
if(child.nodeType == 1){
processChlid(child);
}
child = child.nextSibling;
}
而使用Element Traversal新增的元素,代码会更简洁。
var i,
len,
child = element,firstElementChild;
while(child != element.lastElementChild){
processChild(child);
child = child.nextElementSibling;
}
最新文章
- 数据图表插件Echarts(一)
- OS.js – 开源的 Web OS 系统,赶快来体验
- 【学】React的学习之旅1
- 1.kvm的基本搭建
- js中操作数组的一些方法【转】
- MVC中视图View向控制器传值的方法
- 【PSR规范专题(3)】PSR-2 代码风格规范
- 打开已存在 Android项目及常见的问题
- linux 定时任务计划
- RTP/RTCP/RTSP/RSVP/SDP
- [转]如何正确设置nginx中remote_addr和x_forwarded_for参数
- mssql索引使用情况查询
- iOS开发实现Label中多颜色多字体
- Angular中 build的时候遇到的错误--There are multiple modules with names that only differ in casing
- Breastcancer社区评论下载
- CF429E Points and Segments 构造、欧拉回路
- oracle跨库连接查询
- 195. Spring Boot 2.0数据库迁移:Flyway
- nginx 深入篇
- SVG2PNG(前台和后台将SVG转换为PNG)--amcharts导出png
热门文章
- POJ 3233Matrix Power Series
- mysql获取自增长插入行的ID
- Python语言中对于json数据的编解码——Usage of json a Python standard library
- spark 大数据 LR测试
- PAT Judge
- VB.net 2010下关联与程序图标设置
- Android课程---序列化与反序列化(转)
- LogStash-2.4.0自定义区域信息插件-ISP
- 搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境
- 使用密码记录工具keepass来保存密码