个人博客

Appearance

Document 类型 ​

document 对象是 HTMLDocument 的一个实例，表示整个 HTML 页面，其属于 window 对象的一个属性，继承于 Node 类型。

js
interface Document: Node {

    // Modified in DOM Level 3:
    // 文档的类型申明
    readonly attribute DocumentType doctype;
    readonly attribute DOMImplementation implementation;

    // 返回文档的 html元素
    readonly attribute Element documentElement;

    // 创建一个元素节点方法
    Element createElement( in DOMString tagName)
    raises(DOMException);

    // 创建一个虚拟的元素节点
    DocumentFragment createDocumentFragment();

    //创建一个文本节点
    Text createTextNode( in DOMString data);

    // 创建一个注释节点
    Comment createComment( in DOMString data);
    CDATASection createCDATASection( in DOMString data)
    raises(DOMException);
    ProcessingInstruction createProcessingInstruction( in DOMString target, in DOMString data)
    raises(DOMException);

    // 创建一个属性节点
    Attr createAttribute( in DOMString name)
    raises(DOMException);
    EntityReference createEntityReference( in DOMString name)
    raises(DOMException);

    // 通过节点名称获取节点信息
    NodeList getElementsByTagName( in DOMString tagname);
    // Introduced in DOM Level 2:
    Node importNode( in Node importedNode, in boolean deep)
    raises(DOMException);
    // Introduced in DOM Level 2:
    Element createElementNS( in DOMString namespaceURI, in DOMString qualifiedName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    Attr createAttributeNS( in DOMString namespaceURI, in DOMString qualifiedName)
    raises(DOMException);
    // Introduced in DOM Level 2:
    NodeList getElementsByTagNameNS( in DOMString namespaceURI, in DOMString localName);
    // Introduced in DOM Level 2:
    Element getElementById( in DOMString elementId);
    // Introduced in DOM Level 3:
    readonly attribute DOMString inputEncoding;
    // Introduced in DOM Level 3:
    readonly attribute DOMString xmlEncoding;
    // Introduced in DOM Level 3:
    attribute boolean xmlStandalone;
    // raises(DOMException) on setting

    // Introduced in DOM Level 3:
    attribute DOMString xmlVersion;
    // raises(DOMException) on setting

    // Introduced in DOM Level 3:
    attribute boolean strictErrorChecking;
    // Introduced in DOM Level 3:
    attribute DOMString documentURI;
    // Introduced in DOM Level 3:
    Node adoptNode( in Node source)
    raises(DOMException);
    // Introduced in DOM Level 3:
    readonly attribute DOMConfiguration domConfig;
    // Introduced in DOM Level 3:
    void normalizeDocument();
    // Introduced in DOM Level 3:
    Node renameNode( in Node n, in DOMString namespaceURI, in DOMString qualifiedName)
    raises(DOMException);
};

属性 ​

继承于 Node 的属性 ​
  • nodeName ---- #document
  • nodeType ---- 9
  • nodeValue ---- null
  • parentNode ---- null
  • ownerDocument ---- null
私有的属性 ​
  • documentElement ---- 获取页面的 html
  • body ---- 获取页面的 body
  • doctype ---- 获取页面的 <!DOCTYPE html>
  • title ---- 获取页面的标题
  • compatMode ---- 表明页面的渲染模式（混杂模式还是标准模式）

1.1 document.documentElement ​

一个会返回文档对象（document）的根元素的只读属性（如 HTML 文档的 <html> 元素）。（只有一个子节点 html）

var rootElement = document.documentElement;

1.2 document.compatMode ​

表明当前文档的渲染模式是混杂模式还是"标准模式".

  • 如果文档处于“混杂模式”，则该属性值为"BackCompat"
  • 如果文档处于“标准模式”或者“准标准模式(almost standards mode)”，则该属性为"CSS1Compat"
if (document.compatMode == "BackCompat") {
  // 渲染模式为混杂模式
}

1.3 document.title ​

获取或设置文档的标题。

alert(document.title); // 显示 "Hello World!"
document.title = "Goodbye World!";
alert(document.title); // 显示 "Goodbye World!"

查找元素 ​

  • document.getElementById()
  • document.getElementByClassName()
  • document.getElementByName()
  • document.getElementByTagName()
CSS 选择器查找 ​
  • document.querySelector()
  • document.querySelectorAll()
  • document.matchesSelector()

创建元素 ​

  • document.createElement();
  • document.createDocumentFragment();
  • document.createTextNode();

文档的写入 ​

  • document.write();
  • document.writeIn();
  • document.open();
  • document.close();