w3c 规范原味解读 - 3 HTML 语义 结构 接口

[ascoders]

写到第三集才发现，真的不能用太多中文描述 w3c 的规范，比如 Document 和 文档，用 Document 表示时，我们会联想到一系列 api，但用 文档 描述时，下意识觉得"此文档非彼文档"，因此但凡遇到定义性名词，在需要的时候都会以英文展示。

3.1 Documents

任何 XML 或者 HTML，在解析 HTML 的浏览器上都被称为 Documents。

Document 的地址是绝对 url 地址，不过也可以在其生命周期，由脚本所改变（跳转，直接修改，pushState）。

当文档由脚本 createDocument() 或者 createHTMLDocument() 创建时，地址完全由脚本指定，并且会立即加载。

文档的地址来源可以在加载好之后被重新赋值，但没有加载完毕之前，这个值是空的。

3.1.1 Document Object

Document 对象的定义如下：

enum DocumentReadyState { "loading", "interactive", "complete" };

[OverrideBuiltins]
partial /*sealed*/ interface Document {
  // resource metadata management
  [PutForwards=href, Unforgeable] readonly attribute Location? location;
           attribute DOMString domain;
  readonly attribute DOMString referrer;
           attribute DOMString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
           attribute DOMString title;
           attribute DOMString dir;
           attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  readonly attribute HTMLCollection images;
  readonly attribute HTMLCollection embeds;
  readonly attribute HTMLCollection plugins;
  readonly attribute HTMLCollection links;
  readonly attribute HTMLCollection forms;
  readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);

  // dynamic markup insertion
  Document open(optional DOMString type = "text/html", optional DOMString replace = "");
  WindowProxy open(DOMString url, DOMString name, DOMString features, optional boolean replace = false);
  void close();
  void write(DOMString... text);
  void writeln(DOMString... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  readonly attribute Element? activeElement;
  boolean hasFocus();
           attribute DOMString designMode;
  boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);

  // special event handler IDL attributes that only apply to Document objects
  [LenientThis] attribute EventHandler onreadystatechange;
};
Document implements GlobalEventHandlers;

3.1.2 资源元数据管理

document.referrer

返回文档地址，哪怕是失效地址也会返回空。

document.cookie

返回当前 cookies，如果没有则返回空字符串，可以被添加，修改和删除。

以下两种情况的 document 中没有 cookie：

1. 没有浏览器执行环境
2. 不是一个服务器地址

符合以上两种情况的，document.cookie 一定会返回空字符串。如果服务器地址格式错误，返回一个 SecurityError。

由于 cookie 可以跨 frame 访问，因此 cookie 的路径path 仅仅是一种管理工具，而不是确保安全的途径。

document.lastModified

返回文档最后修改时间，格式为 MM/DD/YYYY hh:mm:ss，如果不确定则返回当前时间。

document.readyState

• loading 文档正在加载中
• interactive 解析结束但还在加载其它资源
• complete 完全加载完毕

Document 会在 readyState 修改时触发 readystateChange 事件。

3.1.3 DOM 树访问器

document.head

head 是 document 第一个节点（如果有的话）。

document.title

返回 title element 的 Text Node，也可以直接被修改（如果没有 head element 修改被忽略）。

SVG 元素也有 title 属性，在 SVGDocument 中，优先修改 SVG 的 title。

注意，获取 title 最后一步会清除两边空格。
赋值时，如果有 head element 但是没有 title element 将会在 head 末尾 append 一个 title element。

document.body

返回 body 节点，可以被修改。

document.images

返回文档中所有 img 标签。

document.embeds & document.plugins

返回文档中所有 embed 标签，两个方法作用完全一样。

document.links

返回所有含有 href 属性的 a 和 area 标签

document.forms

返回文档中所有 form 标签。

document.scripts

返回文档中所有 script 标签。

document.getElementsByName

返回一个 NodeList 对象，其 name 属性为指定属性。

3.2 Elements

3.2.1 Semantics

指某些标签比如 ol 表示一个有序列表。

再比如 h1 h2 标签，虽然会有样式差异，但绝不是为了呈现不同样式而区分，而是为了表意。因为同样标签在PC端和移动端可能展现形式都不同，但含义都是标题。

[ascoders]

本文已转移至独立项目 https://github.com/ascoders/w3c