site infoHacknerd | Tech Blog
blog cover

🎚️ [JavaScript高级程序设计]15 DOM扩展

JavaScript

Selector Api

JavaScript 库中最流行的一种能力就是根据 CSS 选择符的模式匹配 DOM 元素。比如，jQuery 就完全 以 CSS 选择符查询 DOM 获取元素引用，而不是使用 getElementById()和 getElementsByTagName()。 Selectors API（参见 W3C 网站上的 Selectors API Level 1）是 W3C 推荐标准，规定了浏览器原生支 持的 CSS 查询 API。

  • 1.querySelector() 法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配 项则返回 null
  • 2.querySelectorAll() 和querySelector一样但会返回所有匹配的节点
  • 3.matches() 检测一个节点会不会被 querySelectorAll 和 querySelector 返回

    • 元素遍历

    IE9 之前的版本不会把元素间的空格当成空白节点，而其他浏览器则会。这样就导致了 childNodes 和 firstChild 等属性上的差异。为了弥补这个差异，同时不影响 DOM 规范，W3C 通过新的 Element Traversal 规范定义了一组新属性

    Eement Traversal API 为 DOM 元素添加了 5 个属性：

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

    • HTML5

    HTML5 代表着与以前的 HTML 截然不同的方向。在所有以前的 HTML 规范中，从未出现过描述JavaScript 接口的情形，HTML 就是一个纯标记语言。JavaScript 绑定的事，一概交给 DOM 规范去定义。

    然而，HTML5 规范却包含了与标记相关的大量 JavaScript API 定义。其中有的 API 与 DOM 重合，定义了浏览器应该提供的 DOM 扩展

    CSS类扩展

  • 1.getElementsByClassName()
  • 2.classList 属性

    • 焦点管理

    第一个方法可以用来查询文档，确定哪个元素拥有焦点，第二个方法可以查询文档是否获得了焦点， 而这对于保证 Web 应用程序的无障碍使用是非常重要的。

  • 1.document.activeElement 始终包含当前拥有焦点的 DOM 元素。
  • 2.document.hasFocus() 表示文档是否有焦点

    • HTMLDocument扩展

  • 1.readyState readyState 是 IE4 最早添加到 document 对象上的属性，后来其他浏览器也都依葫芦画瓢地支持这个属性。最终，HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值：
  • 2.compatMode 指示浏览器当前处于什么渲染模式。标准模式下 document.compatMode 的值是CSS1Compat，而在混杂模式下，document.compatMode 的值是BackCompat
  • 3.head 对document.body 的补充，指向文档的<head>元素。

    • 字符集属性

    documen.characterSet 属性表示文档实际使用的字符集，也可以用来指定新字符集。

    javascriptCopy
    console.log(document.characterSet); // "UTF-16" 
document.characterSet = "UTF-8";

    自定义数据属性

    HTML5 允许给元素指定非标准的属性，但要使用前缀 data-以便告诉浏览器，这些属性既不包含与渲染有关的信息，也不包含元素的语义信息。

    htmlCopy
    <div id="myDiv" data-appId="12345" data-myname="Nicholas"></div>

    定义了自定义数据属性后，可以通过元素的 dataset 属性来访问

    javascriptCopy
    let div = document.getElementById("myDiv"); 
// 取得自定义数据属性的值
let appId = div.dataset.appId; 
let myName = div.dataset.myname;

    插入标记

    DOM 虽然已经为操纵节点提供了很多 API，但向文档中一次性插入大量 HTML 时还是比较麻烦。 相比先创建一堆节点，再把它们以正确的顺序连接起来，直接插入一个 HTML 字符串要简单（快速） 得多。HTML5 已经通过以下 DOM 扩展将这种能力标准化了

  • 1.innerHTML属性
  • 2.旧IE中的innerHTML
  • 3.outerHTML
  • 4.insertAdjacentHTML(where, element) insertAdjacentText(where, element) 它们都接收两个参数：要插入标记的位置和要插入的 HTML 或文本。第一个参数必须是下列值中的一个：
  • 5.内存与性能问题
  • 6.跨站点脚本

    • 尽管 innerHTML 不会执行自己创建的<script>标签，但仍然向恶意用户暴露了很大的攻击面，因 为通过它可以毫不费力地创建元素并执行 onclick 之类的属性。如果页面中要使用用户提供的信息，则不建议使用 innerHTML。与使用 innerHTML 获得的方便相比，防止 XSS 攻击更让人头疼。此时一定要隔离要插入的数据，在插入页面前必须毫不犹豫地使用相关的库对它们进行转义。

    scrollIntoView

    DOM 规范中没有涉及的一个问题是如何滚动页面中的某个区域，HTML5 选择了标准化 scrollIntoView()。

    专有扩展

    各家浏览器未被标准化的扩展

    Contents

    • Selector Api
    • 元素遍历
    • HTML5
    • CSS类扩展
    • 焦点管理
    • HTMLDocument扩展
    • 字符集属性
    • 自定义数据属性
    • 插入标记
    • scrollIntoView
    • 专有扩展
    2024/04/10 03:37