Part 5 मा हामीले JavaScript को basic प्रयोग गरेर website लाई smart बनायौँ।अब Part 6 मा — website लाई full control गर्ने (DOM Manipulation) सिकौँ 🚀
🔍 DOM भनेको के हो?
👉 DOM = Document Object Model👉 Website को सबै HTML elements लाई JavaScript ले control गर्ने system
👉 मतलब:
- Text change गर्न सकिन्छ
- New element add गर्न सकिन्छ
- Delete गर्न सकिन्छ
- Style change गर्न सकिन्छ
👉 Example:HTML मा <p> छ भने → JavaScript ले त्यसलाई change गर्न सक्छ
⚡ DOM किन important छ?
JavaScript को real power यही हो 💪
👉 बिना DOM:Website static + limited हुन्छ
👉 DOM प्रयोग गर्दा:✅ Live update हुन्छ✅ User interaction powerful हुन्छ✅ Real apps (Facebook, Dashboard आदि) बनाइन्छ
🎯 1. Element Select गर्ने
<p id="demo">Hello</p>
<script>
var text = document.getElementById("demo");
text.innerHTML = "नमस्ते!";
</script>
👉 Output: Text change हुन्छ
🎨 2. Style Change गर्ने
<p id="colorText">Change my color</p>
<button onclick="changeColor()">Click</button>
<script>
function changeColor() {
document.getElementById("colorText").style.color = "red";
}
</script>
👉 Output: Text रातो हुन्छ 🔴
➕ 3. New Element Add गर्ने
<button onclick="addItem()">Add Item</button>
<ul id="list"></ul>
<script>
function addItem() {
var li = document.createElement("li");
li.innerHTML = "New Item";
document.getElementById("list").appendChild(li);
}
</script>
👉 Output: Button क्लिक गर्दा list बढ्छ 📈
❌ 4. Element Delete गर्ने
<ul id="list">
<li id="item1">Item 1</li>
</ul>
<button onclick="removeItem()">Remove</button>
<script>
function removeItem() {
var item = document.getElementById("item1");
item.remove();
}
</script>
👉 Output: Item delete हुन्छ 🗑️
🔥 Mini Project — To-Do List (Dynamic App)
👉 अब real app जस्तो बनाउँछौँ 😍
💻 Full Code (Copy Paste Ready)
<!DOCTYPE html>
<html>
<head>
<title>To-Do App</title>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 50px;
}
input {
padding: 10px;
width: 200px;
}
button {
padding: 10px;
margin-left: 5px;
}
li {
margin: 10px;
list-style: none;
}
</style>
</head>
<body>
<h2>My To-Do List 📝</h2>
<input type="text" id="task" placeholder="Enter task">
<button onclick="addTask()">Add</button>
<ul id="list"></ul>
<script>
function addTask() {
var task = document.getElementById("task").value;
if (task === "") {
alert("Task खाली छ ❌");
return;
}
var li = document.createElement("li");
li.innerHTML = task + " <button onclick='this.parentElement.remove()'>❌</button>";
document.getElementById("list").appendChild(li);
document.getElementById("task").value = "";
}
</script>
</body>
</html>
🎯 के सिक्यौँ?
✅ DOM के हो✅ Element select गर्ने✅ Style change गर्ने✅ Element add/remove गर्ने✅ Dynamic To-Do App बनाउने
🧠 Real-Life Understanding
👉 HTML = घर👉 CSS = सजावट👉 JavaScript + DOM =➡️ घरको switch, fan, door control system ⚡🚪
अब website “responsive + intelligent” मात्र होइन — dynamic पनि भयो 🔥
🚀 Part 7 मा के आउँछ?
👉 Local Storage (Data save गर्ने)👉 Dark Mode toggle 🌙👉 Advanced UI interactions👉 Real Web App feeling
👉 अब practice गर 👨💻👉 यो To-Do App modify गरेर आफ्नो project बनाउ
Comments
Test