DOM Methods are the actions that you can perform on objects (elements) of DOM.
DOM methods include grabbing element, creating a new element, changing the content of the element, changing CSS, removing element etc.
In this chapter, we will look at different kinds of methods and in further chapters, we will see these methods in detail with examples.
DOM Methods To Find Element
Most often, you want to manipulate HTML elements. To manipulate element you have to find the elements first.
|document.getElementById()||Select the unique element with given id. In case there are 2 same ID then it selects the first element.|
|document.getElementsByClassName()||Select collection elements with given classname|
|document.getElementsByTagName()||Select collection elements with given tagname|
|document.querySelector()||Select element the first element on the basic of CSS string|
|document.querySelectorALL()||Select a list of elements on the basic of CSS string|
Here is an example of finding element using id rest you will see in dom access section.
To find element using id use
getElementById() method. This method accepts a string argument which is the id of the specific element.
The method selects and returns the element.
This element has id = "id1".
Modifying DOM Elements
From the above DOM methods, you can access the DOM elements, but what next after you accessed. After accessing elements you can modify and make some changes to the HTML elements.
These methods and properties are used to change content, CSS style and get or set attributes to the element.
|element.innerHTML||This is an element property using which you can get or set the inner content of the element|
|element.innerText||It returns and sets the inner text of an element to the value given in string, without parsing to HTML|
|element.getAttribute(attribute_name)||This method is used to get the value of the specified attribute|
|element.setAttribute(attribute_name, value)||It is the element method which is used to set new attribute or modify the value of the attribute to the element|
|element.removeAttribute(attribute_name)||This element method removes the specified attribute from the element|
innerHTML is an element property which gets or sets the inner HTML of the specific element.
Note: If any element like
<div>, etc contains a child text node that includes charaters
> then the
innerHTML property returns
innerText is an element property which is used to set or returns the inner text content of the specific node and its descendants. Means, it returns inner text content of the node and all its child nodes.
innerText property return content of all its nodes except
In the coming section, we will look at how to handle attributes in DOM elements.
DOM methods to create and remove elements
|document.createElement()||Creates an element specified by tag name|
|document.createTextNode()||Creates a new text node|
|document.appendChild()||It appends another element to an element in the DOM|
|document.insertBefore()||This method inserts a node before a specified node, if the node already exists in the DOM then it changes its position|
|document.replaceChild(new,old)||It replaces an element from DOM with another element|
|document.removeChild()||It removes an element from DOM|
|document.remove()||This method removes the node from the DOM it is applied upon|
|document.write()||It write something in the document|
We will see more about these methods in the DOM manipulation section.