24-JavaScript高级程序设计-DOM扩展

最新推荐文章于 2021-09-03 12:18:41 发布

原创最新推荐文章于 2021-09-03 12:18:41 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js

阅读笔记专栏收录该内容

55 篇文章

订阅专栏

本文主要介绍了JavaScript中DOM的扩展，包括选择符API、元素遍历、HTML5相关扩充（如类操作、焦点管理等）以及专有扩展（如文档模式、children属性等）。详细阐述了各扩展的方法、属性及浏览器支持情况，还提及了插入标记和滚动方法的使用及注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、DOM扩展

对 DOM 的两个主要的扩展是 Selectors API（选择符 API）和 HTML5。

1. 选择符 API

querySelector() ☆☆☆
接收一个 CSS 选择符，返回匹配的第一个元素，没有找到返回 null。

querySelectorAll() ☆☆☆
接收一个 CSS 选择符，返回所有匹配的元素。（实际上是带有所有属性和方法的 NodeList 对象）
取得返回的 NodeList 中的每一个元素，可以使用 item() 方法，也可以使用方括号语法。

以上两个方法浏览器支持：IE 8+、Firefox 3.5+、Safari 3.1+、Chrome 和 Opera 10+。

matchesSelector()
接收一个 CSS 选择符，如果调用元素与该选择符匹配，返回 true；否则，返回 false。
浏览器支持：IE 9+通过 msMatchesSelector() 支持该方法，Firefox 3.6+通过 mozMatchesSelector() 支持该方法，Safari 5+和 Chrome 通过 webkitMatchesSelector() 支持该方法。

2. 元素遍历

浏览器差异：对于元素间的空格，IE9及之前版本不会返回文本节点，而其他所有浏览器都会返回文本节点。
DOM 元素添加 5 个属性：
childElementCount：返回子元素（不包括文本节点和注释）的个数。
firstElementChild：指向第一个子元素；firstChild 的元素版。
lastElementChild：指向最后一个子元素；lastChild 的元素版。
previousElementSibling：指向前一个同辈元素；previousSibling 的元素版。
nextElementSibling：指向后一个同辈元素；nextSibling 的元素版。
应用：跨浏览器遍历某元素的所有子元素
使用 firstChild、nextSibling 这些属性，需要 nodeType == 1 检查是不是元素；
使用 firstElementChild、nextElementSibling 这些属性，无需判断，已知其是元素。

3. HTML5

（1）与类相关的扩充

getElementsByClassName() ☆☆☆
接收一个包含一或多个类名的字符串，返回带有指定类的所有元素的 NodeList。
浏览器支持：IE 9+、Firefox 3+、Safari 3.1+、Chrome 和 Opera 9.5+。

classList 属性 ☆☆☆
HTML5 为所有元素添加 classList 属性（新集合类型 DOMTokenList 的实例）。

属性：length
获取元素：item() 方法、方括号语法
方法：
add(value)：添加类名。如果已经存在就不添加。
contains(value)：是否存在某类名，存在返回 true，否则返回 false。
remove(value)：删除类名。
toggle(value)：切换类名（有类名删除，没有类名添加）。
浏览器支持：Firefox 3.6+ 和 Chrome。

（2）焦点管理

元素获得焦点的方式有页面加载、用户输入（通常是通过按 Tab 键）和在代码中调用 focus() 方法。

document.activeElement
始终会引用 DOM 中当前获得了焦点的元素
默认情况下，文档刚刚加载完成时，该属性保存的是 document.body 元素的引用。文档加载期间，值为 null。

document.hasFocus()
确定文档是否获得了焦点

重要用途：提高 Web 应用的无障碍性
浏览器支持：IE 4+、Firefox 3+、Safari 4+、Chrome 和 Opera 8+。

（3）HTMLDocument 的变化

readyState 属性
两个可能的值：loading，正在加载文档；complete，已经加载完文档。
基本用法：

if (document.readyState == "complete"){
  //执行操作
}

浏览器支持：IE4+、Firefox 3.6+、Safari、Chrome 和 Opera 9+。

compatMode 属性
检测页面的兼容模式，即采用了哪种渲染模式（标准的还是混杂的）
在标准模式下，document.compatMode 值为 “CSS1Compat”；在混杂模式下，document.compatMode 值为 “BackCompat”。
浏览器支持：IE6、Firefox、Safari 3.1+、Opera 和 Chrome。

head 属性
document.head 属性，引用文档的 <head> 元素。
浏览器支持：包括 Chrome 和 Safari 5。
var head = document.head || document.getElementsByTagName("head")[0];

（4）字符集属性

charset，表示文档中实际使用的字符集，也可以用来指定新字符集。
默认情况下，这个属性的值为 “UTF-16”，可以通过 <meta> 元素、响应头部或直接设置 charset 属性修改这个值。
document.charset 浏览器支持：IE、Firefox、Safari、Opera 和 Chrome。

defaultCharset，表示根据默认浏览器及操作系统的设置，当前文档默认的字符集。
document.defaultCharset 浏览器支持：IE、Safari 和 Chrome。

（5）自定义数据属性 ☆☆☆

HTML5 规定可以为元素添加非标准的属性，但要添加前缀 data-，目的是为元素提供与渲染无关的信息，或者提供语义信息。
获取自定义属性：通过元素的 dataset 属性（DOMStringMap 的一个实例，一个名值对的映射）。
浏览器支持：Firefox 6+ 和 Chrome。
备注：涉及的浏览器支持都是第三版编写时的支持，很多功能现在可能已经有更多的支持了。

（6）插入标记

innerHTML 属性 ☆☆☆
在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM树，然后用这个 DOM 树完全替换调用元素原先的所有子节点。
不同浏览器返回的 innerHTML 值有所不同。IE 和 Opera 会将所有标签转换为大写形式，Safari、Chrome 和 Firefox 会原原本本地按照原先文档中（或指定这些标签时）的格式返回 HTML，包括空格和缩进。

使用限制：
大多数浏览器中，通过 innerHTML 插入 <script>元素并不会执行其中的脚本。
IE8 及更早版本可以执行脚本，必须满足两个条件：一是必须为 <script> 元素指定 defer 属性，二是 <script> 元素必须位于“有作用域的元素”之后。
大多数浏览器都支持以直观的方式通过 innerHTML 插入 <style> 元素。
IE8 及更早版本中，必须给 <style> 前置一个“有作用域的元素”。
不支持 innerHTML 的元素有：<col>、<colgroup>、<frameset>、<head>、<html>、<style>、<table>、<tbody>、<thead>、<tfoot> 和 <tr>。
IE8 及更早版本中，<title> 元素没有 innerHTML 属性。

window.toStaticHTML()
接收一个 HTML 字符串；返回一个经过无害处理后的版本（从源 HTML 中删除所有脚本节点和事件处理程序属性）。
浏览器支持：IE8+。（现在肯定不止）

outerHTML 属性
在读模式下，outerHTML 返回调用它的元素及所有子节点的 HTML 标签。在写模式下，outerHTML会根据指定的 HTML 字符串创建新的 DOM子树，然后用这个 DOM 子树完全替换调用元素。
与innerHTML不同在包括调用元素。
浏览器支持：IE4+、Safari 4+、Chrome 和 Opera 8+。

insertAdjacentHTML(插入位置，要插入的HTML文本)
插入位置（小写）：
“beforebegin” 前一个同辈元素
“afterbegin” 第一个子元素
“beforeend” 最后一个子元素
“afterend” 后一个同辈元素
浏览器支持：IE、Firefox 8+、Safari、Opera 和 Chrome。

内存与性能问题
使用 innerHTML、outerHTML 属性和 insertAdjacentHTML() 方法时，最好先手工删除要被替换的元素的所有事件处理程序和 JavaScript 对象属性。
最好能够将设置 innerHTML 或 outerHTML 的次数控制在合理的范围内。（创建和销毁 HTML 解析器）

（7）scrollIntoView() 方法 ☆☆☆

element.scrollIntoView() 通过滚动使元素出现在视口中
传入 true 或者不传入参数，调用元素顶部与视口顶部尽可能平齐。传入 false，调用元素会尽可能全部出现在视口中。
浏览器支持：IE、Firefox、Safari 和 Opera。

4. 专有扩展

仍有大量专有的 DOM 扩展没有成为标准，只得到了少数浏览器的支持。

（1）文档模式

IE9 时有4种文档模式：IE5、IE7、IE8、IE9
设置模式：<meta http-equiv="X-UA-Compatible" content="IE=IEVersion">
IEVersion值：Edge / EmulateIE9 / EmulateIE8 / EmulateIE7 / 9 / 8 / 7 / 5
默认情况下，浏览器会通过文档类型声明来确定是使用最佳的可用文档模式，还是使用混杂模式。

document.documentMode 获取页面使用的文档模式
返回使用的文档模式的版本号（IE9 中可能返回的版本号为 5、7、8、9）

（2）children 属性

获取元素的元素子节点（其他和 childNodes 相同）
浏览器支持：IE5+、Firefox 3.5+、Safari 3+、Opera8+ 和 Chrome。

（3）contains() 方法

contains()
接收一个要检测的后代节点，如果被检测的节点是后代节点，返回 true，否则返回 false。
浏览器支持：IE9+、Firefox、Safari、Opera 9.5+ 和 Chrome。

compareDocumentPosition()
确定两个节点间的关系，返回一个表示该关系的位掩码（ bitmask）。
掩码对应关系：1–无关；2–居前；4–居后；8–包含；16-被包含（模仿contains）。
浏览器支持：IE9+、Firefox、Safari、Opera 9.5+ 和 Chrome。

使用浏览器及能力检测，通用contains函数：

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;
  }
}

（4）插入文本

innerText 属性 ☆☆☆
操作元素中包含的所有文本内容，包括子文档树中的文本。
在通过 innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过 innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。
注意：不同浏览器处理空白符的方式不同。
设置 innerText 时对文本中存在的 HTML 语法字符（小于号、大于号、引号及和号）进行了编码。
浏览器支持：IE4+、Safari 3+、Opera 8+ 和 Chrome。

textContent 属性作用类似。
浏览器支持：Firefox、IE9+、Safari 3+、Opera 10+ 和 Chrome。
差异：innerText 会忽略行内的样式和脚本，textContent 会像返回其他文本一样返回行内的样式和脚本代码。

outerText 属性
调用节点及子节点的文本操作。
在读取文本值时，outerText 与 innerText 的结果完全一样。在写模式下，outerText 会替换整个元素。
浏览器支持：IE4+、Safari 3+、Opera 8+ 和 Chrome。

（5）滚动

页面滚动几个专有方法（都是 HTMLElement 类型的扩展）：

scrollIntoViewIfNeeded(alignCenter)：只在当前元素在视口中不可见的情况下，才滚动浏览器窗口或容器元素，最终让它可见。如果当前元素在视口中可见，这个方法什么也不做。
如果将可选的 alignCenter 参数设置为 true ，表示尽量将元素显示在视口中部（垂直方向）。

scrollByLines(lineCount)：将元素的内容滚动指定的行高。
lineCount 值可以是正值，也可以是负值。

scrollByPages(pageCount) ：将元素的内容滚动指定的页面高度。
具体高度由元素的高度决定。pageCount 值可正可负。

浏览器支持：Safari 和 Chrome。
注意：scrollIntoView() 和 scrollIntoViewIfNeeded() 的作用对象是元素的容器，scrollByLines() 和 scrollByPages() 影响的是元素自身。

上一篇：23-JavaScript高级程序设计-DOM操作技术
下一篇：25-JavaScript高级程序设计-DOM2&3变化