[TOC]

Selectors API

Document类型

元素遍历

Node 类型

HTML5

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

CSS类扩展

getElementsByClassName()

Document类型

classList 属性

解决 className 属性实现添加、删除和替换时是对字符串的操作。HTML5 在所有元素提供 classList 属性。
classList 是 DOMTokenList 对象的实例（类数组）

  • length 包含多少项
  • item() 或 [] 取得个别元素
  • add(value) 向类名列表中添加指定的字符串值 value
  • contains(value) 返回布尔值，value 是否存在
  • remove(value) 从类名列表删除字符串 value

  • toggle(value) 类名列表已经存在 value 则删除；不存在则添加

    焦点管理

    document.activeElement

    指向当前拥有焦点的 DOM 元素
    默认情况下 document.activeElement

  • 在页面加载完之前，值为 null

  • 在页面加载完之后，值为 document.body

    document.hasFoucs()

    返回 bool，表示文档是否拥有焦点

    HTMLDocument 扩展

    readyState

    把 document.readyState 当成指示器，判断文档是否加载完毕。
    有两个可能的值

  • loading 表示文档正在加载

  • complete 表示文档加载完成

    compatMode

    从IE6开始提供 标准 或 混杂模式 渲染页面的能力，增加 document.compatMode 属性。HTML5 最终把compatMode 属性实现标准化。

  • CSS1Compat == Standards mode

  • BackCompat == Quirks Mode

    head

    HTML5 增加 document.head 属性，指向文档的元素

    字符集属性

    document.characterSet，默认值 “UTF-16”，
    可以通过元素或响应头，以及这个document.characterSet属性进行修改。

    自定义数据属性

    可以使用 setAttribute / getAttribute
    也可以html5中的 dataset 属性，此时不需要前序 data-。

dataset 属性是一个 DOMStringMap 实例，包含一组键/值对映身。

p.dataset.name //zza
p.dataset.age //18

p.getAtrribute('data-name')
p.getAtrribute('data-age)
p.setAttribute('data-age','32')

插入标记

innerHTML 属性

  • 读取 innerHTML 属性
    • 返回元素所有后代的 HTML 字符串
      • 包括元素、注释、文本节点

  • 写入 innerHTML 属性

    • 根据提供的字符串值以新的 DOM 子树替代元素中原来包含的所有节点
    • 不同浏览器 innerHTML 返回的值不会完全一样
      • 标签大小写、空格、缩进

        旧 IE 的 innerHTML

        现代浏览器通过 innerHTML 插入