DOM Manipulation trong Javascript là gì?

Spread the love

Với lập trình web, kiến thức về DOM và khả năng thao tác DOM là hai yếu tố quan trọng nhất. DOM cho bạn khả năng thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất.

Và Javascript là một ngôn ngữ được sử dụng trên các Browser nên nó đóng một vai trò quan trọng trong các website. Javascript giúp cho việc thao tác với các tài liệu HTML kết hợp với các cú pháp riêng của nó để tạo nên các trải nghiệm thân thiện của web. Để thao tác được với các thẻ HTML thì nó phải thông qua một cơ chế ta gọi là DOM.

DOM là gì? DOM là tên gọi viết tắt của (Document Object Model – tạm dịch Mô hình Các Đối tượng Tài liệu). Là một chuẩn được định nghĩa bởi W3C (Tổ Chức Web Toàn Cầu – World Wide Web Consortium). DOM được dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dụng như Javascript, PHP…

DOM là gì?

Tại sao DOM ra đời?

Đã có lúc HTML chỉ là một định dạng văn bản. Quay lại ddaauf những năm 90, một trình duyệt sẽ tải xuống một tài liệu HTML, phân tích cú pháp của nó khi nhận được, hiển thị nội dung ra màn hình và hủy tài liệu đó. Đó là thời điểm HTML hầu như chỉ được sử dụng cho các tài liệu. Nhưng sau đó, mọi người muốn bắt đầu xây dựng ứng dụng phức tạp hơn cho nền tảng web, và việc phải triển khai tát cả các tương tác ở phía máy chủ đã khiến mọi thứ trở nên quá chậm chạp. Và như vậy, vào tháng 12 năm 1995 Netscape đã giới thiệu Javascript và mọi thứ đã thay đổi.

Giống như HTML, Javascript được tải xuống bởi trình duyệt và xử lý ở phía máy khách. Tuy nhiên, Javascript là một ngôn ngữ lập trình thực tế, không chỉ là ghi nhãn hiển thị và định dạng văn bản mà JS còn được sử dụng để thực hiện các hoạt động tương tác. Nhưng phạm vị tương tác rất hạn chế vì bản thân giao diện người dùng hầu như chỉ được triển khai bằng cách sử dụng HTML và HTML chủ yếu được “tải về” khi tải xong từ phía server. Điều cần thiết là một cách để sửa đổi giao diện người dùng được tạo từ HTML sau khi trang đã được tải. Như vậy, DOM đã ra đời.

DOM về cơ bản là một biểu diễn trong bộ nhớ của HTML mọi phần tử HTML được đại diện bởi một nút HTML, là một đối tượng mà Javascript có thể tương tác và thao tác. Và DOM cũng vậy, với mỗi nút có một tập hợp các nút con. Và khi mã Javascript sửa đổi DOM, những thay đổi này sẽ tự động được phản ánh trong HTML ngay sau khi mã Javascript được thực hiện.

DOM là thứ được tạo ra sau khi trình duyệt phân tích cú pháp HTML mà nó nhận được và nó có cấu trúc phân cấp dạng cây của các nút (phần tử HTML). 

DOM trong Javascript

DOM Manipulation là gì?

Thao tác DOM + API DOM để thay đổi/ sửa đổi tài liệu HTML sẽ được hiển thị trên trình duyệt web.

  • Kết quả:
    • Tạo các ứng dụng sẽ cập nhật dữ liệu của trang mà không cần làm mới
    • Thay đổi bố cục của trang mà không cần làm mới
    • Xáo trộn, di chuyển hoặc xóa các phần tử trên toàn bộ tài liệu…
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />
    <title>DOM manipulation with JavaScript</title>
    <style>
      .todo-wrapper li {
        cursor: pointer;
      }
      .todo-wrapper li:hover {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>My Daily Task:</h1>
      <hr />
      <ul class="todo-wrapper">
        <li class="todo">Wake up at 6 o'clock</li>
        <li class="todo">Do exercise</li>
        <li class="todo">Brush your teeth and wash your face</li>
      </ul>

      <input
        type="text"
        name=""
        class="form-control"
        id="inputUser"
        placeholder="Please enter your task"
      />
      <br />
      <button class="btn btn-outline-secondary" style="width: 100%" id="btnAdd">
        Add New Task
      </button>
    </div>

    <!-- Add element -->
    <script>
      // Get access to the button
      let button = document.querySelector("#btnAdd");

      // Get access to the ul tag (the parent of the li tag)
      let todoWrapper = document.querySelector(".todo-wrapper");

      // OnSubmit Add New Task To The DOM
      button.addEventListener("click", () => {
        // Get User Input
        let inputUser = document.querySelector("#inputUser").value;

        if (inputUser.length > 5) {
          // Create a new li tag
          let li = document.createElement("li");

          // Add a class name of todo to the li tag
          li.className = "todo";

          // Create a Text Node from user input
          let node = document.createTextNode(inputUser);

          // Append node to li
          li.appendChild(node);

          // Append li to ul
          todoWrapper.appendChild(li);

          // Empty user input
          document.querySelector("#inputUser").value = "";
        } else {
          alert("Todo's can't be less than 5 characters :)");
        }
      });
    </script>

    <!-- Remove an item from list -->
    <script>
      document.querySelector(".todo-wrapper").addEventListener("click", (e) => {
        if (e.target.className === "todo") {
          let msg = confirm(
            `Are you sure you want to delete "${e.target.innerText}"`
          );

          if (msg == true) {
            document.querySelector(".todo-wrapper").removeChild(e.target);
          }
        }
      });
    </script>
  </body>
</html>

Kết luận

Một số tài liệu tham khảo

Leave a Comment