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;
}

DOM扩展-Selectors API(选择符 API)、元素遍历的更多相关文章

  1. Javascript高级编程学习笔记(46)—— 选择符API

    选择符API 在DOM1中DOM只提供了 getElementById.getElementsByTagName 两种获取文档元素的方法 很多时候这两种方法往往不能较为方便地获取我们所需要的元素 所以 ...

  2. 选择符API

    querySelector() querySelector()方法接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. //获得body元素 var body = ...

  3. ASP.NET Web API——选择Web API还是WCF

    WCF是.NET平台服务开发的一站式框架,那么为什么还要有ASP.NET Web API呢?简单来说,ASP.NET Web API的设计和构建只考虑了一件事情,那就是HTTP,而WCF的设计主要是考 ...

  4. JavaScript基础笔记(八)DOM扩展

    DOM扩展 一.选择符API Selectors API是由W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询. 一)querySelector() 在Document和Element类型实例 ...

  5. 11. javacript高级程序设计-DOM扩展

    1. DOM扩展 1.1 选择符API l querySelector() 接收一个css选择符,返回与该模式匹配的第一个元素 l querySelectorAll() 接收一个css选择符,返回所有 ...

  6. js学习笔记----JavaScript中DOM扩展的那些事

    什么都不说,先上总结的图~   Selectors API(选择符API) querySelector()方法 接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null ...

  7. DOM扩展:DOM API的进一步增强[总结篇-下]

    本文承接<DOM扩展:DOM API的进一步增强[总结篇-上]>,继续总结DOM扩展相关的功能和API. 3.6 插入标记 DOM1级中的接口已经提供了向文档中插入内容的接口,但是在给文档 ...

  8. 《JAVASCRIPT高级程序设计》DOM扩展

    虽然DOM为XML及HTML文档交互制定了一系列的API,但仍然有几个规范对标准的DOM进行了扩展.这些扩展中,有很多是浏览器专有的,但后来成了事实标准,于是其他浏览器也提供了相同的实现:浏览器开发商 ...

  9. DOM 扩展

    1.选择符API,selectors API 可以使用CSS选择符匹配查找节点 1)  querySelector(selector),接受一个CSS选择符,返回调用该函数的节点后代中第一个匹配的元素 ...

随机推荐

  1. js基础3

    内置对象 内置对象就是JS提供的一套工具箱,我们通过内置可以很方便的进行一些操作. Math对象: Math.ceil() //向上取整,天花板 Math.floor() //向下取整,地板 Math ...

  2. C++:为什么说 goto 没有用

    要了解一个功能有没有用,首先应该分析它能实现的所有功能. goto 可以实现的功能只有两种:一,向前面跳:二,向后面跳.这两种情况对应三种功能:一,重复执行也就是循环:二,跳过一段代码也就是条件判断: ...

  3. Android与H5交互

    1.初始化WebView控件 webView = (WebView) findViewById(R.id.webview); 2.设置WebView属性 WebSettings webSettings ...

  4. linux 多线程基础

    参考出处:http://www.cnblogs.com/skynet/archive/2010/10/30/1865267.html 1.进程与线程 进程是程序代码在系统中的具体实现.进程是拥有所需资 ...

  5. POS与EPOS区别

    本文分文三个部分来介绍,第一部分是两个概念(POS与EPOS),第三部分是 POS与EPOS的区别. 一.epos ( electronic point of sale ) 俗称电话pos机: .EP ...

  6. ORA-01861: 文字与格式字符串不匹配

    问题:插入数据不成功 解决:借口实现类里面的sql语句带值放到数据库中运行,如果不成功是sql语句的错误.

  7. SQL Server出现错误: 4014

    SQL Server出现错误: 4014 线下的测试机器老是报错,从errorlog里看到大量的4014错误 A fatal error occurred , output error: ). 错误: ...

  8. .Net组件程序设计之远程调用(一)

    .Net组件程序设计之远程调用(一) 1应用程序域 我们知道我们写的C#代码是在操作系统逻辑体系结构中最上层的,然而操作系统本身是不会认识C#代码的,它只认识机器代码.那我们写的程序经过编译后是编译成 ...

  9. CLR via C# 学习计划

    本书是学习c#的人必读书,计划今年完成,读透. 书是在亚马逊买的,虽然有点小贵,但是为了情怀,咬咬牙买了. 需要学习的: CLR基础 (CH1-CH3) 设计类型 (CH4-CH13) 基本类型 (C ...

  10. [SDK2.2]SQL Azure (13) Azure的两种关系型数据库服务:SQL Azure与SQL Server VM的不同

    <Windows Azure Platform 系列文章目录> 如果熟悉Windows Azure平台的用户不难发现,对于SQL Server数据库来说,微软提供了两种服务,分别是: -W ...