js011-DOM扩展
js011-DOM扩展
本章内容
理解Selecters API
使用HTML5 DOM扩展
了解转悠的DOM扩展
11.1选择符API
JS中最常用的一项功能，就是根据css选择符选择与某个模式匹配的DOM元素。
11.1.1 querySlector()方法
该方法接收一个css选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null
|
取得body元素 |
|
var body = document.querySlector("body"); |
|
取得id为myDiv的元素 |
|
var myDiv = document.querySlector("#myDiv"); |
|
取得类为slected的元素 |
|
var slected = document.querySlector(".slected"); |
|
取得类为button的第一个图像元素 |
|
var button = document.querySlector("img.button"); |
11.1.2 querySlectorAll()方法
接收的参数和querySlector()一样，但是返回的不仅不仅是一个元素，而是一个NodeList的实例。
与
querySlector()一样能够调用querySlectorAll()方法的有document，element，DocumentFragment。例子如上面例子类似。
11.1.3 matchSlector()方法
该方法能接收一个参数：css操作符，如果调用元素与该选择符匹配，则返回true，否则返回false
11.2 元素遍历
Element Travesal规范新定义了一组属性。
Element Travesal API为DOM 元素新定义了一下5个属性：
|
childElementCount |
返回子元素（不包括文本节点和注释）的个数 |
|
firstElementChild |
指向第一个子元素；firstchild的元素版 |
|
lastElementChild |
指向最后一个子元素；lastchild的元素版 |
|
preciousElementSibling |
指向前一个同辈元素preciousSibling的元素版 |
|
nextElementSibling |
指向后一个同辈元素nextSibling的元素版 |
利用这些属性就不必担心空白文本节点，从而可以方便的查找DOM元素了、。
11.3 HTML5
11.3.1与类相关的扩充
1、getElementBYClassName()方法：接收一个参数：一个包含一个或多个类名的字符串，返回带有指定类的元素的NodeList，传入多个类是，类名的先后顺序不重要
2、classList属性
在操作类名时，需通过className属性添加、删除和替换类名，所以className是一个字符串，所以即使值修改字符串一部分，也必须每次都是指整个字符串的值。
11.3.2焦点管理
11.3.3 HTMLDocument的变化
1、readyState属性
两个可能值：
loading：正在加载文档；
complete：已经加载完文档。
2、兼容模式
3、head属性
作为对document.body引用过得文档<body>元素的不重，HTML5新增了document.head属性，引用文档的<head>元素
11.3.4字符集属性
charset属性
11.3.5自定义数据属性
添加非标准属性，前面添加前缀data-
11.3.6插入标记
1、inherHTML 属性
在读模式下，inherHTML属性返回与调用原色的所有子节点对应的HTML标记，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素原先的所有子节点。
2、outerHTML属性
在读模式下，outerHTML属性返回与调用原色的所有子节点对应的HTML标签，在写模式下，inherHTML会根据指定的值，创建新的DOM树，然后用这个DOM树完全替换调用元素。
3、insertAdjacentHTML()方法
该方法接收两个参数：插入位置和要插入的HTML文本，第一个参数必须是以下值之一：
|
beforebegin |
在当前元素之前插入一个紧邻的同辈元素； |
|
afterbegin |
在当前元素之下插入一个新的子元素或在第一个元素之前再插入一个新的子元素； |
|
beforeend |
在当前元素之下插入一个新的子元素或在最后一个元素之前再插入一个新的子元素； |
|
afterend |
在当前元素之后插入一个紧邻的同辈元素； |
4、内存与性能问题
11.3.6 scrollIntoView()方法
页面滚动
11.4 专有扩展
11.4.1文档模式
11.4.2 children属性
11.4.3 contains()方法
11.4.4插入文本
1、innerText属性，可以操作元素中包含的所有文本内容，包括子文档树种的文本。
2、outerText属性
作用范围扩大到调用它的节点。其余的和innerText属性相似
11.4.5滚动
好冻。手已经冻的没办法正常打字了。。。
原文地址：http://www.cnblogs.com/lal-fighting/p/5155276.html
