Selectors API与 HTML5(DOM扩展的两个标准）

Selectors API

Selectors API（参见 W3C 网站上的 Selectors API Level 1）是 W3C 推荐标准，规定了浏览器原生支
持的 CSS 查询 API。通过浏览器原生支持这个 API，解析和遍历 DOM 树可以通过底层编译语言实现，性能也有
了数量级的提升

Selectors API Level 1 的核心是两个方法： querySelector() 和 querySelectorAll() 。在兼容浏
览器中， Document 类型和 Element 类型的实例上都会暴露这两个方法。

Selectors API Level 2 规范在 Element 类型上新增了更多方法，比如 matches() 、 find() 和
findAll() 。不过，目前还没有浏览器实现或宣称实现 find() 和 findAll() 。

  • querySelector() 方法

    /*querySelector() 方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配
项则返回 null */

//例子：
// 取得<body>元素
let body = document.querySelector("body");

// 取得 ID 为"myDiv"的元素
let myDiv = document.querySelector("#myDiv");

// 取得类名为"selected"的第一个元素
let selected = document.querySelector(".selected");

// 取得类名为"button"的图片
let img = document.body.querySelector("img.button");

    直接在Document 中使用querySelectorAll()会从文档元素开始搜索，而在Element上使用querySelectorAll()方法时只会从当前元素的后代中开始查询

  • querySelectorAll() 方法

    querySelectorAll()返回一个NodeList静态实例； querySelectorAll() 返回的 NodeList 实例一个属性和方法都不缺，但它是一
    个静态的“快照”，而非“实时”的查询。这样的底层实现避免了使用 NodeList 对象可能造成的性
    能问题。

  • matches() 方法

    matches()方法判断元素是否匹配该选择符，若匹配则返回true,，反之返回false；例如：

    if (document.body.matches("body.page1")){
    // true
}

    常用于检测某个元素是否会被querySelector()、querySelectorAll()方法返回

  • Element Traversal API

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

    Element Traversal API 为 DOM 元素添加了 5 个属性:

    • childElementCount ，返回子元素数量（不包含文本节点和注释）；

    • firstElementChild ，指向第一个 Element 类型的子元素（ Element 版 firstChild ）；

    • lastElementChild ，指向最后一个 Element 类型的子元素（ Element 版 lastChild ）；

    • previousElementSibling ， 指 向 前 一 个 Element 类 型 的 同 胞 元 素 （ Element 版
      previousSibling ）；

    • nextElementSibling ，指向后一个 Element 类型的同胞元素（ Element 版 nextSibling ）。

    在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就
    不用担心空白文本节点的问题了。

    举个例子，过去要以跨浏览器方式遍历特定元素的所有子元素，代码大致是这样写的:

    let parentElement = document.getElementById('parent');
let currentChildNode = parentElement.firstChild;
// 没有子元素，firstChild 返回 null，跳过循环
while (currentChildNode) {
    //判断是否为元素节点
    if (currentChildNode.nodeType === 1) {
        // 如果有元素节点，则做相应处理
        processChild(currentChildNode);
    }
    if (currentChildNode === parentElement.lastChild) {
        break;
    }
    currentChildNode = currentChildNode.nextSibling;
}

    使用 Element Traversal 属性之后，以上代码可以简化如下：

    let parentElement = document.getElementById('parent');
let currentChildElement = parentElement.firstElementChild;
// 没有子元素，firstElementChild 返回 null，跳过循环
while (currentChildElement) {
    // 这就是元素节点，做相应处理
    processChild(currentChildElement);
    if (currentChildElement === parentElement.lastElementChild) {
        break;
    }
    currentChildElement = currentChildElement.nextElementSibling;
}

    使用 Element Traversal 属性的时候，因为firstElementChild获取的不为空的节点一定是元素节点，nodeType一定等于1；所以不需要判断是否为元素节点,z'jie

HTML5

1. css扩展类
> 为了适应开发者和他们对 class 属性的认可，HTML5 增
加了一些特性以方便使用 CSS 类。

* `getElementsByClassName()` 可接收多个类

*  `classList` 属性

> classList是一个新集合类型DOMTokenList的实例，DOMTokenList也有length、item()属性,DOMTokenList还提供了以下方法：

* add(value) ，向类名列表中添加指定的字符串值 value 。如果这个值已经存在，则什么也不做。

* contains(value) ，返回布尔值，表示给定的 value 是否存在。

* remove(value) ，从类名列表中删除指定的字符串值 value 。

* toggle(value) ，如果类名列表中已经存在指定的 value ，则删除；如果不存在，则添加。
2. 焦点管理

HTML5 增加了辅助 DOM 焦点管理的功能。首先是 document.activeElement ，始终包含当前拥
有焦点的 DOM元素。页面加载时，可以通过用户输入（按 Tab 键或代码中使用 focus() 方法）让某个
元素自动获得焦点。

默认情况下 document.activeElement在页面刚刚加载完后会设置为document.body,在页面完全加载完之前，document.activeElement的值为null

  • 按 Tab 键或代码中使用 focus() 方法）让某个
    元素自动获得焦点：
let button = document.getElementById("myButton");
button.focus();
console.log(document.activeElement === button); // true
  • 判断文档是否获得焦点：
let button = document.getElementById("myButton");
button.focus();
console.log(document.hasFocus()); // true

总结： focus()可以用来查询文档，确定哪个元素拥有焦点，document.hasFocus()可以查询文档是否获得了焦点，
而这对于保证 Web 应用程序的无障碍使用是非常重要的。

3. HTMLDocument 扩展

HTML5 扩展了 HTMLDocument 类型，增加了更多功能

  • readyState属性

    document.readyState 属性有两个可能的值：

    • loading，表示文档正在加载
    • complete，表示文档加载完成

  • compatMode属性

    这个属性唯一的任务是指示浏览器当前处于什么渲染模式，如下面的例子所示，标准模式下 document.compatMode 的值是 "CSS1Compat" ，而在混杂模式下，
    document.compatMode 的值是 "BackCompat" ：

    if (document.compatMode == "CSS1Compat"){
    console.log("Standards mode");
} else {
    console.log("Quirks mode");
}
//HTML5 最终也把 compatMode 属性的实现标准化了，CSS1Compat

  • head属性

    • document.head：获取元素
4. 字符集属性

characterSet 属性表示文档实际使用的
字符集，也可以用来指定新字符集，但可以通过 元素或响应头，
以及新增的 characterSeet 属性来修改

console.log(document.characterSet); // "UTF-16"
document.characterSet = "UTF-8";
5.自定义数据属性

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

  • dataset属性

    dataset属性是一个
    DOMStringMap 的实例，包含一组键/值对映射;

    可以通过dataset属性访问，以data-后面的字符串作为键值来访问;（例如，属性 data-myname 、 data-myName 可以通过 myname 访
    问，但要注意 data-my-name 、 data-My-Name 要通过 myName 来访问    ）。

    自定义数据属性非常适合需要给元素附加某些数据的场景，比如链接追踪和在聚合应用程序中标识
    页面的不同部分。另外，单页应用程序框架也非常多地使用了自定义数据属性。

6. 插入标记
  • innerHTML属性

DOM虽然提供了很多操作节点的API，但一次插入大量节点，并且给它们排序还是比较麻烦，直接插入HTML节点更快速

注意：IE 和 Opera 会把所有元素标签转换为大写，而 Safari、
Chrome 和 Firefox 则会按照文档源代码的格式返回，包含空格和缩进；，

设置 innerHTML 会导致浏览器将 HTML 字符串解析为相应的 DOM树。这意味着
设置 innerHTML 属性后马上再读出来会得到不同的字符串。这是因为返回的字符串是将
原始字符串对应的 DOM 子树序列化之后的结果。

在所有现代浏览器中，通过 innerHTML 插入的

posted @ 2020-12-02 22:02  MusicMan程序猿  阅读(102)  评论(0)    收藏  举报