Javascript selector

Hello guys,

With Javascript, you can change HTML element content. To change content in HTML element, first you need to select it. There are several methods to select element using different aspects like id or class base.

In this article, we will go through different way to select HTML elements in Javascript. So lets start.

The getElementById() method returns the element with the id of specified value. This is one of the common methods used in Javascript to manipulate HTML element.

Example:

<div id="start">Start</div>
<script type="text/javascript">
    var element = document.getElementById('start');
    console.log(element);
    // <div id="start">Start</div>
</script>

The getElementsByClassName() method returns object of all class name matched with query. Notice Elements plural word in method name.

Example:

<div class="point" id="start">Start</div>
<div class="point" id="end">End</div>
<script type="text/javascript">
    var elements = document.getElementsByClassName('point');
    console.log(elements);
    // HTMLCollection [div#start.point, start: div#start.point]
</script>

getElementsByTagName() method returns object of all elements with the tag name.

Example:

<div class="point" id="start">Start</div>
<span class="point" id="middle">Middle</span>
<div class="point" id="end">End</div>
<script type="text/javascript">
    var elements = document.getElementsByTagName('div');
    console.log(elements);
    // HTMLCollection [div#start.point, start: div#start.point]
</script>

getElementsByName('name') method returns object of all elements specified with the name.

Example:

<input type="text" name="username">
<input type="password" name="password">
<script type="text/javascript">
    var elements = document.getElementsByName('username');
    console.log(elements);
    // NodeList [input]
</script>

querySelector() method returns first element with specified attribute. If you want to return all the elements with matched, use querySelectorAll() method.

Example:

<div class="point">Start</div>
<div class="point">End</div>
<script type="text/javascript">
    var element = document.querySelector('.point');
    console.log(element);
    // <div class="point">Start</div>

    var elements = document.querySelectorAll('.point');
    console.log(elements);
    // NodeList(2) [div.point, div.point]
</script>

Below are the list of the selectors pass in these methods. 

Selector	Description
p	All p elements
#start	Id with value of start
.point	All class with value of point
p.start	All p elements with start class
p .start	All start class with descendant of p elements
h1, h2	All h1 elements and h2 elements
div + h1	First h1 elements with with immediate after div element
div > h1	All h1 elements with parent of div element
div ~ h1	Every h1 elements precede with div element
a[title]	All a elements with title attribute
a[title=header]	All a elements with title value of header
li:nth-child(2)	Every li elements that is second child of its parent.
li:nth-last-child(2)	Every li elements that is second child of its parent, starting from last child.
li:nth-of-type(2)	Every li elements that is second li of its parent.
li:nth-last-of-type(2)	Every li elements that is second li of its parent, starting from last child.
:not(h1)	Every elements except h1 elements. not() will select reverse

This way, you can pass above parameter in querySelector() and querySelectorAll() methods to select elements.