DOM và JavaScript

DOM là viết tắt của Document Object Model, là một giao diện lập trình ứng dụng (API) cho phép các ngôn ngữ lập trình như JavaScript truy cập và thay đổi nội dung của các phần tử HTML, CSS và XML trong trình duyệt web. DOM giúp cho việc tương tác với các phần tử HTML, thêm, xóa và thay đổi nội dung trở nên dễ dàng hơn.

Khi một trang web được tải lên trình duyệt, trình duyệt sẽ tạo ra một DOM tree, một cây phân cấp chứa tất cả các phần tử HTML trên trang web. Mỗi phần tử trong cây DOM có thể được truy cập bằng JavaScript thông qua các đối tượng và phương thức API của DOM.

Ví dụ, để truy cập một phần tử HTML và thay đổi nội dung của nó bằng JavaScript, chúng ta có thể sử dụng phương thức getElementById để lấy tham chiếu đến phần tử, sau đó sử dụng thuộc tính innerHTML để thay đổi nội dung.

<!DOCTYPE html>
<html>
  <head>
    <title>Example of using JavaScript to modify HTML elements</title>
  </head>
  <body>
    <h1 id="myHeading">Hello World!</h1>
    
    <script>
      const heading = document.getElementById("myHeading");
      heading.innerHTML = "Modified heading text";
    </script>
  </body>
</html>

Trong ví dụ này, chúng ta sử dụng phương thức getElementById để lấy tham chiếu đến phần tử h1 có id là “myHeading”, sau đó thay đổi nội dung của phần tử bằng cách gán giá trị mới cho thuộc tính innerHTML. Khi trang web được tải lên, nội dung của phần tử h1 sẽ được thay đổi thành “Modified heading text”.

Dưới đây là một ví dụ về cách sử dụng JavaScript để tương tác với DOM, tức là cấu trúc cây của trang web:

<!DOCTYPE html>
<html>
<head>
	<title>DOM Example</title>
	<script>
		function changeColor() {
			let myDiv = document.getElementById("myDiv");
			myDiv.style.backgroundColor = "blue";
		}
	</script>
</head>
<body>
	<h1>DOM Example</h1>
	<div id="myDiv" style="background-color: red; width: 100px; height: 100px;"></div>
	<button onclick="changeColor()">Change color</button>
</body>
</html>

Trong ví dụ này, chúng ta định nghĩa một hàm changeColor để thay đổi màu nền của một div có id là “myDiv”. Trong hàm này, chúng ta sử dụng phương thức getElementById để lấy tham chiếu đến phần tử div và đặt thuộc tính style.backgroundColor thành màu xanh.

Ở phần HTML, chúng ta tạo ra một div có id là “myDiv” và màu nền mặc định là đỏ. Chúng ta cũng thêm một nút button để gọi hàm changeColor khi người dùng bấm vào nút này.

Khi chạy trang web này và nhấn nút “Change color”, màu nền của div sẽ thay đổi từ màu đỏ sang màu xanh, như đã được định nghĩa trong hàm changeColor. Cách làm này sử dụng JavaScript để tương tác với các phần tử trong cây DOM và thay đổi thuộc tính của chúng để tạo ra các hiệu ứng trực quan trên trang web.

JavaScript, jQuery

DOM và JavaScript

Trả lời Hủy