Javascript element selector

Created at 07-Mar-2021 , By samar

Javascript element selectors are the methods that are used to get HTML elements that match the specified selector, or group of selectors within the document. If no matches are found, it returns a null value.

Javascript selector methods allow you to select and manipulate HTML elements. You can select the HTML DOM element (<div id=”demo”></div>) using the document.getElementById("demo"); method and you can manipulate it by changing HTML elements, HTML attributes, CSS styles, remove existing HTML elements and attributes, add new HTML elements and attributes, and create HTML events on the page like click, blur, key up etc using the properties and methods.

Javascript querySelector() method, returns the first element that matches a specified CSS selector(s) in the document. It only returns the first element of HTML DOM and the rest of all others are ignored even if the elements with the same CSS selectors exist in it.

Syntax: let element = document.querySelector(css selector);
Syntax: let element = parentNode.querySelector(css selector);

You can pass universal selector (“*”), type selector (“p”)  (HTML tags without < and >), a class selector (“.example”), Id selector  (“#demo”), attribute selector (“[attribute]”) as CSS selector in javascript querySelector method. You can select HTML elements in two ways first using document object and the second is the parent node object. The document.querySelector() method selects element(s) within the HTML document and the parentNode.querySelector() method selects element(s) which are descendant (inside) of selected parent node. When you call the method on the document object, the complete document is searched, including the root node.

In the below code example <div class="example">First DIV with class=example </div> is the HTML element,  document.querySelector() is the method and ".example" is the CSS selector syntax that specifies that the first HTML element with class example in the HTML DOM has to be return as an element.

<div class="example-wrap">
     <div class="example">First DIV with class=example </div>
     <div class="example">Second DIV with class=example </div>
     <p>First html paragraph tag</p>
     <p>Second html  paragraph html tag</p>
</div>
<script> 
  <!-- Query selector method with document -->
  let element = document.querySelector('.example');
  console.log(element);
  <!--Query selector method with parent node -->
  let parentNode = document.querySelector('.example-wrap');
  let elemenetPara = parentNode.querySelector('p');
  console.log(elemenetPara);
</script>

Javascript querySelectorAll() method, returns all elements in the document that match a specified CSS selector(s), as a static NodeList object. You can access each element using the index number of the node. In javascript, the index starts at 0. Like if you want to access the first element of NodeList you can use elements[0] and the second element can be accessed by elements[1] and so on as per the below code in our case.

<div class="example">First DIV with class=example </div>
<div class="example">Second DIV with class=example </div>
<script> 
  let elements = document.querySelectorAll('.example');
  console.log(elements);
</script>

Javascript getElementById() method,  returns the element that has the ID attribute with the specific/specified value. The ID attribute value is case-sensitive and unique within the document. Only one ID element with the specified value should be in the HTML document. Even if the document has multiple ID attributes with the same value it will return the first element from HTML DOM. The getElementById() method takes one parameter which is required and its type should be a string. You can not call the getElementById() method on the parent node because the ID attribute is unique within the document. If you call the method on the parent node, It will give the error that parentNode.getElementById() is not a function.

Syntax: let element = document.getElementById(element);

<div id="example"> Id attribute with value example </div>
<script> 
  let element = document.getElementById('example');
  console.log(element);
</script>

Javascript getElementsByName() method, returns all elements with the specified name attribute value within the document as a static NodeList object. Every HTML document element may have a name attribute that can share the same value. In the below code example we have two input tags with a name attribute and their values are language. We can get these input tag elements by entering the value language to the getElementsByName() method.

<input type="radio" name="language" value="JavaScript">
<input type="radio" name="language" value="TypeScript">
<script>
    let elements = document.getElementsByName('language');
    console.log(elements);
</script>

Javascript getElementsByTagName() method,  returns a HTML collection of elements with the specified tag name. This collection can be accessed by index numbers and you can manipulate it as per your requirement. You have to pass HTML tag without < and >. You can not pass multiple tags in this method.

<p>First html paragraph tag</p>
 <p>Second html  paragraph html tag</p>
<script> 
  let element = document.getElementsByTagName('p');
  console.log(element);
</script>

Javascript getElementsByClassName() method, returns a HTML collection of elements with the specified class name which contains every descendant (HTML elements which are inside of selected elements) elements. You can pass multiple class names (a class with subclass) separated by whitespace. You can call children property to get the HTML collection of child elements of the selected parent node. You can call the childNodes property to get the NodeList objects of child elements of the selected parent node.

<div class="example-wrap">
     <div class="example">First DIV with class=example </div>
     <div class="example">Second DIV with class=example </div>
     <p>First html paragraph tag</p>
     <p>Second html  paragraph html tag</p>
</div>
<script> 
  let elements = document.getElementsByClassName('example-wrap');
  console.log(elements);
  console.log(elements[0]);
  console.log(elements[0].childNodes);
  console.log(elements[0].children);
</script>

Here are some properties and methods which are used on the selector method to manipulate HTML elements. 
let element = document.getElementById('demo');
element.style.color = 'white'; 
element.style.backgroundColor = 'black'; 
element.style.padding = '10px';  
element.style.width = '250px'; 
element.style.textAlign = 'center';  
element.innerHTML = 'Hello World!';
element.addEventListener("click", myFunction);

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Buy Me A Coffee

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.