3.2.  āĻŦ⧇āϏāĻŋāĻ• āĻāĻŦāĻ‚ Query āϏāĻŋāϞ⧇āĻ•ā§āϟāĻ°ā§āϏ

 

āĻŦ⧇āϏāĻŋāĻ•Â āϏāĻŋāϞ⧇āĻ•ā§āϟāĻ°ā§āϏ

getElementsByTagName()

getElementsByTagName() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻŸā§āϝāĻžāĻ— āύāĻžāĻŽā§‡āϰ āϏāĻžāĻĨ⧇ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ⧇āϰ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ—ā§āϰāĻš āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤ getElementsByTagName() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ HTML āĻ•āĻžāϞ⧇āĻ•āĻļāύ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤ getElementsByTagName() āϏāĻŽā§āĻĒāĻ¤ā§āϤāĻŋ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻĒāĻ āύāϝ⧋āĻ—ā§āϝāĨ¤

  • <li> āĻŸā§āϝāĻžāĻ— āύāĻžāĻŽā§‡āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    const collection = document.getElementsByTagName(“li”);
  • āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    const collection = document.getElementsByTagName(“*”);
  • Document āĻāϰ āĻĒā§āϰāĻĨāĻŽ āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋāϰ āĻ­āĻŋāϤāϰ⧇āϰ HTML āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰ⧁āύ:
    document.getElementsByTagName(“p”)[0].innerHTML = “Hello World!”;

 

getElementsByClassName()

getElementsByClassName() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻļā§āϰ⧇āĻŖā§€āϰ āύāĻžāĻŽ(āϗ⧁āϞāĻŋ) āϏāĻš āωāĻĒāĻžāĻĻāĻžāύāϗ⧁āϞāĻŋāϰ āĻāĻ•āϟāĻŋ āϏāĻ‚āĻ—ā§āϰāĻš āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇⧎ getElementsByClassName() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ HTML āĻ•āĻžāϞ⧇āĻ•āĻļāύ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤ getElementsByClassName() āϏāĻŽā§āĻĒāĻ¤ā§āϤāĻŋ āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻĒāĻ āύāϝ⧋āĻ—ā§āϝāĨ¤

  • class=”example” āύāĻžāĻŽā§‡āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    const collection = document.getElementsByClassName(“example”);
  • class=”example” and class=”color” āύāĻžāĻŽā§‡āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    const collection = document.getElementsByClassName(“example color”);

 

getElementById()

getElementById() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āĻŽāĻžāύ āϏāĻš āĻāĻ•āϟāĻŋ āωāĻĒāĻžāĻĻāĻžāύ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤ āϝāĻĻāĻŋ āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋ āĻŦāĻŋāĻĻā§āϝāĻŽāĻžāύ āύāĻž āĻĨāĻžāϕ⧇ āϤāĻŦ⧇ getElementById() āĻĒāĻĻā§āϧāϤāĻŋāϟāĻŋ null āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤
getElementById() āĻĒāĻĻā§āϧāϤāĻŋ āĻšāϞ HTML DOM-āĻāϰ āϏāĻŦāĻšā§‡āϝāĻŧ⧇ āϏāĻžāϧāĻžāϰāĻŖ āĻĒāĻĻā§āϧāϤāĻŋāϗ⧁āϞāĻŋāϰ āĻŽāĻ§ā§āϝ⧇ āĻāĻ•āϟāĻŋāĨ¤ āφāĻĒāύāĻŋ āĻāĻ•āϟāĻŋ HTML āωāĻĒāĻžāĻĻāĻžāύ āĻĒāĻĄāĻŧāϤ⧇ āĻŦāĻž āϏāĻŽā§āĻĒāĻžāĻĻāύāĻž āĻ•āϰāϤ⧇ āϚāĻžāύ āĻĒā§āϰāĻžāϝāĻŧ āĻĒā§āϰāϤāĻŋāĻŦāĻžāϰāχ āĻāϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻž āĻšāϝāĻŧāĨ¤

  • āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āφāχāĻĄāĻŋ āϏāĻš āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋ āĻĒ⧇āϤ⧇:
    document.getElementById(“demo”);
  • āύāĻŋāĻ°ā§āĻĻāĻŋāĻˇā§āϟ āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋ āĻĒ⧇āϤ⧇ āĻāĻŦāĻ‚ āĻāϰ āϰāĻ™ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰāϤ⧇:
     
     
     
    const myElement = document.getElementById(“demo”);
    myElement.style.color = “red”
     
  • āĻ…āĻĨāĻŦāĻž āĻļ⧁āϧ⧁ āĻāϰ āϰāĻ™ āĻĒāϰāĻŋāĻŦāĻ°ā§āϤāύ āĻ•āϰāϤ⧇:
    document.getElementById(“demo”).style.color = “red”;

 

Query āϏāĻŋāϞ⧇āĻ•ā§āϟāĻ°ā§āϏ

querySelector()

querySelector() āĻĒāĻĻā§āϧāϤāĻŋāϟāĻŋ āĻĒā§āϰāĻĨāĻŽ āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇ āϝāĻž āĻāĻ•āϟāĻŋ CSS Selector āĻāϰ āϏāĻžāĻĨ⧇ āĻŽā§‡āϞ⧇āĨ¤ āϏāĻŦ āĻŽāĻŋāϞ āĻĢ⧇āϰāĻžāϤ⧇ (āĻļ⧁āϧ⧁āĻŽāĻžāĻ¤ā§āϰ āĻĒā§āϰāĻĨāĻŽ āύāϝāĻŧ), āĻĒāϰāĻŋāĻŦāĻ°ā§āϤ⧇ querySelectorAll() āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧁āύāĨ¤ querySelector() āĻāĻŦāĻ‚ querySelectorAll() āωāĻ­āϝāĻŧāχ āĻāĻ•āϟāĻŋ NodeList āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤

querySelector() āĻāĻŦāĻ‚ querySelectorAll() āωāĻ­āϝāĻŧāχ āĻāĻ•āϟāĻŋ SYNTAX_ERR āύāĻŋāĻ•ā§āώ⧇āĻĒ āĻ•āϰ⧇ āϝāĻĻāĻŋ Selector(āϗ⧁āϞāĻŋ) Invalid āĻšāϝāĻŧāĨ¤

  • āĻŸā§āϝāĻžāĻ— āύāĻžāĻŽā§‡āϰ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    document.querySelector(“p”);
  • class=”example” āύāĻžāĻŽā§‡āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    document.querySelector(“.example”);

 

querySelectorAll()

querySelectorAll() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ CSS Selector(āϗ⧁āϞāĻŋ) āĻāϰ āϏāĻžāĻĨ⧇ āĻŽā§‡āϞ⧇ āĻāĻŽāύ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤ querySelectorAll() āĻĒāĻĻā§āϧāϤāĻŋ āĻāĻ•āϟāĻŋ NodeList āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤

querySelectorAll() āĻĒāĻĻā§āϧāϤāĻŋāϟāĻŋ āĻāĻ•āϟāĻŋ SYNTAX_ERR āύāĻŋāĻ•ā§āώ⧇āĻĒ āĻ•āϰ⧇ āϝāĻĻāĻŋ Selector(āϗ⧁āϞāĻŋ) Invalid āĻšāϝāĻŧāĨ¤

  • class=”example” āύāĻžāĻŽā§‡āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āĻĒ⧇āϤ⧇:
    document.querySelectorAll(“.example”);

Note:

getElementsByClassName() āĻāĻŦāĻ‚ getElementsByTagName() methods āĻāĻ•āϟāĻŋ HTML āϏāĻ‚āĻ—ā§āϰāĻš āĻĢ⧇āϰāϤ āĻĻ⧇āϝāĻŧāĨ¤ āφāϰ querySelector() āĻāĻŦāĻ‚ querySelectorAll() methods āĻāĻ•āϟāĻŋ NodeList āĻĒā§āϰāĻĻāĻžāύ āĻ•āϰ⧇āĨ¤

  • Universal selector
Universal selector āϕ⧇ `*` āĻĻā§āĻŦāĻžāϰāĻž āϚāĻŋāĻšā§āύāĻŋāϤ āĻ•āϰāĻž āĻšāϝāĻŧ āϝāĻž āϝ⧇āϕ⧋āύ⧋ āϧāϰāύ⧇āϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ⧇āϰ āϏāĻžāĻĨ⧇ āĻŽā§‡āϞ⧇:
āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āωāĻĻāĻžāĻšāϰāĻŖ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ `querySelector()` document āĻāϰ āĻĒā§āϰāĻĨāĻŽ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧇:
let element = document.querySelector(‘*’);
āĻāĻŦāĻ‚ document āĻāϰ āϏāĻŽāĻ¸ā§āϤ āωāĻĒāĻžāĻĻāĻžāύ āύāĻŋāĻ°ā§āĻŦāĻžāϚāύ āĻ•āϰ⧁āύ:
let elements = document.querySelectorAll(‘*’);
  • Type selector
āύāĻŋāĻŽā§āύāϞāĻŋāĻ–āĻŋāϤ āωāĻĻāĻžāĻšāϰāĻŖāϟāĻŋ document āĻāϰ āĻĒā§āϰāĻĨāĻŽ h1 āωāĻĒāĻžāĻĻāĻžāύāϟāĻŋ āϖ⧁āρāĻœā§‡ āĻĒāĻžāϝāĻŧ:
let firstHeading = document.querySelector(‘h1’);
  • Attribute selector
The following example finds the first element with the attribute [autoplay] with any value:
let autoplay = document.querySelector(‘[autoplay]’);
 
  • Child combinator
`>` āϚāĻžāχāĻ˛ā§āĻĄ āĻ•āĻŽā§āĻŦāĻŋāύ⧇āϟāϰ āĻāĻŽāύ āϏāĻŽāĻ¸ā§āϤ elements āϖ⧁āρāĻœā§‡ āĻĒāĻžāϝāĻŧ āϝāĻž āĻĒā§āϰāĻĨāĻŽ āωāĻĒāĻžāĻĻāĻžāύ⧇āϰ āϏāϰāĻžāϏāϰāĻŋ Child:
let listItems = document.querySelectorAll(‘ul > li’);
let listItems = document.querySelectorAll(‘ul.nav > li’);
 
  • Pseudo-classes
`:` pseudo āϤāĻžāĻĻ⧇āϰ āĻ…āĻŦāĻ¸ā§āĻĨāĻžāϰ āωāĻĒāϰ āĻ­āĻŋāĻ¤ā§āϤāĻŋ āĻ•āϰ⧇ elements āĻāϰ āϏāĻžāĻĨ⧇ āĻŽā§‡āϞ⧇:
let listItem = document.querySelectorAll(‘li:nth-child(2)’);
 
  • Pseudo-elements
:: document āĻ āĻ…āĻ¨ā§āϤāĻ°ā§āϭ⧁āĻ•ā§āϤ āύāϝāĻŧ āĻāĻŽāύ entities represent āĻ•āϰ⧇⧎
let links = document.querySelector(‘p::first-line’);
  • āφāĻĒāύāĻŋ āϝāĻĻāĻŋ getElementByAttribute implement āĻ•āϰāϤ⧇ āϚāĻžāύ, āϤāĻžāĻšāϞ⧇ āφāĻĒāύāĻŋ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻāϟāĻŋ implement āĻ•āϰāĻŦ⧇āύ?
  • query selector āĻĻā§āĻŦāĻžāϰāĻž āφāĻĒāύāĻŋ āĻ•āĻŋāĻ­āĻžāĻŦ⧇ āĻāĻ•āϟāĻŋ element āĻ āĻ•ā§āϞāĻžāϏ āϝ⧋āĻ— āĻ•āϰāĻŦ⧇āύ?
  • āĻāĻ•āϟāĻŋ element āĻ…āĻ¨ā§āϝāϟāĻŋāϰ child  āĻ•āĻŋāύāĻž āϤāĻž āφāĻŽāĻŋ āϕ⧀āĻ­āĻžāĻŦ⧇ āϝāĻžāϚāĻžāχ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŋ?
  • āĻāĻ•āϟāĻŋ DOM āωāĻĒāĻžāĻĻāĻžāύ āϤ⧈āϰāĻŋ āĻ•āϰāĻžāϰ āϏ⧇āϰāĻž āωāĻĒāĻžāϝāĻŧ āĻ•āĻŋ? innherHTML āϏ⧇āϟ āĻ•āϰāĻŦ⧇āύ āύāĻžāĻ•āĻŋ createElement āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāĻŦ⧇āύ?
  • createDocumentFragment āĻ•āĻŋ āĻāĻŦāĻ‚ āϕ⧇āύ āφāĻĒāύāĻŋ āĻāϟāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰ⧇āύ?