HTML DOM trong JavaScript - Thay đổi HTML - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

HTML DOM trong JavaScript – Thay đổi HTML

JavaScript

Hướng dẫn JavaScript

Biểu mẫu JavaScript

Đối tượng JavaScript

Hàm JavaScript

DOM JavaScript

Trình duyệt BOM

JavaScript Ajax

JavaScript Json

HTML DOM cho phép JavaScript thay đổi nội dung của các phần tử HTML.

Thay đổi luồng đầu ra HTML

JavaScript có thể tạo nội dung HTML động:

Date: Mon Aug 28 2017 23:46:59 GMT+0700 (SE Asia Standard Time)

Trong JavaScript, document.write() có thể được sử dụng để ghi trực tiếp vào dòng đầu ra HTML:

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

Không bao giờ sử dụng document.write() sau khi nạp tài liệu. Nó sẽ ghi đè lên tài liệu.

Thay đổi nội dung HTML

Cách đơn giản nhất để sửa đổi nội dung của một phần tử HTML là sử dụng thuộc tính innerHTML. Để thay đổi nội dung của một phần tử HTML, hãy sử dụng cú pháp sau:

document.getElementById(id).innerHTML = new HTML

Ví dụ này thay đổi nội dung của một phần tử <p>:

<html>
<body>

<p id=”p1″>Hello World!</p>

<script>
document.getElementById(“p1”).innerHTML = “New text!”;
</script>

</body>
</html>

Phân tích ví dụ trên:

  • Tài liệu HTML ở trên chứa một phần tử <p> với id = “p1”
  • Sử dụng HTML DOM để lấy phần tử có id = “p1”
  • Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành “New text!”

Ví dụ này thay đổi nội dung của một phần tử <h1>:

<!DOCTYPE html>
<html>
<body>

<h1 id=”id01″>Old Heading</h1>

<script>
var element = document.getElementById(“id01”);
element.innerHTML = “New Heading”;
</script>

</body>
</html>

Phân tích ví dụ trên:

  • Tài liệu HTML ở trên chứa một phần tử <h1> với id = “id01”
  • Sử dụng HTML DOM để lấy phần tử id = “id01”
  • Một JavaScript thay đổi nội dung (innerHTML) của phần tử đó thành “New Heading”

Thay đổi giá trị của một thuộc tính

Để thay đổi giá trị của một thuộc tính HTML, sử dụng cú pháp sau:

document.getElementById(id).attribute = new value

Ví dụ này thay đổi giá trị của thuộc tính src của một phần tử <img>:

<!DOCTYPE html>
<html>
<body>

<img id=”myImage” src=”smiley.gif”>

<script>
document.getElementById(“myImage”).src = “landscape.jpg”;
</script>

</body>
</html>

Giải thích ví dụ:

  • Tài liệu HTML ở trên chứa một phần tử <img> với id = “myImage”
  • Sử dụng HTML DOM để lấy phần tử id = “myImage”
  • Một JavaScript thay đổi thuộc tính src của phần tử đó từ “smiley.gif” sang “landscape.jpg”