Javascript tương tác với dom như thế nào?
DOM là viết tắt của mô hình đối tượng tài liệu và nó có thể được biểu diễn dưới dạng cây gồm các phần tử được tạo bởi trình duyệt. Thao tác DOM là sự tương tác của JavaScript DOM API để sửa đổi hoặc thay đổi tài liệu HTML. Với thao tác DOM, bạn có thể tạo, sửa đổi, tạo kiểu hoặc xóa các phần tử mà không cần làm mới. Nó cũng thúc đẩy sự tương tác của người dùng với các trình duyệt
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 Show Hãy bắt đầu với Thao tác DOM JavaScriptDOM 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ừ DOMBạ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à
Hãy làm điều này thú vị hơn bằng cách thử một số ví dụ
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 DOMCâ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ụ
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 DOMBạ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
Đ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 ________số 8_______Phần kết luậnCSS 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?DOM là viết tắt của Mô hình đối tượng tài liệu. Có thể hiểu đơn giản nó là một cây gồm các nút do trình duyệt tạo ra. Mỗi nút này có các thuộc tính và phương thức riêng có thể được thao tác bằng JavaScript . Khả năng thao tác DOM là một trong những khả năng độc đáo và hữu ích nhất của JavaScript.
Đối tượng nào giúp tương tác với DOM?Cái điều khiển. Điều khiển từ xa đóng vai trò là cầu nối cho phép bạn tương tác với tivi của mình. Bạn làm cho TV hoạt động và năng động thông qua điều khiển từ xa. Và theo cách tương tự, JavaScript làm cho trang HTML hoạt động và năng động thông qua DOM
Có thể thao tác DOM mà không cần JavaScript không?Để thao tác với DOM bạn cần một ngôn ngữ kịch bản như JS, VB, v.v. . Nếu bạn đang hỏi về các ngôn ngữ kịch bản khác nhau thì JS không phải là ngôn ngữ duy nhất. |