This page shows you how to select an element via the id attribute
The function getElementById of the document object permits to pass the id value in order to select the element
Example:
let id = "box"
let element = document.getElementById(id);
console.log(`The innerText of the element with the id ${id} is: ${element.innerText}`);
<div id="box" >Box selected with the id</div>
The function querySelector of the document object permits to pass a selector value in order to select the first element selectioned.
The selector id syntax is:
#id
Example:
let id = "box"
let selector = "#"+id;
let element = document.querySelector(selector);
console.log(`The innerText of the element with the id ${id} is: ${element.innerText}`);
<div id="box" >Box selected with a selector</div>
All CSS rules are based on selector.
Example:
<p id="TheId">A blue paragraph</p>
#TheId { color:blue; }
The javascript window objects lets you select the element by id directly with the short notation
<h1 id="id1">H1 Content</h1>
console.log(window.id1.innerHTML);
The jquery function accepts a selector value and manipulate all element at once. If we use a id selector, we will manipulate only one element.
Example:
let id = "box"
let selector = "#"+id;
let element = $(selector);
console.log(`The innerText of the element with the id ${id} is: ${element.text()}`);
<div id="box" >Box selected with jquery</div>