JavaScript - DOM Methods & Properties

Previous
Quiz
Next

In JavaScript, DOM methods are used to perform a particular action on HTML elements. The DOM represents a HTML document or web page with a logical tree. In the tree, each branch ends in a node, and each node contains objects. DOM methods allow us programmatic access to the tree. Using the DOM methods, you can change the document's structure, style, or content.

For example, you can use DOM methods to access HTML elements using id, attribute, tag name, class name, etc., add events to the document or HTML elements, add new HTML elements to the DOM, etc.

Syntax

Following is the syntax to access and execute the DOM method in JavaScript −

window.document.methodName();
OR
document.methodName();

You may or may not use the 'window' object to access the document object's method.

Here, we have explained some HTML DOM methods with examples and covered other methods in the reference.

JavaScript document.getElementById() Method

The JavaScript getElementById() method of the document object is the most popular method to access the HTML elements using the id.

Syntax

Follow the syntax below to use the document.getElementById() method.

const ele = document.getElementById("id");

The getElementById() method takes an id of the HTML element as a parameter.

Example

In the below code, the id of the 'div' element is 'output'.

In JavaScript, we use the document.getElementById() method to access the div element using its id.

Also, we use the 'innerHTML' property of the element to add extra HTML to the 'div' element.

<html>
<body>
   <button onclick = "accessEle()"> Access output and write </button>
   <p id = "output"> </p>
   <script>
      function accessEle() {
         document.getElementById("output").innerHTML = 
			"Hello User! You have just clicked the button!";
      }
   </script>
</body>
</html>

JavaScript document.addEventListener() Method

The addEventListener() method is used to add the event to the document.

Syntax

Follow the syntax below to use the addEventListener() method with a document.

document.addEventListener('mouseover', function () {
// Perform action on the document.
});

The addEventListener() method takes the event name as the first parameter and the callback function as a second parameter.

Example

In the below code, we added the 'mouseover' event to the document. Whenever you hover over the document, it will change the background color of the document body to red.

<html>
<body>
   <h3>JavaScript  document.addEventListener() Method </h3>
   <p> Hover over here to change background color </p>
   <script>
      document.addEventListener('mouseover', function () {
         document.body.style.backgroundColor = 'red';
      });
   </script>
</body>
</html>

JavaScript document.write() Method

The document.write() method adds the text or HTML to the document. It replaces the content of the document with the HTML passed as an argument of the method.

Syntax

Follow the syntax below to use the document.write() method.

document.write(HTML)

You can replace the 'HTML' argument with the text or HTML.

Example

In the below code, we execute the writeText() function when you click the button.

In the function, we use the document.write() method to add HTML to the web page. It replaces the HTML of the whole web page.

<html>
<body>
   <button onclick = "writeText()"> Add HTML </button>
   <script>
      function writeText() {
         document.write("<p>Hello Users, Text is written using the document.write() method. </p>");
      }
   </script>
</body>
</html>

List of DOM Methods

In the below table, we have listed all methods related to the HTML DOM −

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.
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. getBoundingClientRect()

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

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

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

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

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

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

This method retrieves an iterator, that allows us to iterate through all the key/value pairs in the object.
44. 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.
45. item()

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

It closes the output stream.
63. 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.
64. getElementsByName()

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

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

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

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

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

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

This method returns an iterator that is allowing to go through all the key/value pairs.
71. 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.
72. item()

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

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

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

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

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

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

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

List of DOM Properties

The below table shows all properties related to the HTML DOM −

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.
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.
Print Page
Previous
Next
Advertisements