JavaScript DOM: ఎలిమెంట్లను ఎంచుకోవడం & సవరించడం (Master Guide)

DOM అంటే Document Object Model. బ్రౌజర్ ఒక HTML డాక్యుమెంట్‌ను లోడ్ చేసినప్పుడు, అది కేవలం సాదా టెక్స్ట్ ఫైల్‌గా చదివి ఊరుకోదు. ఆ HTML కోడ్‌ను విశ్లేషించి, ఒక తలక్రిందుల చెట్టు (Inverted Tree Data Structure) ఆకారంలో ఆబ్జెక్టుల సమాహారంగా మారుస్తుంది.

ఒక HTML ఎలిమెంట్‌ను మార్చాలంటే, ముందు దాన్ని JavaScript లోకి పట్టుకోవాలి (Select చేసుకోవాలి). దీని కోసం పాత పద్ధతులు (Legacy) మరియు ఆధునిక పద్ధతులు (Modern) ఉన్నాయి:

ఒకటి కంటే ఎక్కువ ఎలిమెంట్లను ఎంచుకున్నప్పుడు బ్రౌజర్ మనకు ఇచ్చే కలెక్షన్లలో రెండు రకాలు ఉంటాయి. ఇంటర్వ్యూలలో అడిగే అత్యంత ముఖ్యమైన కాన్సెప్ట్ ఇది:

ఒక ఎలిమెంట్‌ను పట్టుకున్న తర్వాత, దాని లోపల ఉన్న సమాచారాన్ని మార్చడానికి మూడు ప్రముఖ ప్రాపర్టీలు ఉన్నాయి:

వెబ్‌సైట్లలో డార్క్ మోడ్ ఆన్ చేయడం, ఎర్రర్ బాక్స్ ఎరుపు రంగులోకి మారడం, లేదా పాప్‌అప్ ఓపెన్ అవ్వడం వెనుక అంతా CSS Classes ని జావాస్క్రిప్ట్ ద్వారా జోడించడం లేదా తొలగించడమే జరుగుతుంది.

Attributes (లక్షణాలు) మార్చడం:

• element.setAttribute("href", "https://ourcompiler.com") ➔ లింక్ లేదా ఇమేజ్ సోర్స్ మార్చడానికి.
• element.getAttribute("src") ➔ ప్రస్తుత లింక్ లేదా అట్రిబ్యూట్ విలువను తెలుసుకోవడానికి.
• element.removeAttribute("disabled") ➔ బటన్ డిజేబుల్ అట్రిబ్యూట్ ని తీసివేయడానికి.

1. Inline Styles మార్చడం:
element.style.color = "blue"; అని రాస్తే అది నేరుగా ఆ ట్యాగ్‌పై CSS రాస్తుంది.
Gotcha (CamelCase నియమం): CSS లో background-color లేదా font-size అని రాస్తాం. కానీ JavaScript లో హైఫన్ (-) మైనస్ ఆపరేటర్‌గా భావించబడుతుంది. కాబట్టి ఎల్లప్పుడూ camelCase వాడాలి:
card.style.backgroundColor = "#1e293b";
card.style.fontSize = "18px";

2. కొత్త ఎలిమెంట్లను సృష్టించడం & తొలగించడం:
పేజీలో ముందే లేని ఒక కొత్త బటన్ లేదా లిస్ట్ ఐటమ్‌ను గాల్లో సృష్టించి పేజీలో అతికించవచ్చు:

1. const newLi = document.createElement("li"); ➔ మెమరీలో ఒక కొత్త <li> సృష్టిస్తుంది.
2. newLi.textContent = "కొత్త టాస్క్"; ➔ దానిలో టెక్స్ట్ నింపుతుంది.
3. parentUl.appendChild(newLi); ➔ పేరెంట్ లిస్ట్ లోపల చివరిలో అతికిస్తుంది.
4. newLi.remove(); ➔ ఆ ఎలిమెంట్‌ను స్క్రీన్ పై నుండి శాశ్వతంగా తుడిచిపెట్టేస్తుంది!

పైన మనం నేర్చుకున్న సెలెక్టర్లు, టెక్స్ట్ మార్పులు, క్లాస్‌ల టోగులింగ్ మరియు కొత్త ఎలిమెంట్ చేర్చే విధానాన్ని ప్రదర్శించే ఏకైక సమగ్ర కోడ్ ఉదాహరణ ఇది. బ్రౌజర్ లో ఇది ఎలా రన్ అవుతుందో ప్రతి లైన్ గమనించండి:

/* 
  ఊహాత్మక HTML నిర్మాణం (DOM Tree):
  <div id="profile-card" class="card">
    <h2 id="user-name">పాత పేరు</h2>
    <p class="status">Offline</p>
    <ul id="skills-list">
      <li>HTML</li>
    </ul>
  </div>
*/

// 1. ఎలిమెంట్లను ఎంచుకోవడం (Selecting)
const card = document.querySelector("#profile-card");
const userName = document.querySelector("#user-name");
const statusText = document.querySelector(".status");
const skillsList = document.querySelector("#skills-list");

// 2. టెక్స్ట్ మరియు కంటెంట్ మార్చడం (Content Manipulation)
userName.textContent = "రవి కుమార్ (Senior Dev)";
statusText.textContent = "Online 🟢";

// 3. CSS స్టైల్స్ మార్చడం (Style Manipulation via CamelCase)
userName.style.color = "#38bdf8";
card.style.backgroundColor = "#0f172a";
card.style.padding = "20px";
card.style.borderRadius = "10px";

// 4. క్లాస్‌లను జోడించడం మరియు టోగుల్ చేయడం (classList API)
card.classList.add("highlight-card");
statusText.classList.toggle("active-status");

// 5. డైనమిక్‌గా కొత్త ఎలిమెంట్ సృష్టించి జోడించడం (createElement & append)
const newSkill = document.createElement("li");
newSkill.textContent = "JavaScript Master";
newSkill.style.color = "#10b981";
skillsList.appendChild(newSkill);

// 6. మార్పులను కన్సోల్ లో పరిశీలించడం
console.log("Updated Name:", userName.textContent);
console.log("Classes on Card:", card.className);
console.log("Total Skills Count:", skillsList.children.length);

• userName.textContent పాత పేరును తీసివేసి రవి కుమార్ అనే కొత్త పేరును భద్రంగా ప్రతిక్షేపించింది.
• card.style.backgroundColor ద్వారా హైఫన్ లేకుండా సురక్షితంగా నేవీ బ్లూ బ్యాక్‌గ్రౌండ్ కలర్ సెట్ చేయబడింది.
• document.createElement("li") ద్వారా సరికొత్త స్కిల్ ఎలిమెంట్ సృష్టించబడి appendChild తో లిస్ట్‌లో చేరింది.

DOM తో పనిచేసేటప్పుడు కొత్త డెవలపర్లు ఎదుర్కొనే ప్రధాన తప్పులు మరియు వాటి నివారణ మార్గాలు:

వెబ్‌సైట్‌లలో డైనమిక్ యూజర్ ప్రొఫైల్ కార్డును అప్‌డేట్ చేసే ఒక పూర్తి స్థాయి DOM మేనిప్యులేషన్ స్క్రిప్ట్ ఇది. బటన్ క్లిక్ చేసినప్పుడు ప్రొఫైల్ నేమ్ మార్చడం, ప్రీమియం బ్యాడ్జ్ జోడించడం, మరియు వ్యూ కౌంటర్ పెంచే లాజిక్‌ను ఇది ప్రదర్శిస్తుంది:

// ఒక వెబ్ అప్లికేషన్‌లో యూజర్ కార్డును డైనమిక్‌గా మార్చే ఫంక్షన్
function upgradeUserProfile(userConfig) {
  // ఊహాత్మక DOM ఎలిమెంట్స్ ఆబ్జెక్ట్
  const mockDOM = {
    title: { textContent: "Guest User", style: {} },
    card: { classList: new Set(["base-card"]), style: {} },
    badgesContainer: { children: [] }
  };

  // 1. టైటిల్ & టెక్స్ట్ సురక్షితంగా మార్చడం
  mockDOM.title.textContent = userConfig.name;

  // 2. ప్రీమియం థీమ్ వర్తింపజేయడం (CSS inline styles)
  if (userConfig.isPremium) {
    mockDOM.card.style.borderColor = "#10b981";
    mockDOM.card.style.boxShadow = "0 8px 24px rgba(16, 185, 129, 0.2)";
    mockDOM.card.classList.add("premium-tier");
  }

  // 3. కొత్త బ్యాడ్జ్ ఎలిమెంట్ ని సృష్టించి జోడించడం
  const badge = {
    tag: "span",
    textContent: userConfig.badgeText || "PRO Member",
    className: "badge-pro"
  };
  mockDOM.badgesContainer.children.push(badge);

  return {
    displayName: mockDOM.title.textContent,
    activeClasses: Array.from(mockDOM.card.classList).join(" "),
    borderHighlight: mockDOM.card.style.borderColor,
    totalBadges: mockDOM.badgesContainer.children.length
  };
}

// ప్రీమియం యూజర్ కోసం అప్‌గ్రేడ్ ఫంక్షన్ రన్ చేయడం
const result = upgradeUserProfile({
  name: "ఆదిత్య వర్మ",
  isPremium: true,
  badgeText: "🚀 Full-Stack Hero"
});

console.log("యూజర్ పేరు:", result.displayName);
console.log("కార్డ్ క్లాస్‌లు:", result.activeClasses);
console.log("బోర్డర్ కలర్:", result.borderHighlight);
console.log("మొత్తం బ్యాడ్జ్‌లు:", result.totalBadges);

ఈ క్రింది ప్రశ్నలకు స్వయంగా ఆలోచించి సమాధానం చెప్పడానికి ప్రయత్నించండి, ఆపై డ్రాప్‌డౌన్ తెరిచి వివరణను సరిచూసుకోండి:

1. querySelector మరియు querySelectorAll మధ్య ప్రధాన వ్యత్యాసం ఏమిటి?
2. యూజర్ కామెంట్స్‌ను స్క్రీన్ పై ప్రదర్శించేటప్పుడు innerHTML కంటే textContent ఎందుకు సురక్షితమైనది?
3. ఒక బటన్ క్లిక్ చేసినప్పుడు క్లాస్ ఉంటే తీసేయడానికి, లేకపోతే పెట్టడానికి ఏ classList మెథడ్ వాడతారు?
4. జావాస్క్రిప్ట్ ద్వారా ఒక ఎలిమెంట్ యొక్క font-size ని మార్చడానికి సరైన కోడ్ ఏమిటి?
5. పేజీలో ఉన్న అన్ని <button> ఎలిమెంట్స్ యొక్క బ్యాక్‌గ్రౌండ్ కలర్ మార్చడానికి లూప్ ఎందుకు అవసరం?
6. డైనమిక్‌గా ఒక కొత్త HTML ఎలిమెంట్‌ను మెమరీలో సృష్టించే బిల్ట్-ఇన్ మెథడ్ ఏది?