JavaScript · Lesson 21 / 32 · தமிழ்

DOM Manipulation

கருத்தைப் புரிந்துகொள்ளுங்கள். Code-ஐ மாற்றி இயக்குங்கள். ஒரு சிறிய பயிற்சியால் கற்றதை உறுதி செய்யுங்கள்.

Detailed notesBrowser previewPractice + answer

மூலப் பாட விளக்கங்கள் தமிழில் உள்ளன. கூடுதல் concept, practice மற்றும் answer notes ஆங்கிலத்தில் உள்ளன.

01 / Understand

முக்கியக் கருத்து

The DOM exposes the page as objects. Select an element, then update its text or attributes. Run this complete HTML example in the HTML preview editor.

Learning goal: Explain what the example does, predict its result, and change it to solve the practice task.

02 / Explore

விரிவான விளக்கங்கள்

DOM என்னன்னு தெரியுமா?

DOM (Document Object Model) என்பது HTML document-ன் tree-like representation. JavaScript DOM-ஐ read மற்றும் modify பண்ணி page content, structure, styles dynamically update பண்ணலாம்.

Elements Select பண்றது

JavaScript reference fragmentCODE

// Modern selectors (first match return பண்ணும்)
document.querySelector(".btn");     // class-ல
document.querySelector("#title");   // id-ல
document.querySelector("h1");       // tag-ல

// All matches — NodeList return பண்ணும்
document.querySelectorAll(".card");

// Legacy
document.getElementById("title");
document.getElementsByClassName("btn");

Content Modify பண்றது

JavaScript reference fragmentCODE

const el = document.querySelector("#title");

el.textContent = "New Title";                    // safe — HTML இல்ல
el.innerHTML = "<strong>Bold Title</strong>";    // HTML parse பண்ணும்

el.setAttribute("data-id", "42");
el.classList.add("active");
el.classList.remove("hidden");
el.classList.toggle("visible");

el.style.color = "red";
el.style.backgroundColor = "#f0f0f0";

Elements Create மற்றும் Insert பண்றது

JavaScript reference fragmentCODE

const li = document.createElement("li");
li.textContent = "New Item";
li.classList.add("list-item");

const ul = document.querySelector("ul");
ul.appendChild(li);   // end-ல
ul.prepend(li);       // start-ல

li.remove();

Security: User data-உடன் innerHTML never use பண்ணாதே — XSS attack வரும். Plain text-க்கு textContent use பண்ணு.

User input-ஐ page-ல் காட்ட எது பாதுகாப்பானது?

element.innerHTML
element.insertAdjacentHTML
element.textContent
document.write

Reveal answer / விடை

element.textContent

textContent user input-ஐ plain text ஆக மாற்றுவதால், அதை XSS (Cross Site Scripting) தாக்குதல்களில் இருந்து பாதுகாக்கிறது.

03 / Read & predict

முழுமையான உதாரணம்

This is a complete HTML document. Use the HTML preview editor below, not the Node console. Press Run to refresh the rendered page.

index.html · complete exampleCODE

<!doctype html>
<html lang="en"><meta charset="utf-8"><title>DOM practice</title>
<body><h1 id="title">Waiting</h1><p id="summary"></p>
<script>
const title = document.querySelector("#title");
title.textContent = "JavaScript controls this heading";
document.querySelector("#summary").textContent = "2 lessons completed";
</script></body></html>

எதிர்பார்க்கும் முடிவைப் பாருங்கள்

Page heading: JavaScript controls this heading
Paragraph: 2 lessons completed

04 / Experiment

மாற்றி இயக்கிப் பாருங்கள்

For this browser example, interact with the rendered preview after pressing Run.

Open editor ↗

Editor load ஆனதும் code-ஐ ஏற்றி Run அழுத்துங்கள்.

OneCompiler என்ற இலவச வெளிப்புற சேவை code-ஐ இயக்குகிறது. Run செய்யும் code அங்கு அனுப்பப்படும். தனிப்பட்ட தகவல்கள் அல்லது secret keys உள்ளிட வேண்டாம்.

05 / Your turn

சிறிய பயிற்சி

Practice challenge

Change the paragraph to 5 lessons completed.

விடை மற்றும் விளக்கம்

Set the summary element's textContent to "5 lessons completed" and rerun the preview.

தவிர்க்க வேண்டிய தவறு: document and querySelector belong to the browser DOM. A Node console editor does not provide a webpage. Use textContent for plain text instead of inserting untrusted HTML.

அடுத்த பாடத்திற்குத் தயாரா?

Explain the example in your own words.
Complete the challenge before revealing its answer.
Describe the common mistake and how to avoid it.