选择符API
- Selectors API（www.w3.org/TR/selectors-api/）是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS 查询。
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");
2、querySelectorAll()方法
querySelectorAll()方法接收的参数也是一个CSS 选择符，这个方法返回的是一个NodeList 的实例。
//取得某<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");
- 要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号语法.
var i, len, strong;
for (i=0, len=strongs.length; i < len; i++){
strong = strongs[i]; //或者strongs.item(i)
strong.className = "important";
}
3、matchesSelector()方法
- matchesSelector()方法接收一个参数，即CSS选择符，如果调用元素与该选择符匹配，返回true；否则，返回false。
if (document.body.matchesSelector("body.page1")){
//true
}
-
IE 9+通过msMatchesSelector()支持该方法，Firefox3.6+通过mozMatchesSelector()支持该方法，Safari 5+和Chrome 通过webkitMatchesSelector()支持该方法。
-
想使用这个方法，最好是编写一个包装函数。
function matchesSelector(element, selector){
if (element.matchesSelector){
return element.matchesSelector(selector);
} else if (element.msMatchesSelector){
return element.msMatchesSelector(selector);
} else if (element.mozMatchesSelector){
return element.mozMatchesSelector(selector);
} else if (element.webkitMatchesSelector){
return element.webkitMatchesSelector(selector);
} else {
throw new Error("Not supported.");
}
}
if (matchesSelector(document.body, "body.page1")){
//执行操作
}
元素遍历
-
对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。这样，就导致了在使用childNodes 和firstChild 等属性时的行为不一致。
-
为了弥补这一差异，而同时又保持DOM规范不变，ElementTraversal规范（www.w3.org/TR/ElementTraversal/）新定义了一组属性。
-
Element Traversal API 为DOM元素添加了以下5 个属性。
- childElementCount：返回子元素（不包括文本节点和注释）的个数。
- firstElementChild：指向第一个子元素；firstChild 的元素版。
- lastElementChild：指向最后一个子元素；lastChild 的元素版。
- previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
- nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
-
利用这些元素不必担心空白文本节点，从而可以更方便地查找DOM 元素。
/**要跨浏览器遍历某元素的所有子元素**/
//过去
var i,
len,
child = element.firstChild;
while(child != element.lastChild){
if (child.nodeType == 1){ //检查是不是元素
processChild(child);
}
child = child.nextSibling;
}
//使用Element Traversal 新增的元素
var i,
len,
child = element.firstElementChild;
while(child != element.lastElementChild){
processChild(child); //已知其是元素
child = child.nextElementSibling;
}
- 支持Element Traversal 规范的浏览器有IE 9+、Firefox 3.5+、Safari 4+、Chrome 和Opera 10+。
HTML5
- HTML5 规范则围绕如何使用新增标记定义了大量JavaScript API。其中一些API 与DOM 重叠，定义了浏览器应该支持的DOM扩展。
1、与类相关的扩充
(1)getElementsByClassName()方法、
//取得所有类中包含"username"和"current"的元素，类名的先后顺序无所谓
var allCurrentUsernames = document.getElementsByClassName("username current");
//取得ID 为"myDiv"的元素中带有类名"selected"的所有元素
var selected = document.getElementById("myDiv").getElementsByClassName("selected");
(2)classList 属性
- 在操作类名时，需要通过className 属性添加、删除和替换类名。
<div class="bd user disabled">...</div>
- 要从中删除一个类名，需要把这三个类名拆开，删除不想要的那个，然后再把其他类名拼成一个新字符串。
//删除"user"类
//首先，取得类名字符串并拆分成数组
var classNames = div.className.split(/\s+/);
//找到要删的类名
var pos = -1,
i,
len;
for (i=0, len=classNames.length; i < len; i++){
if (classNames[i] == "user"){
pos = i;
break;
}
}
//删除类名
classNames.splice(i,1);
//把剩下的类名拼成字符串并重新设置
div.className = classNames.join(" ");
-
HTML5 新增了一种操作类名的方式，可以让操作更简单也更安全，那就是为所有元素添加
classList 属性。 -
classList 属性是新集合类型DOMTokenList的实例，具有包含多少元素的length属性，取得每个元素的item()方法，以及下列方法。
- add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
- contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
- remove(value)：从列表中删除给定的字符串。
- toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
-
极大地减少类似基本操作的复杂性
<div class="bd user disabled">...</div>
//删除"user"类
div.classList.remove("user");
//删除"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]);
}
- 支持classList 属性的浏览器有Firefox 3.6+和Chrome。
2、焦点管理
(1)document.activeElement
- HTML5 也添加了辅助管理DOM 焦点的功能。首先就是document.activeElement 属性，这个属性始终会引用DOM 中当前获得了焦点的元素。
- 元素获得焦点的方式有页面加载、用户输入（通常是通过按Tab键）和在代码中调用focus()方法。
var button = document.getElementById("myButton");
button.focus();
alert(document.activeElement === button); //true
- 默认情况下，文档刚刚加载完成时，document.activeElement 中保存的是document.body 元素的引用。
- 文档加载期间，document.activeElement 的值为null。
(2)document.hasFocus()
- 新增了document.hasFocus()方法，这个方法用于确定文档是否获得了焦点。
var button = document.getElementById("myButton");
button.focus();
alert(document.hasFocus()); //true
3、HTMLDocument的变化
(1)readyState 属性
Document 的readyState 属性有两个可能的值：
- loading，正在加载文档；
- complete，已经加载完文档。
if (document.readyState == "complete"){
//执行操作
}
(2)兼容模式
- document的compatMode的属性，告诉开发人员浏览器采用了哪种渲染模式。
- 在标准模式下，document.compatMode的值等于"CSS1Compat"，而在混杂模式下，document.compatMode 的值等于"BackCompat"。
if (document.compatMode == "CSS1Compat"){
alert("Standards mode");
} else {
alert("Quirks mode");
}
(3)head属性
-作为对document.body 引用文档的<body>元素的补充，HTML5 新增了document.head 属性，引用文档的<head>元素。
var head = document.head || document.getElementsByTagName("head")[0];
4、字符集属性
(1)charset
- charset 属性表示文档中实际使用的字符集，也可以用来指定新字符集。
- 默认情况下，这个属性的值为"UTF-16"，但可以通过<meta>元素、响应头部或直接设置charset 属性修改这个值。
alert(document.charset); //"UTF-16"
document.charset = "UTF-8";
(2)defaultCharset
- defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集
应该是什么。 - 如果文档没有使用默认的字符集，那charset 和defaultCharset 属性的值可能会不一
样。
if (document.charset != document.defaultCharset){
alert("Custom character set being used.");
}
5、自定义数据属性
- HTML5 规定可以为元素添加非标准的属性，但要添加前缀data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
- 这些属性可以任意添加、随便命名，只要以data-开头即可。
<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);
}
6、插入标记
(1)innerHTML属性
- 在读模式下，innerHTML属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的HTML 标记。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
- 对于上面的div元素来说，它的innerHTML 属性会返回如下字符串。
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
- 在写模式下，innerHTML 会根据指定的值创建新的DOM树，然后用这个DOM树完全
替换调用元素原先的所有子节点。
div.innerHTML = "_<script defer>alert('hi');<\/script>";
div.innerHTML = "<div> </div><script defer>alert('hi');<\/script>";
div.innerHTML = "<input type=\"hidden\"><script defer>alert('hi');<\/script>";
(2)outerHTML属性
- 在读模式下，outerHTML 返回调用它的元素及所有子节点的HTML 标签。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
- 如果在<div>元素上调用outerHTML，会返回与上面相同的代码，包括<div>本身。
- 在写模式下，outerHTML会根据指定的HTML字符串创建新的DOM子树，然后用这个DOM子树完全替换调用元素。
- 使用outerHTML 属性以下面这种方式设置值：
div.outerHTML = "<p>This is a paragraph.</p>";
//DOM 脚本代码
var p = document.createElement("p");
p.appendChild(document.createTextNode("This is a paragraph."));
div.parentNode.replaceChild(p, div);
(3)insertAdjacentHTML()方法
-
insertAdjacentHTML()方法接收两个参数：插入位置和要插入的HTML 文本。
-
第一个参数必须是下列值之一，注意，这些值都必须是小写形式：
- "beforebegin"，在当前元素之前插入一个紧邻的同辈元素；
- "afterbegin"，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
- "beforeend"，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
- "afterend"，在当前元素之后插入一个紧邻的同辈元素。
-
第二个参数是一个HTML 字符串，如果浏览器无法解析该字符串，就会抛出错误。
//作为前一个同辈元素插入
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>");
(4)内存与性能问题
- 不可避免地，创建和销毁HTML 解析器也会带来性能损失，所以最好能够将设置innerHTML
或outerHTML 的次数控制在合理的范围内。
for (var i=0, len=values.length; i < len; i++){
ul.innerHTML += "<li>" + values[i] + "</li>"; //要避免这种频繁操作！！
}
/**
最好的做法是单独构建字符串，然后再一次
性地将结果字符串赋值给innerHTML
**/
var itemsHtml = "";
for (var i=0, len=values.length; i < len; i++){
itemsHtml += "<li>" + values[i] + "</li>";
}
ul.innerHTML = itemsHtml;
7、scrollIntoView()方法
- scrollIntoView()可以在所有HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视口中。
- 如果给这个方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐。
- 如果传入false 作为参数，调用元素会尽可能全部出现在视口中，（可能的话，调用元素的底部会与视口顶部平齐。）不过顶部不一定平齐。
//让元素可见
document.forms[0].scrollIntoView();
专有扩展
(1)文档模式
- 要强制浏览器以某种模式渲染页面，可以使用HTTP头部信息X-UA-Compatible，或通过等价的<meta>标签来设置：
<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
(2）children属性
- 这个属性是HTMLCollection 的实例，只包含元素中同样还是元素的子节点。
var childCount = element.children.length;
var firstChild = element.children[0];
（3）contains()方法
- contains()方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，
该方法返回true；否则，返回false。
alert(document.documentElement.contains(document.body)); //true
- 使用DOM Level 3 compareDocumentPosition()也能够确定节点间的关系。返回一个表示该关系的位掩码（ bitmask）。
- 支持这个方法的浏览器有IE9+、Firefox、Safari、Opera 9.5+和Chrome。
- 下表列出了这个位掩码的值。
| 掩码 | 节点关系 |
|---|---|
| 1 | 无关（给定的节点不在当前文档中） |
| 2 | 居前（给定的节点在DOM树中位于参考节点之前） |
| 4 | 居后（给定的节点在DOM树中位于参考节点之后） |
| 8 | 包含（给定的节点是参考节点的祖先） |
| 16 | 被包含（给定的节点是参考节点的后代） |
- 可以对compareDocumentPosition()的结果执行按位与，以确定参考节点（调用compareDocumentPosition()方法的当前节点）是否包含给定的节点（传入的节点）。
var result = document.documentElement.compareDocumentPosition(document.body);
alert(!!(result & 16));
- 使用一些浏览器及能力检测，就可以写出如下所示的一个通用的contains 函数：
function contains(refNode, otherNode){
if (typeof refNode.contains == "function" &&
(!client.engine.webkit || client.engine.webkit >= 522)){
/**检查了当前浏览器所用的WebKit 版本号，如果浏览器是WebKit 且至少是Safari 3（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;
}
}
(4)插入文本
- 在通过innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。
<div id="content">
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
- 对于这个例子中的<div>元素而言，其innerText 属性会返回下列字符串
This is a paragraph with a list following it.
Item 1
Item 2
Item 3
- 在通过innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
div.innerText = "Hello world!";
- 执行这行代码后，页面的HTML 代码就会变成如下所示。
<div id="content">Hello world!</div>
- Firefox 不支持innerText，支持作用类似的textContent 属性。
- 为了确保跨浏览器兼容，有必要编写一个类似于下面的函数来检测可以使用哪个属性。
function getInnerText(element){
return (typeof element.textContent == "string") ?
element.textContent : element.innerText;
}
function setInnerText(element, text){
if (typeof element.textContent == "string"){
element.textContent = text;
} else {
element.innerText = text;
}
}
setInnerText(div, "Hello world!");
alert(getInnerText(div)); //"Hello world!"
- 在读取文本值时，outerText 与innerText 的结果完全一样。
- 在写模式下，outerText就完全不同了：outerText不只是替换调用它的元素的子节点，而是会替换整个元素（包括子节点）。
div.outerText = "Hello world!";
//这行代码实际上相当于如下两行代码：
var text = document.createTextNode("Hello world!");
div.parentNode.replaceChild(text, div);
滚动
- scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚
动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。如果将可选的alignCenter参数设置为true，则表示尽量将元素显示在视口中部（垂直方向）。 - scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值，
也可以是负值。 - scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。
The scrollByLines method is only supported by Firefox, use the cross-browser scrollBy method instead.
好好学习
网友评论