《JavaScript高级程序设计》第11章（DOM扩展）—— 读书笔记

DOM扩展

1、选择符API

Selectors APILevel1 的核心是两个方法：querySelector()和querySeletorAll()

1.1、querySelector()方法

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.querySelector("img.button");

通过document类型调用querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过Element类型调用querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
css选择符可以简单也可以复杂，视情况而定。如果传入了不被支持的选择符，querySelector()会抛出异常

1.2、querySelectorAll()方法

接收参数与querySelector()方法一样，都是一个css选择符，但返回的是所有匹配的元素而不仅仅是一个元素。这个方法返回的是一个NodeList的实例。
具体来说，返回的值实际上是带有所有属性和方法的NodeList，而其实底层实现则类似于一组元素的快照，而非不断对文档进行搜索的动态查询。这样实现可以避免使用NodeList对象通常会引起的大多数性能问题
能够调用querySelectorAll()方法的类型包括Document、DocumentFragment和Element。看下面的例子

//取得某<div>中的所有<em>元素（类似于getElementByTagName('em')）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为".selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有<p>元素中的所有<strong>元素
var strongs = document.querySelectorAll("p strong");

2、元素遍历

Element Traversal API为DOM元素添加了一下5个属性

1. childElementCount：返回子元素（不包含文本节点和注释）的个数
2. firstElementChild：指向第一个子元素
3. lastElementChild：指向最后一个子元素
4. previousElementSibling：指向前一个同辈元素

5. nextElementSibling：指向后一个同辈元素

   3、自定义数据属性

   HTML5规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以data-开头即可。来个例子

<div id="myDiv" data-appId="12345" data-myname="Tony"></div>

添加了自定义属性后，可以通过元素的dataset属性来访问自定义属性的值。dataset属性的值是DOMStringMap的一个实例，也就是一个键值对的映射。在这个映射中，每个data-name形式的属性都会有一个对应的属性，只不过属性名没有data-前缀。

var div = document.getElementById("myDiv");

//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;

//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Jue";

//有没有myname值呢？
if(div.dataset.myname){
    alert("hello," + div.dataset.myname);
}

如果需要给元素添加一些不可见的数据以便进行其他处理，那就要用到自定义数据属性

3、DOM2样式属性和方法

1. cssText：通过他能访问到style特性中的css代码
2. length：应用给元素的css属性的数量
3. getPropertyCSSValue（propertyName）：返回包含给定属性值的CSSValue对象
4. getPropertyPriority（propertyName）：如果给定的属性使用了 !important设置，则返回”important”，否则，返回空字符串
5. getPropertyValue（propertyName）：返回给定属性的字符串值
6. item（index）：返回给定位置的css属性的名称
7. removeProperty（propertyName）：从样式中删除给定属性
8. setProperty（propertyName,value,priority）：将给定属性设置为相应的值，并加上优先权标志（”important”或者一个空字符串）