DOM扩展

DOM扩展

选择符API

querySelect(), querySelectAll()这两个方法遵循CSS的选择器规则，IE8+及其它最新版浏览器均支持这两个方法。 这两个方法的差别在于，一个返回符合匹配规则的第一个元素，一个返回匹配规则的所有元素。若遇到不匹配的情况，前者返回null，后者返回一个空的NodeList。

元素遍历

浏览器对于元素之间的空白，在解析上会有差异。 之前说过，对于下面这段代码，Chrome回认为ul下有7个子节点（3个<li>节点，4个文本（li之间的空白）节点）

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

所以，在childNodes、firstChild及lastChild等的属性解析上，会有差异。 为避免这一差异，在原有规范的基础上，添加了如下几个属性：

  • childElementCount：返回子元素（不包括文本节点和注释）的个数。
  • firstElementChild：指向第一个子元素；firstChild 的元素版。
  • lastElementChild：指向最后一个子元素；lastChild 的元素版。
  • previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
  • nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。

HTML5扩展

getElementsByClassName 与getElementsByTagName类似，返回一个NodeList。它的值是动态查询的。

classList classList的出现，是为了解决之前元素属性className的不便而添加的。在传统方式下，如果我们需要对一个元素的class属性进行操作，首先要找到className。而且对其中某个类的操作继续重写真个className属性。

so， HTML5为元素都添加了一个classList属性。它有如下方法：

  • add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
  • contains(value)：表示列表中是否存在给定的值，如果存在则返回 true，否则返回 false。
  • remove(value)：从列表中删除给定的字符串。
  • toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。

焦点管理

  • document.activeElement：这个属性始终指向当前文档中，获得焦点的元素
  • hasFocus()：判断当前元素是否获得焦点；

HTMLDocument

readyState：当前文档的加载状态，只有两个值：

  • loading： 文档正在加载中；
  • complete： 文档加载完成；

兼容模式： document.compatMode； 在标准模式下，document.compatMode 的 值等于”CSS1Compat”，而在混杂模式下，document.compatMode 的值等于”BackCompat”

head属性： document.head； HTML5新的对文档中<head>元素的引用。

字符集属性

document.charset：表示文档中实际使用的字符集， 也可以用来指定新字符集。

自定义数据属性

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

插入标记

在用于插入大量HTML标记的情况下，传统的节点操作方法（appendChild等）有些力不从心。 所以HTML5提供了直接操作HTML字符串的方法和属性。

innerHTML： 返回当前节点下所有子节点对应的HTML标记。不同的浏览器对innerHTML特性支持有略微差异，需注意。 outerHTML： 返回当前节点及其所有子节点对应的HTML标记。 insertAdjacentHTML: 最早也是在 IE中出现的， 它接收两个参数：插入位置和要插入的 HTML 文本。

insertAdjacentHTML方法的第一个参数是插入位置。插入一般包含两类： 同辈元素 或者子元素。

  • “beforebegin”，在当前元素之前插入一个紧邻的同辈元素；
  • “afterbegin”，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
  • “beforeend”，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
  • “afterend”，在当前元素之后插入一个紧邻的同辈元素。

scrollIntoView

将当前元素滚动到当前区域内。接收一个布尔类型的参数，用来确定滚到当前可视区域的具体位置（顶部/底部）。

专有扩展

文档模式

IE8引入的概念，文档模式决定了你可以使用哪个级别的 CSS。

children属性

因为浏览器处理元素间的空白字是有差异的，因此就出现了 children 属性。 这个属性是 HTMLCollection 的实例， 只包含元素中同样还是元素的子节点。 除此之外， children 属性与 childNodes 没有什么区别，即在元素只包含元素子节点时，这两个属性的值相同。

contains方法

判断某个节点是不是另一个节点的后代。 这个方法的兼容性比较好，还有另外一个DOM3的方法：compareDocumentPosition()。这个方法用于确定两个节点间的关系，执行该方法会返回一个表示节点关系的掩码（bitmask）。

掩码节点关系
1无关：给定的节点不在当前文档中
2居前：给定的节点在参考节点之前
4居后：给定的节点在参考节点之后
8包含：给定的节点是参考节点的祖先
16被包含：给定的节点是参考节点的后代

插入文本

innerText，类似于innerHTML属性，只不过innerText会将子节点删除，然后换成一个新的文本节点。 innerText在低版本的火狐上（FireFox 44及以下）不支持，所以innerText还有一个高版本的属性，叫做textContent。

outerText属性类似于innerText，只不过在进行写属性时，它会将整个节点替换为一个新的文本节点。

滚动

对scrollIntoView的扩展，

  • scrollIntoViewIfNeeded: 如果元素在当前视窗，则不需要做任何滚动操作；
  • scrollByLines(lineCount)：将元素的内容滚动指定的行高，lineCount 值可以是正值， 也可以是负值。
  • scrollByPages(pageCount)：将元素的内容滚动指定的页面高度，具体高度由元素的高度决定。

上面这三个方法，只有Safari 和Chrome实现了支持。