JAVASCRIPT DOM METHODS

DOM Methods are the actions that you can perform on objects (elements) of DOM.

DOM methods include selecting an 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.

Here is an example of finding element using id rest you will see in the 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>

Modifying DOM Elements

From the above DOM methods, you can access the DOM elements, but what next after you accessed them. 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.

innerHTML in javascript

The innerHTML is an element property that 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 &, < and > 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>

innerText in javascript

The innerText is an element property that is used to set or returns the inner text content of the specific node and its descendants. This means it returns the 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>

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

DOM methods to create and remove elements

We will see more about these methods in the DOM manipulation section.