DEV Community

Cover image for JavaScript DOM
Ganesh Patil
Ganesh Patil

Posted on • Updated on

JavaScript DOM

Introduction

JavaScript DOM is essential part of web development and there are multiple methods to manipulate HTML elements using JavaScript DOM. The Document object module(DOM) can dynamically changed the elements of HTML objects there are lot o cool tings you can do with JavaScript DOM.

The DOM follows the methods

1.document.getElementById(HTMLElementid)
select an HTML element by id and manipulating HTML element.

<h1 id="title"> Hello readers!</h1>
<script>
document.getElementById('title')
</script> 

Enter fullscreen mode Exit fullscreen mode

2.document.getElementsByTagName(HTMLtag)
select an HTML element by tag name and manipulating HTML element.

<h1> Hello readers!</h1>
<script>
document.getElementByTagName('h1')
</script> 
Enter fullscreen mode Exit fullscreen mode

3.document.getElementsByClassName(HTMLClass)
select an HTML element by class name and manipulating HTML element.

<h1 class="title"> Hello readers!</h1>
<script>
document.getElementByClassName('title')
</script> 
Enter fullscreen mode Exit fullscreen mode

The querySelector() method returns the first element that matches a CSS selector. to select all child node we use querySelectorAll() method

Event Listeners in DOM

An event is action occurs in the web browsers, there are multiple action listeners available in javascript

  1. click event()
<button id="btn">Click Me!</button>

<script>


let btn = document.querySelector('#btn');

function display() {
    alert('It was clicked!');
}

btn.addEventListener('click',display);

</script>

Enter fullscreen mode Exit fullscreen mode

when button was pressed it will display alert box which show it was clicked! and we mentioned the click event inside the function display.

There are multiple event are available for manipulating HTML content like mouse event mouseover(), keyevent() and keydown() lot of source are available for listeners.

Example:

<button>change color</button>

<script>
 const btn = document.querySelector('button')
   btn.addEventListener('click', () => {
  document.body.style.background = "red"
});

</script>
Enter fullscreen mode Exit fullscreen mode

when user click on change color button the body background will automatically change into red colour.

Repositories to start with Javascript DOM projects

  1. Github repo with 100 DOM Projects
  2. 100+ javascript projects

Hey, I'm Ganesh 🖐
I write article on web development and sharing valuable resources which might helps you as developer or beginner.

for more content

follow me Ganesh_Patil
You can also connect with me on twitter
to get more content related to web development
Thank you for the support!

Discussion (4)

Collapse
lukeshiru profile image
Luke Shiru

Worth mentioning that you can replace almost every selector method you used with document.querySelector or document.querySelectorAll:

  • getElementById("title") 👉 querySelector("#title").
  • getElementTagName("h1") 👉 querySelector("h1").
  • getElementsByClassName("title") 👉 querySelectorAll(".title").

The good thing about using those methods is that the code ends up being way more consistent.

Cheers!

Collapse
patilganesh1010 profile image
Ganesh Patil Author

yes definitely Luke, It makes code more readable

Collapse
abhinav1217 profile image
Abhinav Kulshreshtha

I think you made a typo, getElementTagName should be getElement*sBy*TagName same thing for ClassName. Also TagName and ClassName returns an array of nodes, while getElementById will return first node on the tree.

Also I always wondered, will getElementsByTagName work on custom elements or react components?

Collapse
frankwisniewski profile image
Frank Wisniewski

document.body.style.background