3.3. getElement āĻāĻŦāĻ‚ Query āϏāĻŋāϞ⧇āĻ•ā§āϟāĻ°ā§āϏ āĻāϰ āĻĒāĻžāĻ°ā§āĻĨāĻ•ā§āϝ

 

āĻāχ āĻĻ⧁āϟāĻŋ āĻĒāĻĻā§āϧāϤāĻŋāϰ āĻŽāĻ§ā§āϝ⧇ āϏ⧁āĻ¸ā§āĻĒāĻˇā§āϟ āĻŽāĻŋāϞ āĻšāϞ āϝ⧇ āϤāĻžāϰāĻž āωāĻ­āϝāĻŧāχ āĻāĻ•āϟāĻŋ āĻ“āϝāĻŧ⧇āĻŦ āĻĒ⧃āĻˇā§āĻ āĻž āĻĨ⧇āϕ⧇ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧇āĨ¤ āϤāĻžāϰāĻž āĻŦāĻŋāĻ­āĻŋāĻ¨ā§āύ āωāĻĒāĻžāϝāĻŧ⧇ āϤāĻž āĻ•āϰ⧇āĨ¤

getElement

getElementById āĻĒāĻĻā§āϧāϤāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇, āφāĻĒāύāĻŋ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āϤāĻžāϰ ID āĻĻā§āĻŦāĻžāϰāĻž āĻāĻ•āϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻāĻ•āϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ getElementByClassName āφāĻĒāύāĻžāϕ⧇ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āϤāĻžāϰ class āύāĻžāĻŽā§‡āϰ āωāĻĒāϰ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āĻ•āϰ⧇ āϝ⧇āϕ⧋āύ⧋ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĻ⧇āϝāĻŧāĨ¤ getElementsByTagName() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻŸā§āϝāĻžāĻ— āύāĻžāĻŽā§‡āϰ āϏāĻžāĻĨ⧇ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ⧇āϰ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ—ā§āϰāĻš āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤

 
 
 
document.getElementById(“demo”).style.color = “red”;
const collection = document.getElementsByClassName(“example color”);
document.getElementsByTagName(“p”)[0].innerHTML = “Hello World!”;
 

 

querySelector

āĻāĻ•āϟāĻŋ querySelector āĻĻāĻŋāϝāĻŧ⧇, āφāĻĒāύāĻŋ āĻāĻ•āϟāĻŋ CSS Selector āωāĻĒāϰ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ querySelectorAll āĻĻāĻŋāϝāĻŧ⧇, āφāĻĒāύāĻŋ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύāĨ¤ querySelector(“css-selectors”) āφāĻĒāύāĻžāϕ⧇ CSS Selector āĻĒā§āϝāĻžāϟāĻžāĻ°ā§āύ⧇āϰ āωāĻĒāϰ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āĻ•āϰ⧇ āϝ⧇āϕ⧋āύ⧋ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰāϤ⧇ āĻĻ⧇āϝāĻŧāĨ¤

 
 
 
document.querySelector(“.example”).style.backgroundColor = “red”;
document.querySelectorAll(“.example”).style.backgroundColor = “red”;
  • āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻāĻ•āϟāĻŋ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϕ⧇ āφāχāĻĄāĻŋ āĻĻā§āĻŦāĻžāϰāĻž āϏāĻŋāϞ⧇āĻ•ā§āϟ āĻ•āϰāĻž āĻāĻŦāĻ‚ āϤāĻžāϤ⧇ āĻ­ā§āϝāĻžāϞ⧁ āĻāϏāĻžāχāύ āĻ•āϰāĻžāĨ¤
<p id=“demo”></p>
<script>
document.getElementById(“demo”).innerHTML = “Hello World”;
</script>
  • getElementById() āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āϕ⧋āύ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āĻāϰ āĻ•āĻžāϞāĻžāϰ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰāĻžāĨ¤
const myElement = document.getElementById(“demo”);
myElement.style.color = “red”;
  • Get all elements with class=”demo”:
const collection = document.getElementsByClassName(“demo”);
  • Get all elements with both the “demo” and “color” classes:
const collection = document.getElementsByClassName(“democolor”);
  • Get all elements with the name “firstName”:
let elements = document.getElementsByName(“firstName”);
  • Number of elements with name=”cats”:
let num = document.getElementsByName(“cats”).length;
  • āĻāĻ•āϟāĻŋ āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āϟ āĻāϰ āϏāĻ•āϞ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϖ⧁āρāĻœā§‡ āĻŦ⧇āϰ āĻ•āϰ⧁āύāĨ¤
  • āĻāĻ•āϟāĻŋ āĻĄāϕ⧁āĻŽā§‡āĻ¨ā§āϟ āĻĨ⧇āϕ⧇ “li” TagName āĻāϰ āϏāĻ•āϞ āχāϞāĻŋāĻŽā§‡āĻ¨ā§āϟ āϖ⧁āρāĻœā§‡ āĻŦ⧇āϰ āĻ•āϰ⧁āύāĨ¤
  • āĻāĻ•āϟāĻŋ āχāύāĻĒ⧁āϟ āĻŦāĻ•ā§āϏ āĻāϰ āĻ­ā§āϝāĻžāϞ⧁ āĻāϏāĻžāχāύ āĻ•āϰ⧁āύāĨ¤
  • getElementById() āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āĻŦāĻžāϟāύ āĻāϰ āĻ•āĻžāϞāĻžāϰ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰ⧁āύāĨ¤
  • querySelector() āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āχāύāĻĒ⧁āϟ āĻŦāĻ•ā§āϏ āĻāϰ āĻŦā§āϝāĻžāĻ•āĻ—ā§āϰāĻžāωāĻ¨ā§āĻĄ āĻ•āĻžāϞāĻžāϰ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰ⧁āύāĨ¤