Thay đổi nội dung HTML bằng DOM trong JavaScript

<div id="content"></div>
<button onclick="addHTML()">Thêm nội dung</button>

<script>
  function addHTML() {
    document.getElementById("content").innerHTML = "<h3>Tiêu đề mới</h3><p>Đây là nội dung mới.</p>";
  }
</script>

Kết quả: Khi nhấn nút, thẻ <h3> và <p> sẽ được thêm vào <div id="content">.

Thay đổi nội dung bằng textContent và innerText

Sự khác biệt giữa textContent và innerText

Khi nào nên sử dụng textContent hoặc innerText?

• Dùng textContent khi:
  Cần lấy hoặc thay đổi nội dung văn bản, kể cả nội dung ẩn.
  Muốn tăng hiệu suất vì textContent nhanh hơn.

• Dùng innerText khi:
  Chỉ muốn lấy hoặc thay đổi nội dung hiển thị trên trang.
  Cần tôn trọng CSS display: none hoặc visibility: hidden.

Ví dụ minh họa

Sử dụng textContent để lấy nội dung ẩn

<p id="text" style="display: none;">Nội dung bị ẩn</p>
<button onclick="showText()">Hiển thị nội dung</button>

<script>
  function showText() {
    alert(document.getElementById("text").textContent);
  }
</script>

Kết quả: Dù đoạn văn bản bị ẩn, khi nhấn nút, alert vẫn hiển thị "Nội dung bị ẩn".

Sử dụng innerText để chỉ lấy nội dung hiển thị

<p id="text" style="display: none;">Nội dung bị ẩn</p>
<button onclick="showText()">Hiển thị nội dung</button>

<script>
  function showText() {
    alert(document.getElementById("text").innerText);
  }
</script>

Kết quả: alert sẽ không hiển thị gì vì đoạn văn bị ẩn.

Thay đổi nội dung văn bản bằng textContent

<p id="demo">Nội dung cũ</p>
<button onclick="changeText()">Thay đổi nội dung</button>

<script>
  function changeText() {
    document.getElementById("demo").textContent = "Nội dung mới!";
  }
</script>

Kết quả: Khi nhấn nút, nội dung của <p> sẽ thay đổi thành "Nội dung mới!".

Thay đổi thuộc tính của phần tử DOM trong JavaScript

Ngoài việc thay đổi nội dung của phần tử HTML, JavaScript cũng cho phép chúng ta thay đổi các thuộc tính của phần tử như src, href, class, id, style, v.v. Có hai cách chính để thực hiện điều này:

• Sử dụng setAttribute() để thay đổi giá trị thuộc tính.

• Thay đổi trực tiếp thuộc tính bằng cách gán giá trị mới (element.property).

Thay đổi giá trị thuộc tính với setAttribute()

Cú pháp:

element.setAttribute("attribute", "value");

Phương thức setAttribute() giúp thiết lập hoặc thay đổi giá trị của một thuộc tính bất kỳ của phần tử.

Ví dụ: Thay đổi ảnh hoặc liên kết

Thay đổi ảnh khi nhấn nút

<img id="myImage" src="image1.jpg" width="300">
<button onclick="changeImage()">Đổi ảnh</button>

<script>
  function changeImage() {
    document.getElementById("myImage").setAttribute("src", "image2.jpg");
  }
</script>

Kết quả: Khi nhấn nút, ảnh sẽ thay đổi từ image1.jpg sang image2.jpg.

Thay đổi liên kết khi nhấn nút

<a id="myLink" href="https://www.google.com" target="_blank">Truy cập Google</a>
<button onclick="changeLink()">Thay đổi liên kết</button>

<script>
  function changeLink() {
    document.getElementById("myLink").setAttribute("href", "https://www.bing.com");
  }
</script>

Kết quả: Khi nhấn nút, liên kết sẽ chuyển từ Google sang Bing.

Thay đổi trực tiếp thuộc tính với element.property

Một cách khác để thay đổi thuộc tính là gán trực tiếp giá trị mới cho thuộc tính của phần tử.

Cú pháp:

element.property = "new value";

document.getElementById("myImage").src = "image2.jpg";

<img id="image" src="image1.jpg" width="300">
<button onclick="changeImage()">Đổi ảnh</button>

<script>
  function changeImage() {
    document.getElementById("image").src = "image2.jpg";
  }
</script>

<p id="text">Đây là một đoạn văn.</p>
<button onclick="changeColor()">Thay đổi màu</button>

<script>
  function changeColor() {
    document.getElementById("text").setAttribute("style", "color: red; font-size: 20px;");
  }
</script>

<p id="text2">Đây là một đoạn văn khác.</p>
<button onclick="changeColorDirect()">Thay đổi màu</button>

<script>
  function changeColorDirect() {
    document.getElementById("text2").style.color = "blue";
    document.getElementById("text2").style.fontSize = "20px";
  }
</script>

element.style.property = "value";

<p id="text">Đây là một đoạn văn bản.</p>
<button onclick="changeStyle()">Thay đổi CSS</button>

<script>
  function changeStyle() {
    let element = document.getElementById("text");
    element.style.color = "red"; // Đổi màu chữ thành đỏ
    element.style.fontSize = "20px"; // Tăng kích thước chữ
    element.style.fontWeight = "bold"; // In đậm chữ
  }
</script>

<div id="box" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<button onclick="changeBg()">Đổi màu nền</button>

<script>
  function changeBg() {
    document.getElementById("box").style.backgroundColor = "yellow";
  }
</script>

<style>
  .highlight {
    color: white;
    background-color: red;
    padding: 10px;
    font-weight: bold;
  }
</style>

<p id="text">Đây là một đoạn văn bản.</p>
<button onclick="addClass()">Thêm class</button>

<script>
  function addClass() {
    document.getElementById("text").classList.add("highlight");
  }
</script>

<style>
  .dark-mode {
    background-color: black;
    color: white;
  }
</style>

<p id="modeText">Chế độ sáng</p>
<button onclick="toggleMode()">Chuyển đổi chế độ</button>

<script>
  function toggleMode() {
    let text = document.getElementById("modeText");
    text.classList.toggle("dark-mode");

    // Thay đổi nội dung văn bản dựa trên trạng thái class
    if (text.classList.contains("dark-mode")) {
      text.innerText = "Chế độ tối";
    } else {
      text.innerText = "Chế độ sáng";
    }
  }
</script>

<p id="text">Đây là đoạn văn bản ban đầu.</p>
<button onclick="changeText()">Nhấn để thay đổi nội dung</button>

<script>
  function changeText() {
    document.getElementById("text").innerHTML = "Nội dung đã được thay đổi!";
  }
</script>

<p>Thời gian hiện tại: <span id="clock"></span></p>

<script>
  function updateClock() {
    let now = new Date();
    let timeString = now.toLocaleTimeString(); // Lấy giờ, phút, giây dạng HH:MM:SS
    document.getElementById("clock").innerHTML = timeString;
  }

  setInterval(updateClock, 1000); // Cập nhật mỗi giây
  updateClock(); // Gọi ngay lần đầu tiên để hiển thị ngay lập tức
</script>

<label for="userInput">Nhập nội dung: </label>
<input type="text" id="userInput" oninput="updateText()">
<p>Kết quả: <span id="output"></span></p>

<script>
  function updateText() {
    let inputText = document.getElementById("userInput").value;
    document.getElementById("output").innerHTML = inputText;
  }
</script>