Javascript DOM- Document
The document object represents your web page. You can access any element in an HTML page, you always start with accessing the document object.
Examples: How you can use the document object to access and manipulate HTML.
HTML Elements:
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.
Changing HTML Elements:
Property Description
element = new html content: Change inner HTML of an element.
element.attribute = new value: Change attribute value of an HTML element.
element.style.property = new style: Change style of an HTML element.
Method Description
element.setAttribute(attribute, value): Change attribute value of an HTML element.
Adding and Deleting Elements:
Method Description
document.createElement(element): Create an HTML element.
document.removeChild(element): Remove an HTML element.
document(element): Add an HTML element.
document.replaceChild(new, old): Replace an HTML element.
document.write(text): Write into the HTML output stream.
Adding Events Handlers:
Method Description
document.getElementById(id).onclick = function(){code}: Adding event handler code to an onclick event.
Finding HTML Objects:
HTML DOM Level 3: more objects, collections, and properties were added.
Property Description
document.anchors: Returns all <a> elements that have a name attribute.
document.applets: Returns all <applet> elements.
document.baseURI: Returns the absolute base URI of the document.
document.body: Returns the <body> element.
document.cookie: Returns the document’s cookie.
document.doctype: Returns the document’s doctype.
document.documentElement: Returns the <html> element.
document.documentMode: Returns the mode used by the browser.
document.documentURI: Returns the URI of the document.
document.domain: Returns the domain name of the document server.
document.domConfig Obsolete: Returns the DOM configuration.
document.embeds: Returns all <embed> elements.
document.forms: Returns all <form> elements.
document.head: Returns the <head> element.
document.images: Returns all <img> elements.
document.implementation: Returns the DOM implementation.
document.inputEncoding: Returns the document’s encoding (character set).
document.lastModified: Date and time the document was updated.
document.links: Returns all <area> and <a> elements that have a href attribute.
document.readyState: Returns the (loading) status of the document.
document.referrer: Returns the URI of the referrer.
document.scripts: Returns all <script> elements .
document.strictErrorChecking: Returns if error checking is enforced 3
document.title: Returns the <title> element.
document.URL: Returns the complete URL of the document.