JS DOM Elements (Part 1)— HTML Collection, NodeList ?

Photo by Sai Kiran Anagani on Unsplash

So, you have done alot of html and css and now trying to look into js part :). let`s start first with DOM Elements, cause of you are somehow habitual to play with class and id selectors in your css code and tags in html.

There are several ways to find These elements using Javascript :
Example : document.getElementById

Please give special attention in s word in getElement : I urge you to try in your console :

1. getElementById
2. getElementsByClassName
3. getElementsByTagName
4. querySelector
5. querySelectorAll

A) NodeList :
document.querySelectorAll(‘div’)
document.body.childNodes
- Loop Method : forEach()

B) HTML Collection :
document.getElementsByClassName(‘content-description’)
document.getElementsByTagName(‘div’)
document.body.children
- Loop Method : for()

1. getElementById : Used once in a page and return single div element.

document.getElementById :
<div id=”content”>content here</div>

<script>
document.getElementbyId(‘content’);
</script>

2. getElementsByClassName : Returns HTML Collection, Array like object. Please note that class name is without dot(.)

document.getElementsByClassName :
<div id=”content” class=”content-description”>content here</div>

<script>
document.getElementsbyClassName(‘content-description’);
</script>

3. getElementsByTagName : Returns HTML Collection, Array like object.

<div id=”content” class=”content-description”>content here</div>
<div class=”tab”></div>

<script>
document.getElementsbyTagName(‘div’);
</script>

4. querySelector : This will return single Element, and not array like object.

<div id=”content” class=”content-description”>content here</div>
<div class=”tab”></div>

<script>
document.querySelector(‘div’);
</script>

5. querySelectorAll : Returns NodeList, Array like object.

<div id=”content” class=”content-description”>content here</div>
<div class=”tab”></div>

<script>
document.querySelectorAll(‘div’);
</script>