第11章 DOM扩展
1.Selectors API，定义了两个方法，让开发人员能够基于 CSS 选择符从 DOM 中取得元素：
- querySelector()方法：接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回 null。
通过 Document 类型调用方法时，会在文档元素的范围内查找匹配的元素。通过 Element 类型调用 querySelector()方法时，只会在该元素后代元素的范围内查找匹配的元素。 -
//取得 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"); - querySelectorAll()方法：接收的一个 CSS 选择符，返回所有匹配的元素，是一个 NodeList 的实例，取得返回的 NodeList 中的每一个元素，可以使用 item()方法，也可以使用方括号语法。
-
//取得某<div>中的所有<em>元素(类似于 getElementsByTagName("em")) var ems = document.getElementById("myDiv").querySelectorAll("em"); //取得类为"selected"的所有元素 var selecteds = document.querySelectorAll(".selected"); //取得所有<p>元素中的所有<strong>元素 var strongs = document.querySelectorAll("p strong"); var i, len, strong; for (i=0, len=strongs.length; i < len; i++){ strong = strongs[i]; //或者 strongs.item(i) strong.className = "important"; }
2.Element Traversal API 为 DOM 元素添加了5 个属性：
利用这些元素不必担心空白文本节点，从而可以更方便地查找 DOM 元素了
- childElementCount：返回子元素(不包括文本节点和注释)的个数。
- firstElementChild：指向第一个子元素;firstChild 的元素版。
- lastElementChild：指向最后一个子元素;lastChild 的元素版。
- previousElementSibling：指向前一个同辈元素;previousSibling 的元素版。
- nextElementSibling:指向后一个同辈元素;nextSibling 的元素版。
-
//跨浏览器遍历某元素的所有子元素 var i, len, child = element.firstElementChild; while(child != element.lastElementChild){ processChild(child); //已知其是元素 child = child.nextElementSibling; }
3.getElementsByClassName()方法：接收一个参数，即一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得 ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
4.HTML5 新增了一种操作类名的方式：为所有元素添加 classList 属性。classList 属性是集合类型 DOMTokenList 的实例，定义如下方法：
- 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]); }
5.HTML5 添加了辅助管理 DOM 焦点的功能
- document.activeElement 属性：始终引用 DOM 中当前获得了焦点的元素。
元素获得焦点的方式有页面加载、用户输入(通常是 通过按 Tab 键)和在代码中调用 focus()方法，默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是 document.body 元 素的引用。文档加载期间，document.activeElement 的值为 null。 - document.hasFocus()方法：用于确定文档是否获得了焦点，可以知道用户是不是正在与页面交互。
6.document .readyState 属性有两个可能的值:通常用来实现一个指示文档已经加载完成的指示器。
- loading：正在加载文档。
- complete：已经加载完文档。
7.document.compatMode 属性告诉开发人员浏览器采用了哪种渲染模式。
- 在标准模式下，document.compatMode 的 值等于"CSS1Compat"
- 在混杂模式下，document.compatMode 的值等于"BackCompat"。
8.document.head 属性：引用文档的<head>元素。
9.document.charset属性：表示文档中实际使用的字符集。
10.document.defaultCharset属性：表示根据默认浏览器及操作系统设置的默认的字符集。
11.添加前缀 data-，可以为元素添加非标准的属性，用来为元素提供与渲染无关的 信息，或者提供语义信息。添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。dataset 属性的值是一个名值对儿的映射。在这个映射中，每个 data-name 形式的属性都有一个对应的属性，只不过属性名没有 data-前缀(比如，自定义属性是 data-myname， 那映射中对应的属性就是 myname)。
<div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>
var div = document.getElementById("myDiv");
//取得自定义属性的值
var appId = div.dataset.appId;
var myName = div.dataset.myname;
//设置值
div.dataset.appId = 23456;
div.dataset.myname = "Michael";
//有没有"myname"值呢?
if (div.dataset.myname){
alert("Hello, " + div.dataset.myname);
}
12.innerHTML 属性
- 读模式下：返回与调用元素的所有子节点(包括元素、注释和文本节点)对应 的 HTML 标记。
- 写模式下：i根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
13.outerHTML 属性
- 读模式下：返回调用它的元素及所有子节点的 HTML 标签。
- 写模式下：根据指定的 HTML 字符串创建新的 DOM 子树，然后用这个 DOM 子树完全替换调用元素。
14.insertAdjacentHTML()方法：接收两个参数:插入位置和要插入的 HTML 文本。
第一个参数必须是下列值之一:
- "beforebegin"：在当前元素之前插入一个紧邻的同辈元素
- "afterbegin"：在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素;
- "beforeend"：在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素;
- "afterend"：在当前元素之后插入一个紧邻的同辈元素。
-
//作为前一个同辈元素插入 element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>"); //作为第一个子元素插入 element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>"); //作为最后一个子元素插入 element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>"); //作为后一个同辈元素插入 element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");
15.document.documentMode 属性：知道给定页面使用的是什么文档模式。
16.跨浏览器检测某个节点是不是另一个节点的后代
//第一个参数是参考节点，第二个参数是要检查的节点
function contains(refNode, otherNode){
if (typeof refNode.contains == "function" &&(!client.engine.webkit || client.engine.webkit >= 522)){
return refNode.contains(otherNode);
} else if (typeof refNode.compareDocumentPosition == "function"){
return !!(refNode.compareDocumentPosition(otherNode) & 16);
} else {
var node = otherNode.parentNode;
do {
if (node === refNode){
return true;
} else {
node = node.parentNode;
}
} while (node !== null);
return false;
}
}17.与页面滚动相关的 API ：
- scrollIntoView()：通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。如果给这个方法传入 true 作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。如果传入 false 作为参数，调用元素会尽可能全部 出现在视口中
- scrollIntoViewIfNeeded(alignCenter):只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。 如果将可选的 alignCenter 参数设置为 true，则表示尽量将元素显示在视口中部(垂直方向)。
- scrollByLines(lineCount):将元素的内容滚动指定的行高，lineCount 值可以是正值， 也可以是负值。
- scrollByPages(pageCount):将元素的内容滚动指定的页面高度，具体高度由元素的高度决 定。
//让元素可见 document.forms[0].scrollIntoView(); //将页面主体滚动 5 行 document.body.scrollByLines(5); //在当前元素不可见的时候，让它进入浏览器的视口 document.images[0].scrollIntoViewIfNeeded(); //将页面主体往回滚动 1 页 document.body.scrollByPages(-1);
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
