HTML DOM - Changing HTML

در جاوااسکریپت، می‌توان محتوا، ساختار و ظاهر عناصر HTML را به صورت دینامیک تغییر داد.
با استفاده از DOM Methods و Properties می‌توان متن، HTML، Attributes و استایل عناصر را تغییر داد.

🔹 1. تغییر متن عناصر

با innerText

  • فقط متن قابل مشاهده در صفحه را تغییر می‌دهد

let title = document.getElementById("myTitle");
title.innerText = "New Title Text";

با textContent

  • متن خام عنصر را تغییر می‌دهد، حتی شامل محتوای مخفی

let para = document.getElementById("para");
para.textContent = "Updated paragraph content";

🔹 2. تغییر HTML عناصر

با innerHTML

  • می‌توان محتوای HTML داخلی عنصر را تغییر داد

let container = document.getElementById("container");
container.innerHTML = "<p>New paragraph added</p>";

با outerHTML

  • کل عنصر شامل خود آن را جایگزین می‌کند

let header = document.getElementById("header");
header.outerHTML = "<h2>Replaced Header</h2>";

🔹 3. تغییر Attributes

  • دریافت مقدار: getAttribute(attr)

  • تغییر یا اضافه کردن: setAttribute(attr, value)

  • حذف Attribute: removeAttribute(attr)

let link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
console.log(link.getAttribute("href"));
link.removeAttribute("target");

🔹 4. تغییر استایل عناصر

  • با استفاده از style.property می‌توان CSS عناصر را تغییر داد

let box = document.getElementById("box");
box.style.backgroundColor = "blue";
box.style.width = "250px";
box.style.border = "2px solid black";

🔹 5. تغییر کلاس‌ها

  • اضافه کردن کلاس: classList.add("className")

  • حذف کلاس: classList.remove("className")

  • تغییر کلاس: classList.toggle("className")

  • بررسی کلاس: classList.contains("className")

let box = document.getElementById("box");
box.classList.add("active");
box.classList.toggle("highlight");
console.log(box.classList.contains("active")); // true

🔹 6. ایجاد و جایگزینی عناصر

ایجاد عنصر جدید

let newDiv = document.createElement("div");
newDiv.innerText = "Hello World";
document.body.appendChild(newDiv);

جایگزینی عنصر موجود

let oldDiv = document.getElementById("oldDiv");
let newDiv = document.createElement("div");
newDiv.innerText = "New Content";
oldDiv.parentNode.replaceChild(newDiv, oldDiv);

حذف عنصر

let oldDiv = document.getElementById("oldDiv");
oldDiv.remove();

✅ خلاصه

  • تغییر HTML → تغییر متن، محتوای HTML، Attributes و استایل عناصر

  • Properties و Methods مهم: innerText, textContent, innerHTML, outerHTML, setAttribute, removeAttribute, style, classList

  • ایجاد، جایگزینی و حذف عناصر → createElement, appendChild, replaceChild, remove

  • با این روش‌ها می‌توان صفحه وب را دینامیک و تعاملی کرد