HTML - Document Object Model

Previous
Quiz
Next

HTML Document Object Model (DOM)

The HTML Document Object Model (in short, HTML DOM) represents all the elements of an HTML document in a hierarchical order (or tree structure). Where each node of this tree represents an element in the HTML document.

Accessing and Modifying HTML DOM

Using the HTML DOM methods we can access the tree and modify the structure or, contents of the respective HTML document. We can also have events attached to the nodes.

HTML DOM Tree Structure

For instance, if your HTML document contains elements like <html>, <head>, <body>, <title>, <link>, <img> and <p>, the browser will create a DOM Tree of the HTML document that can be represented as shown in the diagram given below −

HTML DOM

Please note that each HTML document contain <html>, <head> and <body> tags. The root element is <html>, and <head> and <body> tags are its child element.

What is Document Object Model?

The Document Object Model (DOM) is a programming interface that works as a bridge between web pages and scripts or programming languages. It represents a web document (like an HTML or XML) as a tree of objects where each branch of the tree ends with a node, and each node contains objects.

Click on the button given below to understand it properly. It will generate a DOM Tree.

DOM Tree Example

The DOM provides a set of methods that allow programming languages, such as JavaScript, to access the DOM tree. Using these methods, you can change the document's structure, style, or content. It makes a web page interactive and dynamic.

The DOM is not a programming language, it is designed to be language independent. Most web developers use the DOM through JavaScript, however, implementations of the DOM can be built for any language.

HTML DOM vs JavaScript DOM

We use HTML to structure a web page and JavaScript to make it interactive. However, JavaScript can not understand the a web page directly. It takes help of the HTML DOM. When an HTML page is loaded, the browser creates an Object Model of the page, which JavaScript can then interact with to manipulate the content, structure, and styles of the page.

JavaScript can perform the below operations with the help of object model −

  • Access and replace HTML elements.
  • Access and replace HTML attributes.
  • Change all the CSS styles in the page.
  • Respond to user events.
  • Add animation to the web page.

The below table explains the difference between HTML DOM and JavaScript DOM −

HTML DOM JavaScript DOM

The HTML DOM is an Object Model for HTML that represents all elements of an HTML document in a tree like structure.

The HTML DOM is an API for JavaScript that helps add, change, and replace elements, attributes and events of an HTML document.

DOM Methods Reference

Below is a list of important DOM methods −

Sr.No Method & Description
1. toString()

It is used to convert an HTML element into a string format.
2. setAttribute()

This method allows you to define attributes for a particular element.
3. setAttributeNode()

This method allows you to define a particular attribute node on a particular element.
4. scrollIntoView()

It ensures that a particular element on a web page of scrollable container becomes visible by adjusting the scroll position.
5. querySelector()

It is used to select and access the first HTML element that matches a given CSS selector(s) within the document.
6. querySelectorAll()

This method allows you to select and access all HTML element that matches a given CSS selector(s) within the document.
7. remove()

This method can delete an element completely from the web page.
8. removeAttribute()

This method is used to delete any attribute that has been set on an HTML element within the DOM structure.
9. removeAttributeNode()

It allows you to delete a specific attribute node from an element.
10. removeChild()

It is used to delete the selected child element from its parent element.
11. removeEventListener()

This method allows you to delete an event listener that was previously assigned to an element.
12. replaceChild()

This method enable us to replace one child element with another in a parent element.
13. hasAttribute()

It is used to check whether an attribute exists within an HTML element.
14. hasAttributes()

This method checks whether an element in HTML DOM has attributes.
15. hasChildNodes()

It is used to check if an HTML element has any child element inside it.
Sr.No Method & Description
16. getAttribute()

It returns the value of a specified attribute that belongs to an HTML element.
17. getBoundingClientRect()

This method is used to get the size of an element and its position relative to the viewport.
18. closest()

This method returns the closest ancestor of the current element (or the current element itself) that matches a given CSS selector. If no such ancestor exists, it returns null.
19. contains()

You can check if a DOM Element contains another element within its subtree using this method.
20. click()

The click() method activates a mouse click on an element.
21. normalize()

It is used to combine adjacent text nodes within an HTML element by removing any empty text nodes.
22. isDefaultNamespace()

It is used to check if a specific namespace URI is the default namespace for elements within a document or element.
23. isEqualNode()

This method checks if two nodes are equal by comparing their attributes, types, and child nodes.
24. isSameNode()

It checks whether two node references point to the same node object within an HTML document.
25. isSupported()

This method is used to check if a web browser can supports or handle a particular feature or functionality on a web page.
26. insertAdjacentElement()

This method allows you to insert a new HTML element exactly where you need it relative to another element on a webpage.
27. insertBefore()

This method allows you to add a new child element inside a parent element, specifying its position relative to another child element.
28. blur()

This method allows you to dynamically remove focus from an element in the HTML DOM.
29. matches()

This method checks if an element matches a given CSS selectors.
30. insertAdjacentHTML()

It helps you to insert a specified HTML code at a specific position relative to the element that calls this method.
31. addEventListener()

It is used to register event handlers to elements.
32. cloneNode()

It duplicates a node, including it's attributes and child nodes.
33. appendChild()

This method is used to add a new child node(element) as the last child node of the specified parent node.
34. compareDocumentPosition()

It enables understanding of document structure by comparing the positions of two DOM elements(nodes) and returns a bitmask(numeric value).
35. focus()

This method sets focus to specific webpage elements.
36. getAttributeNode()

It is used to get the attribute node object.
37. getElementsByClassName()

This method retrieves a live HTMLCollection of elements that match a specified class name within a document or a specific element.
38. getElementsByTagName()

It retrieves a live HTMLCollection of elements that match a specified tag name.
39. insertAdjacentText()

It allows you to insert a text content at a specific position relative to the element that calls this method.
40. namedItem()

It is used to get the first element of collection whose id or name matches with the name mentioned in parameter.
41. item()

It returns the element from the HTMLCollection located at specified index in parameter.
42. entries()

This method retrieves an iterator, that allows us to iterate through all the key/value pairs in the object.
43. forEach()

This method calls the callback function mentioned in the parameter once for each value pair in the list in the order of their insertion.
44. item()

This method retrieves a node from the NodeList specified by the index in the parameter.
45. keys()

This method retrieves an iterator that allows us to go through all the keys contained in the NodeList.
46. writeln()

This method provides the functionality to write HTML or JavaScript expressions directly to a document. It adds a newline character after each statement.
47. write()

This method provides the functionality to write HTML or JavaScript expressions directly to a document.
48. hasFocus()

It is used for determining if the document or any element inside the document has focus or not.
49. renameNode()

It is used to rename the nodes.
50. open()

This method opens a document for writing.
51. normalizeDocument()

This method normalize an entire HTML document.
52. normalize()

It removes empty text nodes, and joins adjacent text nodes from parent node.
53. adoptNode()

This method adopts a node from another document into the current document.
54. addEventListener()

It is used to set up a function that will be called whenever the specified event is delivered to the target.
55. execCommand()

This method is used for executing a command specified on the editable section that is being selected by the user.
56. createTextNode()

It is used to create a text node with the specified text.
57. createEvent()

It is used for creating an event object whose event type is specified in the parameter.
58. createDocumentFragment()

It creates a new empty document fragment which resides in memory.
59. createComment()

This method is used for creating a comment node with the given text.
60. createAttribute()

It is used to create an attribute with a specific name using JavaScript for an HTML element and return the Attr object.
61. close()

It closes the output stream.
62. getElementsByTagName()

It is a read-only method which is used to get the collection of all the elements in the document having the specified tag name in parameter.
63. getElementsByName()

This method is used to return collection of elements with the name attribute specified in the parameter.
64. getElementsByClassName()

This method is used for getting the collection of all the elements in the document with specified class name.
65. getElementById()

It returns the element of the given ID.
66. createElement()

This method creates an HTML element specified by tag name or element name.
67. add()

This method adds one or more tokens specified in the parameter to the DOMTokenList.
68. contains()

This method checks whether the list contains the specified token, and returns a boolean value accordingly.
69. entries()

This method returns an iterator that is allowing to go through all the key/value pairs.
70. forEach()

This method calls the callback function mentioned in the parameter once for each value pair in the list in the order of their insertion.
71. item()

This method returns a token from the DOMTokenList specified by the index in the parameter.
72. keys()

This method returns an iterator which allows you to go through all the keys contained in the token list.
73. remove()

This method removes one or more tokens specified in the parameter to the DOMTokenList.
74. replace()

This method replaces the existing token in DomTokenList with a new token specified in the parameter.
75. supports()

This method checks whether the token specified in the parameter is supported in DOMTokenList.
76. toggle()

This method dynamically adds or removes a token or class from an element class attribute.
77. values()

This method returns an iterator allowing us to go through all values contained in the token list.

DOM Properties Reference

Below is a list of important DOM properties −

Sr.No Method & Description
1. title

It helps us to access and update the value stored in an element's title attribute.
2. textContent

This property is used to access and update the text content of an HTML element and all its child elements as a single string.
3. tagName

It gives you the name of the HTML tag in uppercase that defines an element on a webpage.
4. style

Using this property, you can get the CSS styles that are directly set for a particular element.
5. tabIndex

It is used to access and update the value of the tabIndex attribute for an element.
6. scrollLeft

This property is used to access and update how far an element's content is scrolled horizontally.
7. scrollTop

It is used to access and update how far an element's content is scrolled vertically.
8. scrollWidth

This property gives you the total horizontal width of an element's content in pixels.
9. scrollHeight

You can get the total vertical height of an element's content in pixels using this property.
10. id

The id property is used for setting and retrieving the value of the element's id attribute.
11. innerText

It allows us to retrieve or change the visible text content directly within an HTML element on a web page.
12. isContentEditable

It is used to check if a webpage element can be edited by users directly.
13. lang

The lang property is an attribute of an HTML element that specifies the language code.
14. lastChild

The lastChild property returns a node that points to the last child node of a specific parent element.
15. lastElementChild

It returns a node that holds the last child element of a parent element.
Sr.No Properties & Description
16. namespaceURI

The namespaceURI property of an element provides the namespace URI assigned to the element.
17. nextElementSibling

Using this property, you can get the immediate next node in the sequence of a particular element.
18. nextSibling

It is used to access the immediate next node in sequence from the current node within the DOM tree.
19. nodeName

This property is used to identify a node's type and name based on its content.
20. nodeType

The nodeType Property returns an integer value representing the type of a node.
21. nodeValue

It is used for accessing and updating the value of a node.
22. offsetHeight

This property is used to get the complete visible height of that element on the webpage, including both its vertical padding and borders, measured in pixels.
23. offsetLeft

It returns the pixel based measurement of the distance from the element's left boundary to its nearest positioned parent's left boundary.
24. offsetParent

It is used to find the closest ancestor element that affects the positioning of another element.
25. offsetWidth

The offsetWidth property of an element gives you the total visible width of that element on the webpage.
26. outerHTML

The outerHTML property fetches the entire HTML code of an element.
27. outerText

This property can access or update the text content of an HTML element, including all its nested text and elements.
28. ownerDocument

It gives you the object for the document node that contains a specific element.
29. parentElement

It allows you to access the immediate parent element of a particular element within the HTML element.
30. parentNode

This property is used to access the immediate parent node of a particular node within the HTML element.
31. classList

It acts as an active container that holds a collection of CSS classes assigned to an element's class attribute.
32. childNodes

It is used to retrieve all child nodes of an element, including elements, text nodes, and comments.
33. className

You can access or modify the value of the class attribute of an element using this property.
34. clientTop

It is used to get the accurate element positioning and size calculation in webpage layouts.
35. firstElementChild

It provides the first child element within a given parent element.
36. offsetTop

Using this property, you can get the pixel-based vertical distance from the element's top edge of its nearest positioned ancestor's top edge.
37. attributes

It returns 'NameNodeMap' containing the collection of attributes of an HTML element
38. accesskey

This property allows you to assign a keyboard shortcut to an element on a webpage.
39. firstChild

It helps you to access the very first child node of a given parent element in the HTML DOM.
40. innerHTML

This property allows us to read the existing HTML content of an element and update it with new HTML content.
41. dir

It provides access for setting and retrieving the value of dir attributes of any element in HTML.

42. contentEditable

You can make text content inside the HTML elements editable using this property.
43. clientWidth

It returns the width of an element, including padding but excluding margin, border, or scrollbar width.
44. clientLeft

This property is used to get the width of an element's left border, excluding left padding or margin.
45. clientHeight

It is used to get the inner height of an element, including padding but not margin, border, or scrollbar width.
46. children

This property returns a collection of child elements.
47. childElementCount

It returns the count of direct child elements of a specified element.
48. src

This property used for elements like <img>, <script>, or <iframe> to get or set the source URL.
49. href

This property is used for anchor <a> elements to get or set the hyperlink reference.
50. checked

This property is used to get or set the checked state of a checkbox or radio button.
51. disabled

This property is used to get or set the disabled state of an input element.
52. length

It returns the number of elements in an HTMLCollection.
53. length

This method returns the number of items in the NodeList.
54. value

This property is used to set or get the value of an attribute.
55. specified

It checks whether the mentioned attribute is specified or not.
56. name

It is used get the name of the used attribute on an element.
57. isId

This property determines whether a HTML attribute is an 'id' attribute or not.
58. URL

It is a read-only property which returns the complete URL of the document including the protocol.
59. title

This property is used to set or get the title of the document.
60. strictErrorChecking

It is used to determine whether document enforce strict error checking or not.
61. scripts

It is a read-only property used for returning all the script elements present within HTML document as a collection.
62. links

The links is a read-only property which returns a collection of all the links corresponding to a and area elements with href attribute.
63. lastModified

This property returns the date and time of the current document when it was last modified.
64. inputEncoding

The inputEncoding property returns a String which represents the documents character encoding.
65. implementation

This returns a DOMImplementation object which is associated with the current document.
66. images

It is a read-only property used for returning all the img elements present within HTML document as a collection.
67. head

The head property returns the HTML head element.
68. forms

The forms is a read-only property used for returning all the form elements present within HTML document as a collection.
69. embeds

It is a read-only property which returns all the embed elements present within HTML document as a collection.
70. domConfig

This property is deprecated due to which will return undefined in all new browsers.
71. documentURI

This property is used to set or return the document's location.
72. documentMode

The documentMode property is an IE8 property which determines the rendering mode used by browser.
73. documentElement

It returns the documentElement as an Element Object.
74. doctype

This property returns the DTD (Document Type Declaration) that are associated with the current HTML document.
75. designMode

It helps us to determine if the entire document is editable or not.
76. defaultView

It is used for returning document's window object.
77. cookie

The HTML DOM document cookie property is used for creating, reading and deleting cookies.
78. charset

It returns the character encoding of the HTML document.
79. applets

It is used to return a list of all the applets elements within a document but this property is now deprecated.
80. characterSet

This property is used to get character encoding of the document.
81. anchors

The anchors property is a read only property which lists all the "a" tag with name attribute in the document.
82. baseURI

It is used to return the base Uniform Resource Identifier (URI) of the document.

83. length

This method returns the number of tokens in a token list.
84. value

This method returns the DOMTokenList serialized as a string.
85. domain

It is used for getting the domain name of the server on which the document is currently being executed.

Frequently Asked Questions about DOM

There are several Frequently Asked Questions(FAQ) about DOM, this section tries to answer some of them briefly.

The full form of DOM is Document Object Model.

In JavaScript, DOM is used to interact with HTML web pages and manipulate the content, structure, and styles of the page.

No, DOM is not a programming language. It is a programming interface that connects web pages to programming languages.

The DOM interfaces provide various methods and properties to interact with and manipulate web pages. Some common interfaces are Document, Element, Event and so on.

Print Page
Previous
Next
Advertisements