There are many websites in which javascript is used and it is obvious that you want to get access to different DOM elements. 

There are many different ways to access DOM elements in this blog we will be going to go through each of them and understand them properly. 


getElementById


The getElementById() method allows you to retrieve an element from the DOM using the element's ID.

If no element exists in the DOM with the supplied ID, null will be returned instead.


Example:


<div id='mainId'>This is Id element</div>


<script>

const mainElement = document.getElementById('mainId');

console.log(mainElement);

// This is Id element 

</script>


getElementsByTagName


The getElementsByTagName() allows you to retrieve an HTMLCollection of elements that have the tag name you supply to the method. Examples of a tag name are div, p, span.


Items in an HTMLCollection can be accessed similarly to how you would access items in an array.


Example:


<div>This is div element</div>


<script>

const divElements = document.getElementsByTagName('div');

console.log(divElements[0]);

// <div>This is div element </div>

</script>


You can use this method on any element and not just the document. That way, you can retrieve all children of that element that have the supplied tag name.


Example:


<div>

This is div element

<p>

This is Paragraph

</p>

</div>


<script>

const divElements = document.getElementsByTagName('div');

const pElements = divElements[0].getElementsByTagName('p');

console.log(pElements[0]);

// <p>This is Paragraph </p>

</script>


getElementsByClassName()


The getElementsByClassName() method allows you to retrieve a live HTMLCollection of elements that have the class name you provide as a parameter.


A live HTMLCollection means that the items in the collection are updated with any updates that happen to the DOM. So, for example, if an item was part of the collection because it had the class provided as a parameter, but then its class was removed, the item will be removed from the collection.


Example:


<div class="mainClass">This is Div</div>


<script>

const mainElements = document.getElementsByClassName('mainClass');

console.log(mainElements[0]);

// This is Div

</script>


getElementsByName()


The getElementsByName() method allows you to retrieve elements by the value of the name attribute. For example, you can use it to retrieve input elements that have the name attribute set to email.


This method returns a live NodeList, which is generally similar to an HTMLCollection, but the items in the list can be accessed through the methods it provides.


Example:


<input type="email" name="email" value="abc@thecodingdev.com"/>

<input type="url" name="url" value="https://thecodingdev.com"/>


<script>

const urlElements = document.getElementsByName('url');


console.log(urlElements.item(0));

// <input type="url" name="url" value="https://thecodingdev.com"/> 

</script>



querySelector



The querySelector() method allows you to retrieve the first element that matches the specified selector.


Example:

<div class='main'>
<p>
This is Paragraph.
</p>
</div>

<script>
const elmentQuery = document.querySelector('.main > p');

console.log(elmentQuery);
// <p> This is Paragraph. </p>
</script>

This method can be used on any element, and not just the document. So, you can use it to retrieve a child element of a parent element that matches the specified selector.

Example:

<div class='main'>
<table>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Rahul</td>
</tr>
<tr>
<td>2</td>
<td>Rocky</td>
</tr>
<tr>
<td>3</td>
<td>Aditi</td>
</tr>
</tbody>
</table>
</div>

<script>
const table = document.querySelector('.main > table');
const thead = table.querySelector('thead');

console.log(thead);
//<thead><tr><th>Id</th><th>Name</th></tr></thead>
</script>


querySelectorAll


The querySelectorAll() method allows you to retrieve all elements that match the specified selector. This method returns a NodeList.

Example:

const elms = document.querySelectorAll('.main > p');
console.log(elms.item(0));


This method can be used on any element, and not just the document. So, you can use it to retrieve all child elements of a parent element that match the specified selector.

Example:

const table = document.querySelector('.main > table');
const rows = table.querySelectorAll('tr');
for (const row of rows) {
    console.log(row);
}



children


The children property allows you to retrieve all immediate child elements of the document or any element. This property's type is a live HTMLCollection.

Example:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.children);
}


firstElementChild


The firstElementChild property allows you to retrieve the first child element of the document or any element.

If the element does not have children, the value of firstElementChild is null.

Example:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.firstElementChild);
}


lastElementChild


The lastElementChild property allows you to retrieve the last child element of the document or any element.

If the element does not have children, the value of lastElementChild is null:

const rows = document.querySelectorAll('table tr');
for (const row of rows) {
    console.log(row.lastElementChild);
}



scripts


The scripts property allows you to retrieve all <script> elements in the document. It returns an HTMLCollection of elements.

Example:

console.log(document.scripts);



elementFromPoint


The elementFromPoint() method allows you to retrieve the top element starting from a specified point. It accepts x and y coordinates to locate the point to look for the element.

Example:

const elm = document.elemetFromPoint(100, 20);
console.log(elm);


elementsFromPoint


The elementsFromPoint() method allows you to retrieve an array of Elements starting from a specified point until the end of the viewport.

Example:

const elms = document.elementsFromPoint(100, 20);
console.log(elm[0]);


closest


The closest() method available on elements (not on the document) allows you to retrieve the closest ancestor (which are the parents) of the element that matches the specified selector. If no elements are found, the method returns null.

Example:

const closestElm = table.closest('div');
console.log(closestElm);


nextElementSibling



The nextElementSibling property on elements (not on the document) allows you to retrieve the element that follows the current element among its parent's child elements.

If there are no elements after this element, the value of the property will be null.

Example:

console.log(table.nextElementSibling);


previousElementSibling



The previousElementSibling property on elements (not on the document) allows you to retrieve the element that proceeds the current element among its parent's child elements.

If there are no elements before this element, the value of the property will be null.


Example:

console.log(table.previousElementSibling);



This tutorial explores a list of methods and properties that you can use to retrieve elements in JavaScript. Each has different purposes and can be used differently based on your use case.
If you have any doubts, please let us know in the comments.