每个 Window 对象有一个 document 属性引用了 Document 对象。Document 对象表示窗口的内容,它是一个巨大的 API 中的核心对象,叫做文档对象模型(Document Obejct Model, DOM),用来展示和操作文档内容
HTML 或 XML 文档的嵌套元素在 DOM 中以「树」的形式展示。HTML 文档的树装结构包含表示 HTML 标签或元素(如 body, p)和表示文本字符串的节点,也可能包含表示 HTML 注释的节点
<html> <head> <title>Simple Document</title> </head> <body> <h1>Heading</h1> <p>This is a <i>paragraph</i></p> </body> </html>
置换成 DOM 树表示
+------------+ | Document | +-----+------+ | +-----+------+ | <html> | +-----+------+ | +--------------------+--------------------+ | | +----+------+ +----+-----+ | <head> | | <body> | +----+------+ +----+-----+ | | +----+------+ +------------+------------+ | <title> | | | +-----------+ +----+---+ +---------+ | <h1> | | <p> | +------------------+ +--------+ +---------+ | "Simple Document"| | +------------------+ +-----------+-----------+ | | +------+--------+ +----+-----+ | "This is a" | | <i> | +---------------+ +----+-----+ | +----+------+ |"paragraph"| +-----------+
上图中每个方框是文档的一个节点(node),它表示一个 Node 对象。注意树形的根部是 Document 节点,它代表整个文档。代表 HTML 元素的节点是 Element 节点。代表文本的节点是 Text 节点。Document、Element 和 Text 是 Node 的子类
HTML 元素可以有一个 id 属性,在文档中该值必须 唯一 ,可以使用 getElementById() 方法选取一个基于唯一 ID 的元素
var section1 = document.getElementById('selection1');
在低于 IE 8 版本的浏览器中, getElementById() 对匹配元素的 ID 不区分大小写,而且也返回匹配 name 属性的元素
var radiobuttons = document.getElementsByName('favorite_color');
getElementsByName() 定义在 HTMLDocument 类中,而不在 Document 类中,所以它 只针对 HTML 文档可用 ,XML 中不可用。它返回一个 NodeList 对象,后者的行为类似一个包含若干 Element 对象的只读数组。在 IE 中,也会返回 id 属性匹配指定的元素
// 返回所有的 span 标签元素 var spans = document.getElementsByTagName('span'); // 返回所有元素 var allTags = document.getElementsByTagName('*'); // 选取第一个 span 里面的所有 a 标签 // Element 类也定义 getElementsByTagName() 方法, // 它只取调用该方法的元素(spans)的后代元素 var links = spans[0].getElementsByTagName('a');
HTMLDocument 对象还定义了两个属性,它们指代特殊的单个元素而不是集合: document.body
是一个 HTML 文档的