Selecting DOM Elements

DOM உறுப்புகளைத் தேர்ந்தெடுப்பதைக் கற்றுக்கொள்ளுங்கள்

HTML உறுப்புகளைக் கண்டறிதல்

பெரும்பாலும், JavaScript உடன், நீங்கள் HTML உறுப்புகளைக் கையாள விரும்புகிறீர்கள்.

அதைச் செய்ய, நீங்கள் முதலில் உறுப்புகளைக் கண்டுபிடிக்க வேண்டும். இதைச் செய்ய பல வழிகள் உள்ளன:

ஐடி மூலம் HTML உறுப்பைக் கண்டறிதல்

DOM இல் ஒரு HTML உறுப்பைக் கண்டுபிடிக்க எளிதான வழி, உறுப்பு ஐடியைப் பயன்படுத்துவதாகும்.

இந்த எடுத்துக்காட்டு id="intro" உடன் உறுப்பைக் கண்டறிகிறது:

எடுத்துக்காட்டு

const element = document.getElementById("intro");

உறுப்பு கண்டறியப்பட்டால், முறை உறுப்பை ஒரு பொருளாக (உறுப்பில்) திருப்பித் தரும்.

உறுப்பு கண்டறியப்படவில்லை என்றால், உறுப்பு null ஐக் கொண்டிருக்கும்.

டேக் பெயர் மூலம் HTML உறுப்புகளைக் கண்டறிதல்

இந்த எடுத்துக்காட்டு அனைத்து <p> உறுப்புகளையும் கண்டறிகிறது:

எடுத்துக்காட்டு

const element = document.getElementsByTagName("p");

இந்த எடுத்துக்காட்டு id="main" உடன் உறுப்பைக் கண்டறிந்து, பின்னர் "main" உள்ளே அனைத்து <p> உறுப்புகளையும் கண்டறிகிறது:

எடுத்துக்காட்டு

const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

வகுப்புப் பெயர் மூலம் HTML உறுப்புகளைக் கண்டறிதல்

அதே வகுப்புப் பெயருடன் அனைத்து HTML உறுப்புகளையும் கண்டுபிடிக்க விரும்பினால், getElementsByClassName() ஐப் பயன்படுத்தவும்.

இந்த எடுத்துக்காட்டு class="intro" உடன் அனைத்து உறுப்புகளின் பட்டியலையும் தருகிறது.

எடுத்துக்காட்டு

const x = document.getElementsByClassName("intro");

CSS தேர்ந்தெடுப்பாளர்கள் மூலம் HTML உறுப்புகளைக் கண்டறிதல்

The querySelector() முறை

எடுத்துக்காட்டு

<html>
<body>

<p class="demo"></p>

<script>
// Access a paragraph Element
const myPara = document.querySelector(".demo");

// Change the content of the Element
myPara.innerHTML = "Hello World!";
</script>

</body>
</html>

The querySelectorAll() முறை

எடுத்துக்காட்டு

<html>
<body>

<p class="demo">One</p>
<p class="demo">Two</p>

<script>
// Access a paragraph Element
const myItems = document.querySelectorAll(".demo");

// Change the content of the Element
myItems[0].innerHTML = "First";
</script>

</body>
</html>

பொதுவான தவறுகள்

⚠️ கவனிக்க:

  • getElementById() இல் `#` பயன்படுத்துதல்:
    தவறு: "#demo"
    சரி: "demo"
  • querySelector() முதல் பொருந்தியதை மட்டுமே திருப்பித் தருகிறது என மறந்துவிடுதல்

ஒரு குறிப்பிட்ட CSS தேர்ந்தெடுப்பாளருடன் (ஐடி, வகுப்புப் பெயர்கள், வகைகள், பண்புக்கூறுகள், பண்புக்கூறுகளின் மதிப்புகள், போன்றவை) பொருந்தும் அனைத்து HTML உறுப்புகளையும் கண்டுபிடிக்க விரும்பினால், querySelectorAll() முறையைப் பயன்படுத்தவும்.

இந்த எடுத்துக்காட்டு class="intro" உடன் அனைத்து <p> உறுப்புகளின் பட்டியலையும் தருகிறது.

எடுத்துக்காட்டு

const x = document.querySelectorAll("p.intro");

HTML பொருள் தொகுப்புகள் மூலம் HTML உறுப்புகளைக் கண்டறிதல்

இந்த எடுத்துக்காட்டு forms தொகுப்பில் id="frm1" உடன் படிவ உறுப்பைக் கண்டறிந்து, அனைத்து உறுப்பு மதிப்புகளையும் காட்டுகிறது:

எடுத்துக்காட்டு

const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
  text += x.elements[i].value + "
";
}
document.getElementById("demo").innerHTML = text;

பின்வரும் HTML பொருள்கள் (மற்றும் பொருள் தொகுப்புகள்) அணுகக்கூடியவை:

document.anchors

எல்லா ஆங்கர்களையும் தருகிறது

document.body

body உறுப்பைத் தருகிறது

document.documentElement

HTML உறுப்பைத் தருகிறது

document.embeds

எல்லா embed உறுப்புகளையும் தருகிறது

document.forms

எல்லா படிவ உறுப்புகளையும் தருகிறது

document.head

head உறுப்பைத் தருகிறது

document.images

எல்லா பட உறுப்புகளையும் தருகிறது

document.links

எல்லா href பண்புக்கூறு கொண்ட உறுப்புகளையும் தருகிறது

document.scripts

எல்லா script உறுப்புகளையும் தருகிறது

document.title

title உறுப்பைத் தருகிறது

பயிற்சி

❓ ஆவணத்தின் அனைத்து <p> உறுப்புகளையும் திருப்பித் தருவதற்கான சட்டபூர்வமான தொடரியல் எது?

document.getElementsByTagName('p')
✓ சரி! getElementsByTagName('p') என்பது ஆவணத்தில் உள்ள அனைத்து <p> உறுப்புகளையும் திருப்பித் தரும் சட்டபூர்வமான முறையாகும்
document.paragraphs
✗ தவறு! document.paragraphs என்பது HTML DOM இல் சட்டபூர்வமான பண்பு அல்ல
document.getElements('p')
✗ தவறு! getElements() என்பது HTML DOM இல் சட்டபூர்வமான முறை அல்ல