DEV Community

swetha palani
swetha palani

Posted on

HTML DOM Elements

  1. DOM (Document Object Model) is a programming interface for web documents.

  2. It represents an HTML page as a tree structure where each node is an object.

WHAT IS HTML ELEMENT:

An HTML Element is everything between an opening tag < > and a closing tag </ >.

<p>Hello World</p>
Enter fullscreen mode Exit fullscreen mode

DOM ELEMENT CHARACTERISTICS:

  1. Properties → info about the element (example: id, className, innerHTML).

  2. Methods → actions that can be performed (example: .click(), .appendChild()).

  3. Events → reactions to user actions (example: onclick, onmouseover).

TYPES OF HTML ELEMENT:

  1. Block-level elements – start on a new line, take full width => div, h1, p tags

  2. Inline elements – stay in the same line, take only needed space => span , a, img tags

ACCESSING ELEMENT IN THE DOM :

  1. getElementById() → by unique ID

  2. getElementsByClassName() → by class name

  3. getElementsByTagName() → by tag name

  4. querySelector() → by CSS selector (first match)

  5. querySelectorAll() → by CSS selector (all matches)

id Attribute

Used to give a unique name to an HTML element, No two elements should have the same id, Mainly used when we want to select a single specific element in JavaScript or CSS.

<h1 id="idclass"> DOM JS</h1>
<script>
document.getElementById("idclass").style.color="blue"
</script>
Enter fullscreen mode Exit fullscreen mode

class attribute

Class attribute used group elements, you can using an same class name for multiple element.Manipulating class in javascript ,We usually use classList to work with classes.

<p class="para">HELLO</p>
<p class="para">WELCOME</p>
<script>
 const a=document.getElementsByclassName("para");
 console.log(a[0])
</script>
Enter fullscreen mode Exit fullscreen mode

4 methods in class element for JS

  1. Add a class
  2. Remove a class
  3. Toggle a class (if present → remove, if absent → add)
  4. Check if a class exists

  5. Add a class

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      color: red;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <p id="myText">Hello Swetha</p>
  <button onclick="addClass()">Add Class</button>

  <script>
    function addClass(){
      document.getElementById("myText").classList.add("highlight");
    }
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

2 . Remove a Class

<!DOCTYPE html>
<html>
<head>
  <style>
    .big {
      font-size: 30px;
    }
  </style>
</head>
<body>
  <p id="myText" class="big">Hello Palani</p>
  <button onclick="removeClass()">Remove Class</button>

  <script>
    function removeClass(){
      document.getElementById("myText").classList.remove("big");
    }
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

3 . Toggle a Class

<!DOCTYPE html>
<html>
<head>
  <style>
    .blue {
      color: blue;
    }
  </style>
</head>
<body>
  <p id="myText">Toggle Me!</p>
  <button onclick="toggleClass()">Toggle Class</button>

  <script>
    function toggleClass(){
      document.getElementById("myText").classList.toggle("blue");
    }
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

2. getElementsByClassName() → by class name

document.getElementsByClassName("className") is a DOM method used to select all elements that have a specific class name.

<!DOCTYPE html>
<html>
<body>
  <p class="mypara">This is first paragraph</p>
  <p class="mypara">This is second paragraph</p>

  <script>

    let para = document.getElementsByClassName("mypara");
    para[0].innerHTML = "Changed first paragraph";

    para[1].innerHTML = "Changed second paragraph";
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

3. getElementsByTagName() → by tag name

document.getElementsByTagName("tagname") is a DOM method used to select all elements with the given HTML tag name.
Example tags: "p", "h1", "div", "li", etc.

<!DOCTYPE html>
<html>
<body>
  <h1>Heading One</h1>
  <h1>Heading Two</h1>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>

  <script>

    let headings = document.getElementsByTagName("h1");

    headings[0].style.color = "red";   // first h1 becomes red
    headings[1].style.color = "blue";  // second h1 becomes blue


    let paras = document.getElementsByTagName("p");

    paras[0].innerHTML = "Changed first paragraph";
    paras[1].innerHTML = "Changed second paragraph";
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

4. querySelector() → by CSS selector (first match)

document.querySelector("CSS selector")

Selects the first element that matches the given CSS selector.

If multiple elements match, it only picks the first one.

Very flexible → you can use id (#), class (.), or tag name just like CSS.

<!DOCTYPE html>
<html>
<body>
  <h1 id="main">Main Heading</h1>
  <p class="para">First paragraph</p>
  <p class="para">Second paragraph</p>

  <script>

    document.querySelector("#main").style.color = "red";


    document.querySelector(".para").innerHTML = "Changed only first paragraph";


    document.querySelector("p").style.fontWeight = "bold";
  </script>
</body>
</html>

Enter fullscreen mode Exit fullscreen mode

Top comments (0)