JavaScript高级程序设计27.pdf
第11章 DOM扩展
W3C将一些已经成为事实标准的专有扩展标准化并写入规范当中。对DOM的两个主要扩展是SelectorsAPI(选择符API)和HTML5
选择符API
就是根据CSS选择符选择与某个模式匹配的DOM元素,SelectorsAPI是W3C发起制定的一个标准,致力于让浏览器原生支持CSS查询,极大改善了性能
Selectors API Level 1的核心是两个方法querySelector()和querySelectorAll()
querySelector()方法
它接收一个CSS选择符,返回与该模式匹配的第一个元素,如果没找到则返回null
var body=document.querySelector("body"); //取得body元素
var myDiv=document.querySelector("#myDiv"); //取得ID为"myDiv"的元素
通过Document类型调用querySelector()方法会在文档元素范围内查找匹配的元素,通过Element类型调用querySelector()方法只会在该元素后代元素范围内查找匹配的元素,如果传入了不被支持的选择符,querySelector()会抛出错误
querySelectorAll()
该方法与querySelector()类似,不过它返回的是带有所有属性和方法的NodeList对象,其底层是类似一组元素的快照,而非对文档进行搜索的动态查询,这样可以避免大多数性能问题
//取得某<div>中所有的<em>元素
var ems=document.getElementById("myDiv").querySelectorAll("em");
方括号和item()方法取得NodeList里的某个元素
matchesSelector()方法
Selectors API Level 2规范为Element类型新增了matchesSelector()方法,这个方法接收一个参数,即css选择符,如果调用元素与该选择符匹配,返回true,否则返回false
if(document.body.matchesSelector("body.page1")){
//true
}
元素遍历
对于元素间的空格,IE9及之前版本不会返回文本节点,其他浏览器都会返回文本节点,这样导致使用childNodes和firstChild等属性时的行为不一致,Element Traversal新定义了一组属性,只可以在IE9之后的版本使用......
HTML5
getElementsByClassName()方法
它接收一个参数即包含一个或者多个类名,返回带有指定类的所有元素的NodeList,传入多个类名时,类名的先后顺序不重要
var item1=document.getElementsByClassName("mydiv class1");
classList属性
JavaScript高级程序设计27.pdf的更多相关文章
- JavaScript高级程序设计12.pdf
第六章 面向对象的程序设计 ECMA中有两种属性:数据属性和访问器属性 数据属性的特性 [[Configurable]] 表示是否通过delete删除属性,是否重新定义属性,是否能把属性修改为访问器属 ...
- JavaScript高级程序设计61.pdf
JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...
- JavaScript高级程序设计60.pdf
错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...
- JavaScript高级程序设计58.pdf
15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...
- JavaScript高级程序设计57.pdf
表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...
- JavaScript高级程序设计55.pdf
输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...
- JavaScript高级程序设计54.pdf
过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...
- JavaScript高级程序设计53.pdf
共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...
- JavaScript高级程序设计52.pdf
表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...
随机推荐
- starling 中的 EventDispatcher 和 Flash中原生的 EventDispatcher
starling 比较早之前就有开始解了,但只到最近参与一个用starling 做为框架的手游项目才真正做为一程来使用它. 项目也是刚开始搭建,在这做些笔记. 在写一个管理类时, 遇到 starlin ...
- 常用js函数
1.获得元素到页面的绝对距离 function getPos(obj) { var pos = {left:0, top:0}; while (obj) { pos.left += obj.offse ...
- jquery完善的处理机制
使用jQuery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简洁得多,而且还能避免某些错误.请看下面例子: <script> d ...
- centos7.0安装docker报错
使用centos7.0安装dockers时出现Transaction check error错误. yum install docker Transaction check error: file / ...
- php异步请求(可以做伪线程)
$fp = fsockopen("www.baidu.com", 80, $errno, $errstr, 30); stream_set_blocking($fp,0); ...
- C的快速趋向实验 -->
今天刚学到C的一个新玩法,非常有意思,叫趋向于,写作“-->”,比如说如果要实现一个倒数的程序,我们可以定义一个变量 counter,然后让它趋向于0... #include <stdio ...
- ∑–△型模数转换器(ADC)简介
∑–△型模数转换器(ADC) 1.概述 近年来,随着超大规模集成电路制造水平的提高,Σ-Δ型模数转换器正以其分辨率高.线性度好.成本低等特点得到越来越广泛的应用.Σ-Δ型模数转换器方案早在20世纪60 ...
- 提交App Store注意事项1
1.未遵守苹果iOS APP数据储存指导方针. 如果你的App有离线数据下载功能,尤其需要关注这一点.因为离线数据一般占用存储空间比较大,可以被重新下载和重建,但是用户往往希望系统存储空间紧时也依然能 ...
- BZOJ 1711: [Usaco2007 Open]Dingin吃饭
Description 农夫JOHN为牛们做了很好的食品,但是牛吃饭很挑食. 每一头牛只喜欢吃一些食品和饮料而别的一概不吃.虽然他不一定能把所有牛喂饱,他还是想让尽可能多的牛吃到他们喜欢的食品和饮料. ...
- [原博客] HEOI2014 行记
HEOI: 河北省信息学竞赛省队选拔赛 HEOI数据标程下载 百度盘 http://pan.baidu.com/s/1qWx7YAo 又到了一年一度的HEOI呢. 我果然还是太弱了呢. Day0 报到 ...