Development/JavaScript

javascript - document object

linuxism 2015. 7. 11. 14:18


HTML DOM Nodes

In the HTML DOM (Document Object Model), everything is a node:

  • The document itself is a document node
  • All HTML elements are element nodes
  • All HTML attributes are attribute nodes
  • Text inside HTML elements are text nodes
  • Comments are comment nodes

The Document Object

When an HTML document is loaded into a web browser, it becomes a document object.

The document object is the root node of the HTML document and the "owner" of all other nodes:
(element nodes, text nodes, attribute nodes, and comment nodes).

The document object provides properties and methods to access all node objects, from within JavaScript.

Tip: The document is a part of the Window object and can be accessed as window.document.


Browser Support

The Document Object is supported in all major browsers.


Document Object Properties and Methods

The following properties and methods can be used on HTML documents:

Property / MethodDescription
document.activeElementReturns the currently focused element in the document
document.addEventListener()Attaches an event handler to the document
document.adoptNode()Adopts a node from another document
document.anchorsReturns a collection of all <a> elements in the document that have a name attribute
document.appletsReturns a collection of all <applet> elements in the document
document.baseURIReturns the absolute base URI of a document
document.bodySets or returns the document's body (the <body> element)
document.close()Closes the output stream previously opened with document.open()
document.cookieReturns all name/value pairs of cookies in the document
document.createAttribute()Creates an attribute node
document.createComment()Creates a Comment node with the specified text
document.createDocumentFragment()Creates an empty DocumentFragment node
document.createElement()Creates an Element node
document.createTextNode()Creates a Text node
document.doctypeReturns the Document Type Declaration associated with the document
document.documentElementReturns the Document Element of the document (the <html> element)
document.documentModeReturns the mode used by the browser to render the document
document.documentURISets or returns the location of the document
document.domainReturns the domain name of the server that loaded the document
document.domConfigObsolete. Returns the DOM configuration of the document
document.embedsReturns a collection of all <embed> elements the document
document.formsReturns a collection of all <form> elements in the document
document.getElementById()Returns the element that has the ID attribute with the specified value
document.getElementsByClassName()Returns a NodeList containing all elements with the specified class name
document.getElementsByName()Returns a NodeList containing all elements with a specified name
document.getElementsByTagName()Returns a NodeList containing all elements with the specified tag name
document.hasFocus()Returns a Boolean value indicating whether the document has focus
document.headReturns the <head> element of the document
document.imagesReturns a collection of all <img> elements in the document
document.implementationReturns the DOMImplementation object that handles this document
document.importNode()Imports a node from another document
document.inputEncodingReturns the encoding, character set, used for the document
document.lastModifiedReturns the date and time the document was last modified
document.linksReturns a collection of all <a> and <area> elements in the document that have a href attribute
document.normalize()Removes empty Text nodes, and joins adjacent nodes
document.normalizeDocument()Removes empty Text nodes, and joins adjacent nodes
document.open()Opens an HTML output stream to collect output from document.write()
document.querySelector()Returns the first element that matches a specified CSS selector(s) in the document
document.querySelectorAll()Returns a static NodeList containing all elements that matches a specified CSS selector(s) in the document
document.readyStateReturns the (loading) status of the document
document.referrerReturns the URL of the document that loaded the current document
document.removeEventListener()Removes an event handler from the document (that has been attached with the addEventListener()method)
document.renameNode()Renames the specified node
document.scriptsReturns a collection of <script> elements in the document
document.strictErrorCheckingSets or returns whether error-checking is enforced or not
document.titleSets or returns the title of the document
document.URLReturns the full URL of the HTML document
document.write()Writes HTML expressions or JavaScript code to a document
document.writeln()Same as write(), but adds a newline character after each statement

Warning !!!

In the W3C DOM Core, the Document object inherits all properties and methods from the Node object.

Many of these properties and methods make no sense used on documents.

Avoid using these node object properties and methods on HTML document objects:

 Property / MethodReason for avoiding
document.attributesDocuments don't have attributes
document.hasAttributes()Documents don't have attributes
document.nextSiblingDocuments don't have siblings
document.nodeNameThis is always #document
document.nodeTypeThis is always 9 (DOCUMENT_NODE)
document.nodeValueDocuments don't have an node value
document.ownerDocumentDocuments don't have an owner document
document.ownerElementDocuments don't have an owner element
document.parentNodeDocuments don't have a parent node
document.previousSiblingDocuments don't have siblings
document.textContentDocuments don't have a text content



source - http://www.w3schools.com/jsref/dom_obj_document.asp