DOM - Selection of Node Element (querySelector)

About

This page shows you how to select node elemenst in the DOM tree

If you want to select

the first element found

This section shows you how to returns the first element within the document of a selection.

In the below code:

The below example demonstrates:

  • the webApi querySelect
  • and the JQuery function selection

Demo:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  • The HTML where we will select the p element
<p>A p element to select</p>
// Return the element selected
webApiElement = document.querySelector('body>p');
console.log("querySelector found the element "+webApiElement.__proto__.toString()+" with the text value ("+webApiElement.innerText+")");
// JQuery returns always a list of object, we need then to get the first one
jQueryElement = $('body>p:nth-of-type(1)')[0];
// same as element = JQuery(selector); 
console.log("JQuery found the element "+jQueryElement+" with the text value ("+jQueryElement.innerText+")");
  • The below code check that they are the same element
if (webApiElement == jQueryElement) {
  console.log("The webAPIElement and the jQueryElement are the same")
}
  • The above demo code outputs:

an element by its Id

You can also select only one element with the id attribute.

For more information, documentation and example, see the dedicated page: DOM - Select an element by its id (with javascript and css example)

multiple elements with a CSS selector

Example: from text to number, replacing text number in a list by digit

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>
  • With the querySelectorAll, we can select all li elements and transform the words in digit.
let mapping = { "One":1,"Two":2, "Three":3, "Four": 4 };
document.querySelectorAll('li').forEach(element => {
   element.innerText = mapping[element.innerText];
});
  • Result:

The querySelectorAll Web API function will:

let divs = document.querySelectorAll('Selector');





Discover More
Dom Attribute Set To Color Red
Attribute manipulation with DOM

How to add, delete, get any node attribute with the DOM
Bootstrap Tooltip Snippet

This page shows snippets on how to handle the Boostrap tooltip
Browser / DOM - Range - defining a sequence of characters

Range is a function that permits defining a sequence of characters in the DOM tree and is used in selecting and copying content.
CSS - How to get an inline property with Javascript (font-size)

This page will show you how to retrieve the value of a css property defined inline with the style attribute
CSS - Property

CSS defines a finite set of parameters, called properties, that defines the rendering of a document. Properties are written in a css rule after the element selection definition. Properties are attached...
DOM - API

The DOM API is a specification that specifies all classes and function to manipulate the DOM tree. The DOM API is present natively in browser and may be implemented via a library in other application/environment....
DOM - Child Nodes of a Node

Child Nodes of an element in the dom tree Via child selector, you can select element that are child of another element. The childNodes property of an element returns a collection of child Node....
Class Html Beauty Blue Added
DOM - Class attribute

manipulation in the DOM. API The DOM Web API has a special function to select on class: the getElementsByClassName() function one You can select the class with a selector With Native Javascript...
DOM - Collection Iteration (NodeList, ..)

in the DOM. API A selection of element with the Web API DOM is returned as a nodelist. For forEach Property Web API Example Source...
DOM - Element

An element is the most common type of node in the DOM. When you want to do something to an element, first you need to select it. A dom element is generally the memory representation of: an HTML element...



Share this page:
Follow us:
Task Runner