Tutorials Tonight's Logo

JAVASCRIPT DOM METHODS


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.

Javascript is mainly used for changing and manipulating HTML elements. Before we change any element we must first have that element. To have those elements we grab those elements by some DOM methods.

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.

Javascript provides us with various methods to find an element within the document.

get element in javascript

Methods Description
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.

<p id="id1">This element has id = "id1".</p>
  <button onclick="findElement()">Access element</button>

<script>
  function findElement() {
    const element = document.getElementById("id1");
    element.innerHTML = "Element found!";
  }
</script>
▶ Run the code

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.

Properties/Methods Description
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.style. = value Using these element properties you can set CSS to the element using javascript
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 in javascript

The innerHTML is an element property which gets or sets the inner HTML of the specific element.

Note: If any element like <p>, <div>, etc contains a child text node that includes characters &, < or > then the innerHTML property returns &amp;, &lt; and &gt; respectively.

<p id="id1">This is <strong>Paragraph 1</strong>.</p>
<div id="id2">
  <div class="column">
    <p>This is column 1.</p>
  </div>
  <div class="column">
    <p>This is column 2.</p>
  </div>
</div>
<button onclick="textNode1()">Show node1 innerText</button>
<button onclick="textNode2()">Show node2 innerText</button>

<script>
  const node1 = document.getElementById("id1");
  const node2 = document.getElementById("id2");
  function textNode1() {
    alert(node1.innerHTML);
  }
  function textNode2() {
    alert(node2.innerHTML);
  }
</script>
▶ Run the code

innerText in javascript

The 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.

Note: innerText property return content of all its nodes except <style> and <script>.

<p id="id1">This is <strong>Paragraph 1</strong>.</p>
<div id="id2">
  <div class="column">
    <p>This is column 1.</p>
  </div>
  <div class="column">
    <p>This is column 2.</p>
  </div>
</div>
<button onclick="textNode1()">Show node1 innerText</button>
<button onclick="textNode2()">Show node2 innerText</button>

<script>
  const node1 = document.getElementById("id1");
  const node2 = document.getElementById("id2");
  function textNode1() {
    alert(node1.innerText);
  }
  function textNode2() {
    alert(node2.innerText);
  }
</script>
▶ Run the code

In the coming section, we will look at how to handle attributes in DOM elements.


DOM methods to create and remove elements

Methods Description
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.



Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.