1### Menu
第11 章 DOM 扩展
11.1.1 querySelector()方法
11.1.2 querySelectorAll()方法
11.1.3 element.matches() element.webkitMatchesSelector()方法
11.2 元素遍历
HTML5 - 11.3.1 与类相关的扩充
HTML5 - 11.3.2 焦点管理
HTML5 - 11.3.3HTMLDocument的变化
HTML5 - 11.3.4 字符集属性
HTML5 - 11.3.5 自定义数据属性
HTML5 - 11.3.6 插入标记
-
- innerHTML 属性
-
- outerHTML 属性
-
- insertAdjacentHTML()方法
-
- 内存与性能问题
11.4 专有扩展
- 11.4.1 文档模式
- 11.4.2 children属性
- 11.4.3 contains()方法 & compareDocumentPosition()方法
- 11.4.4 插入文本
- 1. innerText 属性
- 2. outerText 属性 - 11.4.5 滚动
第12 章 DOM2 和DOM3
12.2 样式
- 12.2.1 访问元素的样式
-
- DOM 样式属性和方法
-
- 计算的样式
-
- 12.2.2 操作样式表
-
- CSS 规则
-
- 创建规则
-
- 删除规则
-
- 12.2.3 元素大小
-
- 偏移量
-
- 客户区大小
-
- 滚动大小
-
- 确定元素大小
-
- 12.3 遍历
- 12.3.1 NodeIterator
- 12.3.2 TreeWalker
- 12.4 范围
- 12.4.1 DOM中的范围
-
- 用 DOM 范围实现简单选择
-
- 用 DOM 范围实现复杂选择
-
- 操作 DOM 范围中的内容
-
- 插入 DOM 范围中的内容
-
- 折叠 DOM 范围
-
- 比较 DOM 范围
-
- 复制 DOM 范围
-
- 清理 DOM 范围
-
- 12.4.1 DOM中的范围
-
11.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.body.querySelector("img.button");
- 通过 Document 类型调用 querySelector()方法时，会在文档元素的范围内查找匹配的元素。而通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。
- CSS 选择符可以简单也可以复杂，视情况而定。如果传入了不被支持的选择符， querySelector()会抛出错误。
-
11.1.2 querySelectorAll()方法
- querySelectorAll() 方法接收的参数与 querySelector()方法一样，都是一个 CSS 选择符，返回的是一个 NodeList 的实例。
- 只要传给 querySelectorAll()方法的 CSS 选择符有效，该方法都会返回一个 NodeList 对象，而不管找到多少匹配的元素。如果没有找到匹配的元素， NodeList 就是空的。
- 与 querySelector()类似，能够调用 querySelectorAll()方法的类型包括 Document、DocumentFragment 和 Element。
//取得某中的所有元素（类似于 getElementsByTagName("em")）
var ems = document.getElementById("myDiv").querySelectorAll("em");
//取得类为"selected"的所有元素
var selecteds = document.querySelectorAll(".selected");
//取得所有元素中的所有元素
var strongs = document.querySelectorAll("p strong");
- 要取得返回的 NodeList 中的每一个元素，可以使用 item()方法，也可以使用方括号语法
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong = strongs[i]; //或者 strongs.item(i)
strong.className = "important";
}
11.1.3 element.matches() element.webkitMatchesSelector()方法
- 这个方法接收一个参数，即 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
- 在取得某个元素引用的情况下，使用这个方法能够方便地检测它是否会被 querySelector() 或 querySelectorAll()方法返回。
- webkitMatchesSelector() // 除了IE其它浏览器用这个方法match
- msMatchesSelector()：IE浏览器用这个方法
if (document.body.webkitMatchesSelector("body.page1")){
//true
}
-
11.2 元素遍历
- 在使用 childNodes时会返回除了元素节点以外的所有节点，为了弥补这一差异，而同时又保持 DOM 规范不变， Element Traversal 规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性。
- Element Traversal API 为 DOM 元素添加了以下 5 个属性。
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild：指向第一个子元素； firstChild 的元素版。
- lastElementChild：指向最后一个子元素； lastChild 的元素版。
- previousElementSibling：指向前一个同辈元素； previousSibling 的元素版。
- nextElementSibling：指向后一个同辈元素； nextSibling 的元素版。
支持的浏览器为 DOM 元素添加了这些属性，利用这些元素不必担心空白文本节点
-
HTML5 - 11.3.1 与类相关的扩充
- 1. getElementsByClassName()方法
- 可以通过 document对象及所有 HTML 元素调用该方法；
- getElementsByClassName()方法接收一个参数，该参数可以是一个或多个类名字符串，通过空格分隔；
- 该方法会返回element或document的后代元素中匹配的元素，返回的是NodeList动态集合类型；
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
- 2. classList 属性
- 通过 className 属性为element添加、删除和替换类名。
- 这个 classList 属性是新集合类型 DOMTokenList 的实例。与其他 DOM 集合类似；
- DOMTokenList 有一个表示自己包含多少元素的 length 属性，而要取得每个元素可以使用 item()方法，也可以使用方括号语法。此外，这个新类型还定义如下方法。
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
//删除"disabled"类
div.classList.remove("disabled");
//添加"current"类
div.classList.add("current");
//切换"user"类
div.classList.toggle("user");
//确定元素中是否包含既定的类名
if (div.classList.contains("bd") && !div.classList.contains("disabled")){
//执行操作
)
//迭代类名
for (var i=0, len=div.classList.length; i < len; i++){
doSomething(div.classList[i]);
}
HTML5 - 11.3.2 焦点管理
- document.activeElement 属性，这个属性始终会引用 DOM 中当前获得了焦点的元素。
- 元素获得焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus()方法。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
- document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
11.3.3 HTML5 - HTMLDocument的变化
- 1. readyState 属性
- Document 的 readyState 属性有两个可能的值：
- loading，正在加载文档；
- complete，已经加载完文档。
if (document.readyState == "complete"){
//执行操作
}
2. 兼容模式
检测页面的兼容模式 document.compatMode ;
在标准模式下， document.compatMode 的值等于"CSS1Compat"，
而在混杂模式下， document.compatMode 的值等于"BackCompat"
3. head 属性
document.head 属性，引用文档的
元素。
HTML5 - 11.3.4 字符集属性
- charset
- charset属性表示文档中实际使用的字符集，也可以用来指定新字符集。
- 默认情况下，这个属性的值为"UTF-16"，但可以通过元素、响应头
部或直接设置 charset 属性修改这个值。来看一个例子。
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";
- defaultCharset
- 另一个属性是 defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集应该是什么。如果文档没有使用默认的字符集，那 charset 和 defaultCharset 属性的值可能会不一样;
HTML5 - 11.3.5 自定义数据属性
- HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data-开头即可。
- 添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。 dataset 属性的值是 DOMStringMap 的一个实例，也就是一个名值对儿的映射。
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
HTML5 - 11.3.6 插入标记
- 1. innerHTML 属性
- 在读模式下， innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。
- 在写模式下， innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
- 在子节点的内容被替换后，被替换的元素节点的属性，事件处理等还会留在属性里，所以需要先删除属性和的事件，在做替换；
div = document.createElement("div");
div.innerHTML = "outside left bold font... out right";
document.body.appendChild(div)
- 并不是所有元素都支持 innerHTML 属性。不支持 innerHTML 的元素有：
、