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
- Type selector
- Attribute selector
- Child combinator
- Pseudo-classes
- Pseudo-elements
- āĻāĻĒāύāĻŋ āϝāĻĻāĻŋ getElementByAttribute implement āĻāϰāϤ⧠āĻāĻžāύ, āϤāĻžāĻšāϞ⧠āĻāĻĒāύāĻŋ āĻāĻŋāĻāĻžāĻŦā§ āĻāĻāĻŋ implement āĻāϰāĻŦā§āύ?
- query selector āĻĻā§āĻŦāĻžāϰāĻž āĻāĻĒāύāĻŋ āĻāĻŋāĻāĻžāĻŦā§ āĻāĻāĻāĻŋ element āĻ āĻā§āϞāĻžāϏ āϝā§āĻ āĻāϰāĻŦā§āύ?
- āĻāĻāĻāĻŋ element āĻ āύā§āϝāĻāĻŋāϰ child āĻāĻŋāύāĻž āϤāĻž āĻāĻŽāĻŋ āĻā§āĻāĻžāĻŦā§ āϝāĻžāĻāĻžāĻ āĻāϰāϤ⧠āĻĒāĻžāϰāĻŋ?
- āĻāĻāĻāĻŋ DOM āĻāĻĒāĻžāĻĻāĻžāύ āϤā§āϰāĻŋ āĻāϰāĻžāϰ āϏā§āϰāĻž āĻāĻĒāĻžāϝāĻŧ āĻāĻŋ? innherHTML āϏā§āĻ āĻāϰāĻŦā§āύ āύāĻžāĻāĻŋ createElement āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻāϰāĻŦā§āύ?
- createDocumentFragment āĻāĻŋ āĻāĻŦāĻ āĻā§āύ āĻāĻĒāύāĻŋ āĻāĻāĻŋ āĻŦā§āϝāĻŦāĻšāĻžāϰ āĻāϰāϤ⧠āĻĒāĻžāϰā§āύ?