Javascript tương tác với dom như thế nào?

Bạn có thể sử dụng các ngôn ngữ lập trình khác nhau để thao tác với DOM. Bài viết này sẽ tập trung vào cách sử dụng ngôn ngữ JavaScript để thao tác DOM

Hãy bắt đầu với Thao tác DOM JavaScript

DOM là gì? . Nó được biểu diễn theo thứ bậc bằng cách sử dụng cây các nút hoặc phần tử của trình duyệt. Javascript có thể thao tác các nút này có trên DOM. Javascript có thể làm được điều này vì DOM được hướng đối tượng, nghĩa là nó có một tập hợp các thuộc tính và phương thức mà bạn có thể thay đổi, thêm hoặc tạo.  

Trình duyệt được tạo thành từ đối tượng cửa sổ, có đối tượng tài liệu là nút đầu tiên. Phần tử gốc, là phần tử HTML, là nút tiếp theo. Phần tử HTML được chia thành thẻ head và thẻ body. Thẻ head có các phần tử con như thẻ meta và thẻ tiêu đề. Phần thân cũng có các phần tử con như thẻ tiêu đề và thẻ liên kết

https. //www. w3. org/TR/WD-DOM/giới thiệu. html để biết thêm thông tin về DOM.

Bạn có thể truy cập các phần tử này từ DOM và thao tác với chúng bằng JavaScript để đưa ra kết quả mong muốn

Chọn phần tử từ DOM

Bạn có thể sử dụng các bộ chọn JavaScript DOM khác nhau để chọn các phần tử khác nhau. Các bộ chọn DOM này là các phương thức đối tượng tài liệu; . Bạn có thể thay đổi, chỉnh sửa, thay thế hoặc tạo kiểu cho các thành phần được truy cập dựa trên sở thích của mình

Một số bộ chọn JavaScript DOM là

1. getElementById[] – Ở đây, lựa chọn dựa trên tên id. Bộ chọn này chỉ trả về phần tử khớp đầu tiên
2. getElementsByClassName[] – Phương thức này trả về tất cả các phần tử khớp với một tên lớp cụ thể
3. getElementsByTagName[] – Phương thức này trả về tất cả các phần tử khớp với một tên thẻ cụ thể
4. querySelector[] – Phương thức này trả về phần tử đầu tiên khớp với một bộ chọn CSS cụ thể trong tài liệu
5. querySelectorAll[] – Nó trả về tất cả các phần tử khớp với bộ chọn css đã chỉ định trong tài liệu

Hãy làm điều này thú vị hơn bằng cách thử một số ví dụ

 Hello world 

console.log[document.getElementById["test"]];

Trong ví dụ này, chúng tôi đã sử dụng phương thức getElementById để truy cập một div có tên ID là 'test' và đăng nhập nó vào bảng điều khiển. Bạn có thể tạo kiểu cho phần tử này dựa trên sở thích của mình bằng cách sử dụng thuộc tính kiểu

 //styling the accessed element
document.getElementById['test'].style.color = "pink";

Điều này sẽ tự động thay đổi màu văn bản thành màu hồng

Điều gì sẽ xảy ra nếu bạn không chỉ muốn thay đổi màu văn bản mà cả nội dung văn bản?

//changing the text content
document.getElementById["test"].textContent=" Have a great day!";

Chúng ta đã truy cập phần tử trong các ví dụ trên bằng cách sử dụng phương thức getElementById[], bây giờ hãy thay đổi màu nền bằng cách sử dụng phương thức querySelector[]

document.querySelector["div"].style.backgroundColor='blue';

Để biết thêm thông tin về bộ chọn DOM. https. // nhà phát triển. mozilla. org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors

Di chuyển qua DOM

Cây DOM là tập hợp các nút và phần tử, có quan hệ cha-con hoặc anh chị em. Di chuyển ngang về cơ bản có nghĩa là di chuyển lên và xuống DOM, truy cập và thay đổi cha hoặc con của các nút hoặc phần tử cụ thể

Các thuộc tính được sử dụng để duyệt qua DOM là anh chị em trước đó, anh chị em tiếp theo, nút con, con đầu tiên và con cuối cùng

Hãy làm việc với một ví dụ

    

        
first child
        
second child
    

script>
  let list = document.querySelector["ul"];
  let parentElement =list.parentNode;
  console.log[parentElement];

Bảng điều khiển sẽ trả về thẻ div, vì nó là phần tử cha của ul. Chúng ta có thể thêm thuộc tính style vào phần tử cha

list.parentNode.style.color='yellow';

Hãy xem phần này, để biết thêm thông tin về cách duyệt qua DOM. https. //www. w3. org/wiki/Traversing_the_DOM

Tạo và xóa các phần tử khỏi DOM

Bạn có thể tạo các phần tử và chèn chúng vào DOM, cũng như xóa chúng khỏi DOM. Làm thế nào về việc thử một ví dụ đơn giản?

Trong ví dụ này, ul có hai mục danh sách, chúng tôi sẽ tạo một mục danh sách khác và chèn nó vào ul

    

        
first child
        
second child
    


//create an element
let li = document.createElement["li"];
//give it an id 
li.id = "item";
//set the attribute
li.setAttribute['title','new div'];
//create a textNode
let textNode = document.createTextNode['third child'];
//append textNode to li
li. appendChild[textNode];
//append li to ul 
document.querySelector['ul'].appendChild[li];

Điều này tạo ra một mục danh sách mới và ném nó vào DOM

Bây giờ bạn đã biết cách tạo các mục danh sách, điều quan trọng không kém là biết cách xóa các phần tử. Bạn có thể xóa các phần tử bằng các phương pháp khác nhau. Đây là một

//this will remove the first li element
let li = document.querySelectorAll['li'];
li[0].remove[];

Điều này sẽ loại bỏ phần tử li đầu tiên

Bạn cũng có thể xóa tất cả các mục trong danh sách. Dưới đây là một ví dụ dưới đây

Phần kết luận

CSS cho phép chúng ta tạo kiểu trang, JavaScript cho phép chúng ta thay đổi hành vi của trang, trong khi DOM gắn kết mọi thứ lại với nhau bằng cách cấp cho chúng ta quyền truy cập vào các phần tử mà chúng ta muốn làm việc trên đó. Cảm ơn bạn đã đọc. Mã hóa vui vẻ

JavaScript có thao túng DOM không?

Đối tượng nào giúp tương tác với DOM?

Có thể thao tác DOM mà không cần JavaScript không?