目录

JavaScript HTML DOM 文档


HTML DOM 文档对象是网页中所有其他对象的所有者。


HTML DOM 文档对象

文档对象代表您的网页。

如果要访问 HTML 页面中的任何元素,总是从访问文档对象开始。

下面是一些如何使用文档对象访问和操作 HTML 的示例。


查找 HTML 元素

Method Description
document.getElementById(id) Find an element by element id
document.getElementsByTagName(name) Find elements by tag name
document.getElementsByClassName(name) Find elements by class name

更改 HTML 元素

Property Description
element.innerHTML =  new html content Change the inner HTML of an element
element.attribute = new value Change the attribute value of an HTML element
element.style.property = new style Change the style of an HTML element
Method Description
element.setAttribute(attribute, value) Change the attribute value of an HTML element

添加和删​​除元素

Method Description
document.createElement(element) Create an HTML element
document.removeChild(element) Remove an HTML element
document.appendChild(element) Add an HTML element
document.replaceChild(new, old) Replace an HTML element
document.write(text) Write into the HTML output stream


添加事件处理程序

Method Description
document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event

查找 HTML 对象

第一个 HTML DOM Level 1 (1998) 定义了 11 个 HTML 对象、对象集合和属性。这些在 HTML5 中仍然有效。

后来,在 HTML DOM Level 3 中,添加了更多对象、集合和属性。

Property Description DOM
document.anchors Returns all <a> elements that have a name attribute 1
document.applets Deprecated 1
document.baseURI Returns the absolute base URI of the document 3
document.body Returns the <body> element 1
document.cookie Returns the document's cookie 1
document.doctype Returns the document's doctype 3
document.documentElement Returns the <html> element 3
document.documentMode Returns the mode used by the browser 3
document.documentURI Returns the URI of the document 3
document.domain Returns the domain name of the document server 1
document.domConfig Obsolete. 3
document.embeds Returns all <embed> elements 3
document.forms Returns all <form> elements 1
document.head Returns the <head> element 3
document.images Returns all <img> elements 1
document.implementation Returns the DOM implementation 3
document.inputEncoding Returns the document's encoding (character set) 3
document.lastModified Returns the date and time the document was updated 3
document.links Returns all <area> and <a> elements that have a href attribute 1
document.readyState Returns the (loading) status of the document 3
document.referrer Returns the URI of the referrer (the linking document) 1
document.scripts Returns all <script> elements 3
document.strictErrorChecking Returns if error checking is enforced 3
document.title Returns the <title> element 1
document.URL Returns the complete URL of the document 1