Hàm Hàm Thao Tác Với DOM Trong Javascript | DOM Manipulation Functions

Dưới đây là mô tả của mỗi hàm DOM manipulation cùng với ví dụ minh họa bằng mã nguồn JavaScript.

1. document.getElementById(id):
   • Mô tả: Lấy phần tử theo id.
   • Ví dụ:

     <div id="myDiv">Nội dung của phần tử</div>
     <script>
       var element = document.getElementById("myDiv");
       console.log(element);
     </script>
     

2. document.querySelector(selector):
   • Mô tả: Lấy phần tử đầu tiên phù hợp với selector.
   • Ví dụ:

     <p class="myClass">Nội dung của phần tử</p>
     <script>
       var element = document.querySelector(".myClass");
       console.log(element);
     </script>
     

3. document.querySelectorAll(selector):
   • Mô tả: Lấy tất cả các phần tử khớp với một CSS selector.
   • Ví dụ:

     <p class="myClass">Element 1</p>
     <p class="myClass">Element 2</p>
     <script>
       var elements = document.querySelectorAll(".myClass");
       console.log(elements);
     </script>
     

4. document.getElementsByClassName(className):
   • Mô tả: Lấy tất cả các phần tử DOM có cùng class.
   • Ví dụ:

     <p class="myClass">Element 1</p>
     <p class="myClass">Element 2</p>
     <script>
       var elements = document.getElementsByClassName("myClass");
       console.log(elements);
     </script>
     

5. document.getElementsByTagName(tagName):
   • Mô tả: Lấy tất cả các phần tử DOM có cùng thẻ HTML.
   • Ví dụ:

     <p>Paragraph 1</p>
     <p>Paragraph 2</p>
     <script>
       var elements = document.getElementsByTagName("p");
       console.log(elements);
     </script>
     

6. document.createElement(tagName):
   • Mô tả: Tạo một phần tử DOM mới.
   • Ví dụ:

     <script>
       var newElement = document.createElement("div");
       newElement.textContent = "Nội dung mới";
       document.body.appendChild(newElement);
     </script>
     

7. parentElement.appendChild(node):
   • Mô tả: Thêm một nút con vào một phần tử.
   • Ví dụ:

     <div id="parentElement">Nội dung cha</div>
     <script>
       var parent = document.getElementById("parentElement");
       var child = document.createElement("p");
       child.textContent = "Nội dung con";
       parent.appendChild(child);
     </script>
     

8. parentElement.removeChild(node):
   • Mô tả: Xóa một nút con khỏi một phần tử.
   • Ví dụ:

     <div id="parentElement">
       <p id="childElement">Nội dung con</p>
     </div>
     <script>
       var parent = document.getElementById("parentElement");
       var child = document.getElementById("childElement");
       parent.removeChild(child);
     </script>
     

9. element.setAttribute(name, value):
   • Mô tả: Đặt giá trị cho thuộc tính của một phần tử.
   • Ví dụ:

     <div id="myDiv">Nội dung của phần tử</div>
     <script>
       var element = document.getElementById("myDiv");
       element.setAttribute("class", "highlight");
     </script>
     

10. element.getAttribute(name):
    • Mô tả: Lấy giá trị của một thuộc tính của phần tử.
    • Ví dụ:

      <div id="myDiv" class="highlight">Nội dung của phần tử</div>
      <script>
        var element = document.getElementById("myDiv");
        var className = element.getAttribute("class");
        console.log(className);
      </script>
      

11. element.innerHTML:
    • Mô tả: Lấy hoặc gán nội dung HTML của phần tử.
    • Ví dụ:

      <div id="myDiv">Nội dung của phần tử</div>
      <script>
        var element = document.getElementById("myDiv");
        console.log(element.innerHTML);
        element.innerHTML = "<p>Thay đổi nội dung</p>";
      </script>
      

12. element.innerText:
    • Mô tả: Lấy hoặc đặt nội dung văn bản của một phần tử.
    • Ví dụ:

      <div id="myDiv">Nội dung của phần tử</div>
      <script>
        var element = document.getElementById("myDiv");
        console.log(element.innerText);
        element.innerText = "Thay đổi nội dung";
      </script>
      

13. element.classList:
    • Mô tả: Cho phép thêm, xóa, hoặc kiểm tra sự tồn tại của các lớp CSS trên phần tử.
    • Ví dụ:

      <div id="myDiv" class="box">Nội dung của phần tử</div>
      <script>
        var element = document.getElementById("myDiv");
        element.classList.add("highlight");
        element.classList.remove("box");
        console.log(element.classList.contains("highlight"));
      </script>
      

14. element.style:
    • Mô tả: Cho phép thao tác với các thuộc tính kiểu dáng của phần tử.
    • Ví dụ:

      <div id="myDiv">Nội dung của phần tử</div>
      <script>
        var element = document.getElementById("myDiv");
        element.style.color = "blue";
        element.style.fontSize = "20px";
      </script>
      

Nhớ rằng, việc thao tác trên DOM nên được thực hiện sau khi trang web đã được tải hoàn toàn (trong sự kiện "DOMContentLoaded" hoặc sau sự kiện "load").