HTML ትምህርት - ክፍል 8

🌳

DOM ምንድን ነው? // Document Object Model

DOM = Document Object Model — Browser HTML ን ዛፍ (tree) ሆኖ ያዘጋጃል። JavaScript ደግሞ ያ tree ላይ ነገሮችን ሊጨምር፣ ሊቀይር፣ ሊሰርዝ ይችላል!
The DOM is how browsers represent HTML as a tree structure. JS can then access and modify any part of that tree!

🌳

DOM = HTML ዛፍ ነው። document = ሙሉ page, document.body = <body> tag, getElementById = አንድ element ማግኘት
Think of DOM as a family tree — document is the root, html is the trunk, head/body are branches, elements are leaves.

🌳 DOM Tree — HTML ዛፍ:

document

<html>

<head>

<title> "EthioCode"

<body>

<h1 id="title"> "ሰላም!"

<p id="text"> "ትምህርት"

<button id="btn"> "ጠቅ አድርግ"

🔧

DOM Methods — አስፈላጊ Commands // Selecting & Changing

Elements ለማግኘት (Selecting):

Method	ምን ያደርጋል?	ምሳሌ
getElementById()	id ተጠቅሞ አንድ element Get element by id	getElementById("title")
querySelector()	CSS selector ተጠቅሞ Get first matching element	querySelector(".card")
querySelectorAll()	ሁሉም matching elements Get all matching elements	querySelectorAll("p")

Elements ለመቀየር (Modifying):

Property/Method	ምን ያደርጋል?	ምሳሌ
.innerText	ጽሑፍ ለማንበብ/ለመቀየር Get/set text content	el.innerText = "አዲስ"
.innerHTML	HTML ጽሑፍ ለመቀየር Get/set HTML content	el.innerHTML = "<b>ወፍራም</b>"
.style	CSS ቀጥታ ለመቀየር Change CSS directly	el.style.color = "red"
.classList	CSS class ለመጨምር/ለማስወጣት Add/remove CSS classes	el.classList.add("active")
createElement()	አዲስ element ለመስራት Create new HTML element	createElement("div")
appendChild()	Element ለመጨመር Add element to DOM	parent.appendChild(el)
.remove()	Element ለማስወጣት Remove element from DOM	el.remove()

dom.js — ሙሉ ምሳሌ

// Element ማግኘት
const title = document.getElementById("myTitle");

// ጽሑፍ ለውጥ
title.innerText = "አዲስ ርዕስ! 🎉";

// Style ለውጥ
title.style.color = "#e879f9";
title.style.fontSize = "36px";

// Class ጨምር
title.classList.add("highlight");

// አዲስ element ስራ
const newP = document.createElement("p");
newP.innerText = "አዲስ paragraph! 🆕";
document.body.appendChild(newP);

// Event listener — ጠቅ ሲደረግ
const btn = document.getElementById("myBtn");
btn.addEventListener("click", function() {
  alert("Button ተጫነ! ✅");
});

🎮

Interactive Demos // ቀጥታ ሞክር!

🎮 Demo 1 — Live Page Builder: ጽሑፍ ጻፍ → Page ላይ ይጨምር!
Type text and add it live to the page using DOM!

📝 ጽሑፍ ጻፍ:

🏷️ Tag ምረጥ:

👆 ከላይ ጽሑፍ ጽፈህ "Page ላይ ጨምር" ጫን...

🎮 Demo 2 — Event Listeners: ጠቅ አድርግ፣ hover አድርግ — ክስተቱ ይመዝገብ!
See different DOM events in action — click, hover, double-click:

ይህን Box ጠቅ አድርግ! 🎯

Click, Double-click, ወይም Hover ሞክር

Event ሲሆን እዚህ ይታያል...

🎮 Demo 3 — Todo App (DOM ሙሉ ምሳሌ):
A full todo app using DOM — add, complete, and delete tasks!

📌

ዋና ዋና ነጥቦች // Key Takeaways

1

🌳 DOM = HTML ዛፍ

Browser HTML ን tree ሆኖ ያዘጋጃል — JS ያ tree ን ይቆጣጠራል።
The DOM is the browser's tree representation of HTML — JS accesses it via document.

2

🔍 getElementById / querySelector

Element ለማግኘት — id ተጠቅሞ ወይም CSS selector ተጠቅሞ።
Use getElementById for id, querySelector for CSS selectors.

3

✏️ innerText / innerHTML / style

ጽሑፍ፣ HTML ወይም CSS ለመቀየር — element ካገኘህ በኋላ።
Change text with innerText, HTML with innerHTML, CSS with .style.

4

🆕 createElement + appendChild

አዲስ element ስርተህ page ላይ ለመጨምር።
Create new elements with createElement, add them with appendChild.

5

👂 addEventListener — ክስተት ማዳመጥ

click, keypress, mouseover... ክስተቶችን ለማዳመጥ addEventListener ይጠቀሙ።
Use addEventListener to react to user events like clicks and keypresses.

🎯

Quiz // ምን ተማርን?

❓ id="myTitle" ያለውን HTML element JavaScript ተጠቅሞ ለማግኘት ምን ትጽፋለህ?
How do you select an HTML element with id="myTitle" using JavaScript?

A document.getElement("myTitle")

B document.findById("myTitle")

C document.getElementById("myTitle")

D document.selectId("myTitle")

DOM Manipulation 🎯HTML ን JS ይቆጣጠራል!

ይህን Box ጠቅ አድርግ! 🎯

DOM Manipulation 🎯
HTML ን JS ይቆጣጠራል!