javascript id class selector

Element selector in javascript

Element indicates the html elements which consists of html tags and contents present inside it.

How to select and change the element?

Selectors are very important, it lets javascript to access the html tags and elements. So one must know about these selectors used in javascript.

Some important selectors are explained below,

id selector in javascript (getElementById)

We can select the html element by id value using getElementById method.

It is used to access a specific element and by accessing it in javascript we can change the elements properties and its contents.

Example 1 - set background css property

<div id="testid">This is the sample div</div> <button onclick="fun_name();">Click me</button> <script> function fun_name() { var elem=document.getElementById("testid"); elem.style.background="red"; } </script>

Test it now

Example 2 - get background css property value

<div id="testid" style="background:red">This is the sample div</div> <button onclick="fun_name();">Click me</button> <script> function fun_name() { var elem=document.getElementById("testid"); var back=elem.style.background; alert(back); } </script>

Test it now

class selector in javascript (getElementsByClassName)

In a html document, various html elements may contain same class value, so this must be returned in an array.

Example 1 - set value by class value

<input class="clsTxt" type="text"> <input class="clsTxt" type="text"> <input class="clsTxt" type="text"> <button onclick="fun_name();">Click me</button> <script> function fun_name() { var elem=document.getElementsByClassName("clsTxt"); elem[0].value=100; elem[1].value=200; elem[2].value=300; } </script>

Test it now

Example 2 - get value by class value

<input class="clsTxt" type="text" value="1"> <input class="clsTxt" type="text" value="2"> <input class="clsTxt" type="text" value="3"> <button onclick="fun_name();">Click me</button> <script> function fun_name() { var elem=document.getElementsByClassName("clsTxt"); alert(elem[0].value); alert(elem[1].value); alert(elem[2].value); } </script>

Test it now