Các phương pháp khác nhau để tìm các phần tử html trong dom là gì?
Mô hình đối tượng tài liệu (DOM) là biểu diễn dữ liệu của các đối tượng bao gồm cấu trúc và nội dung của tài liệu trên web. Hướng dẫn này sẽ giới thiệu về DOM, xem cách DOM thể hiện tài liệu HTML trong bộ nhớ và cách sử dụng API để tạo nội dung và ứng dụng web Show
DOM là gì?Mô hình đối tượng tài liệu (DOM) là một giao diện lập trình cho các tài liệu web. Nó đại diện cho trang để các chương trình có thể thay đổi cấu trúc, kiểu và nội dung tài liệu. DOM đại diện cho tài liệu dưới dạng các nút và đối tượng; Trang web là một tài liệu có thể được hiển thị trong cửa sổ trình duyệt hoặc dưới dạng nguồn HTML. Trong cả hai trường hợp, đó là cùng một tài liệu nhưng biểu diễn Mô hình đối tượng tài liệu (DOM) cho phép nó được thao tác. Là một biểu diễn hướng đối tượng của trang web, nó có thể được sửa đổi bằng ngôn ngữ kịch bản như JavaScript Ví dụ: DOM chỉ định rằng phương thức 1 trong đoạn mã này phải trả về danh sách tất cả các phần tử 2 trong tài liệu
Tất cả các thuộc tính, phương thức và sự kiện có sẵn để thao tác và tạo các trang web được tổ chức thành các đối tượng. Ví dụ: đối tượng 3 đại diện cho chính tài liệu, bất kỳ đối tượng 4 nào triển khai giao diện DOM 5 để truy cập các bảng HTML, v.v., đều là đối tượngDOM được xây dựng bằng nhiều API hoạt động cùng nhau. DOM lõi xác định các thực thể mô tả bất kỳ tài liệu nào và các đối tượng bên trong nó. Điều này được mở rộng khi cần bởi các API khác bổ sung các tính năng và khả năng mới cho DOM. Ví dụ: HTML DOM API thêm hỗ trợ để biểu diễn các tài liệu HTML cho DOM lõi và API SVG thêm hỗ trợ để biểu diễn các tài liệu SVG DOM và JavaScriptVí dụ ngắn trước, giống như hầu hết các ví dụ, là JavaScript. Điều đó có nghĩa là, nó được viết bằng JavaScript, nhưng sử dụng DOM để truy cập tài liệu và các phần tử của nó. DOM không phải là ngôn ngữ lập trình, nhưng nếu không có nó, ngôn ngữ JavaScript sẽ không có bất kỳ mô hình hay khái niệm nào về trang web, tài liệu HTML, tài liệu SVG và các bộ phận cấu thành của chúng. Toàn bộ tài liệu, phần đầu, bảng trong tài liệu, tiêu đề bảng, văn bản trong các ô của bảng và tất cả các thành phần khác trong tài liệu là các phần của mô hình đối tượng tài liệu cho tài liệu đó. Tất cả chúng đều có thể được truy cập và thao tác bằng DOM và ngôn ngữ kịch bản như JavaScript DOM không phải là một phần của ngôn ngữ JavaScript mà thay vào đó là một API Web được sử dụng để xây dựng trang web. JavaScript cũng có thể được sử dụng trong các ngữ cảnh khác. Ví dụ, nút. js chạy các chương trình JavaScript trên máy tính, nhưng cung cấp một bộ API khác và API DOM không phải là phần cốt lõi của Nút. thời gian chạy js DOM được thiết kế độc lập với bất kỳ ngôn ngữ lập trình cụ thể nào, làm cho cấu trúc biểu diễn của tài liệu có sẵn từ một API duy nhất, nhất quán. Ngay cả khi hầu hết các nhà phát triển web sẽ chỉ sử dụng DOM thông qua JavaScript, thì việc triển khai DOM có thể được xây dựng cho bất kỳ ngôn ngữ nào, như ví dụ Python này minh họa
Để biết thêm thông tin về những công nghệ nào liên quan đến việc viết JavaScript trên web, hãy xem Tổng quan về công nghệ JavaScript Truy cập DOMBạn không cần phải làm gì đặc biệt để bắt đầu sử dụng DOM. Bạn sử dụng API trực tiếp trong JavaScript từ bên trong cái được gọi là tập lệnh, một chương trình do trình duyệt chạy Khi bạn tạo tập lệnh, cho dù là nội tuyến trong phần tử 6 hay được bao gồm trong trang web, bạn có thể ngay lập tức bắt đầu sử dụng API cho đối tượng 3 hoặc 8 để thao tác với chính tài liệu hoặc bất kỳ phần tử nào trong trang web (phần . Lập trình DOM của bạn có thể đơn giản như ví dụ sau, hiển thị thông báo trên bảng điều khiển bằng cách sử dụng hàm 9 1Vì thông thường không nên kết hợp cấu trúc của trang (được viết bằng HTML) và thao tác của DOM (được viết bằng JavaScript), các phần JavaScript sẽ được nhóm lại với nhau tại đây và tách biệt khỏi HTML Ví dụ: hàm sau tạo một phần tử 10 mới, thêm văn bản vào phần tử đó, sau đó thêm nó vào cây cho tài liệu 3Các kiểu dữ liệu cơ bảnTrang này cố gắng mô tả các đối tượng và loại khác nhau bằng thuật ngữ đơn giản. Nhưng có một số loại dữ liệu khác nhau được chuyển xung quanh API mà bạn nên biết Ghi chú. Bởi vì phần lớn mã sử dụng DOM xoay quanh việc thao tác với các tài liệu HTML, nên người ta thường coi các nút trong DOM là các phần tử, mặc dù nói đúng ra thì không phải mọi nút đều là một phần tử. Bảng dưới đây mô tả ngắn gọn các kiểu dữ liệu này Kiểu dữ liệu (Giao diện)Mô tả 11Khi một thành viên trả về một đối tượng kiểu 3 (e. g. , thuộc tính 13 của một phần tử trả về 3 mà nó thuộc về), đối tượng này chính là đối tượng gốc của 3. DOM 3 Tham khảo chương mô tả đối tượng 3. 18Mọi đối tượng nằm trong tài liệu là một loại nút nào đó. Trong tài liệu HTML, một đối tượng có thể là nút phần tử nhưng cũng có thể là nút văn bản hoặc nút thuộc tính. 19Loại 30 dựa trên 31. Nó đề cập đến một phần tử hoặc một nút loại 30 được trả về bởi một thành viên của API DOM. Ví dụ, thay vì nói rằng phương thức 33 trả về một tham chiếu đối tượng cho một 31, chúng ta chỉ nói rằng phương thức này trả về 30 vừa được tạo trong DOM. Các đối tượng 30 triển khai giao diện DOM 19 và cả giao diện 18 cơ bản hơn, cả hai đều được bao gồm cùng nhau trong tài liệu tham khảo này. Trong tài liệu HTML, các phần tử được tăng cường hơn nữa bởi giao diện 39 của HTML DOM API cũng như các giao diện khác mô tả khả năng của các loại phần tử cụ thể (ví dụ: 5 cho các phần tử 41). 42A 43 là một mảng các phần tử, giống như loại được trả về bởi phương thức 44. Các mục trong 43 được truy cập theo chỉ mục theo một trong hai cách
46 là phương thức duy nhất trên đối tượng 43. Cái sau sử dụng cú pháp mảng điển hình để tìm nạp mục thứ hai trong danh sách. 48Khi một thành viên trả lại một 49 (e. g. , theo phương thức 30), nó là một tham chiếu đối tượng hiển thị một giao diện đặc biệt (mặc dù nhỏ) cho các thuộc tính. Các thuộc tính là các nút trong DOM giống như các phần tử, mặc dù bạn có thể hiếm khi sử dụng chúng như vậy. 31A 32 giống như một mảng, nhưng các mục được truy cập theo tên hoặc chỉ mục, mặc dù trường hợp sau này chỉ đơn thuần là để thuận tiện cho việc liệt kê, vì chúng không theo thứ tự cụ thể nào trong danh sách. 32 có phương pháp 46 cho mục đích này và bạn cũng có thể thêm và xóa các mục khỏi 32Ngoài ra còn có một số cân nhắc về thuật ngữ phổ biến cần ghi nhớ. Chẳng hạn, người ta thường gọi bất kỳ nút 48 nào là một 49 và gọi một mảng các nút DOM là một 43. Bạn sẽ thấy các thuật ngữ này và các thuật ngữ khác được giới thiệu và sử dụng xuyên suốt tài liệugiao diện DOMHướng dẫn này nói về các đối tượng và những thứ thực tế mà bạn có thể sử dụng để thao tác hệ thống phân cấp DOM. Có nhiều điểm khiến việc hiểu cách thức hoạt động của những công việc này có thể gây nhầm lẫn. Ví dụ: đối tượng đại diện cho phần tử HTML 39 nhận thuộc tính 30 của nó từ giao diện 31 nhưng thuộc tính 32 của nó từ giao diện 39. Trong cả hai trường hợp, thuộc tính bạn muốn nằm trong đối tượng biểu mẫu đóNhưng mối quan hệ giữa các đối tượng và giao diện mà chúng triển khai trong DOM có thể gây nhầm lẫn, vì vậy phần này cố gắng nói một chút về các giao diện thực tế trong đặc tả DOM và cách chúng được cung cấp. Giao diện và đối tượngNhiều đối tượng thực hiện một số giao diện khác nhau. Ví dụ, đối tượng bảng thực hiện một giao diện 5 chuyên biệt, bao gồm các phương thức như 35 và 36. Nhưng vì nó cũng là một phần tử HTML, nên 4 triển khai giao diện 19 được mô tả trong chương Tham khảo DOM 19. Và cuối cùng, vì một phần tử HTML, đối với DOM, cũng là một nút trong cây các nút tạo nên mô hình đối tượng cho một trang HTML hoặc XML, đối tượng bảng cũng thực hiện giao diện 18 cơ bản hơn, từ Khi bạn nhận được một tham chiếu đến một đối tượng 4, như trong ví dụ sau, bạn thường xuyên sử dụng cả ba giao diện này thay thế cho nhau trên đối tượng, có lẽ bạn không biết điều đó 4Giao diện cốt lõi trong DOMPhần này liệt kê một số giao diện được sử dụng phổ biến nhất trong DOM. Ý tưởng ở đây không phải là mô tả chức năng của các API này mà là cung cấp cho bạn ý tưởng về các loại phương thức và thuộc tính mà bạn sẽ thấy rất thường xuyên khi sử dụng DOM. Các API phổ biến này được sử dụng trong các ví dụ dài hơn trong chương Ví dụ về DOM ở cuối cuốn sách này Các đối tượng 3 và 8 là các đối tượng có giao diện mà bạn thường sử dụng nhiều nhất trong lập trình DOM. Nói một cách đơn giản, đối tượng 8 đại diện cho một thứ giống như trình duyệt và đối tượng 3 là gốc của chính tài liệu đó. 19 kế thừa từ giao diện chung 18 và hai giao diện này cùng nhau cung cấp nhiều phương thức và thuộc tính mà bạn sử dụng trên các phần tử riêng lẻ. Các phần tử này cũng có thể có các giao diện cụ thể để xử lý loại dữ liệu mà các phần tử đó lưu giữ, như trong ví dụ về đối tượng 4 ở phần trướcSau đây là danh sách ngắn gọn về các API phổ biến trong tập lệnh trang web và XML bằng DOM
ví dụĐặt nội dung văn bảnVí dụ này sử dụng một phần tử 42 chứa một phần tử 42 và hai phần tử 44. Khi người dùng nhấp vào nút đầu tiên, chúng tôi tạo một phần tử mới và thêm phần tử đó làm phần tử con của 42. Khi người dùng nhấp vào nút thứ hai, chúng tôi sẽ xóa phần tử con. Chúng tôi sử dụng
Các cách khác nhau để lấy một phần tử từ DOM là gì?Từ DOM, người dùng có thể truy cập các phần tử HTML theo năm cách khác nhau trong JavaScript. . Nhận phần tử HTML theo Id Nhận phần tử HTML theo className Nhận phần tử HTML theo Tên Nhận phần tử HTML theo tagName Nhận phần tử HTML bằng CSS Selector 4 phương pháp khác nhau mà tôi có thể sử dụng trong JavaScript để nhắm mục tiêu các phần tử trong DOM là gì?Danh sách 10 phương pháp DOM JavaScript cần thiết hàng đầu . 1) getElementId. getElementId là một phương thức để truy cập hầu như bất kỳ phần tử nào. . 2) getElementsByTagName. Trong phương pháp trước, chúng tôi có thể có một số lỗi. . 3) Nút. . 4) tạo phần tử. . 5) appendChild. . 6) loại bỏTrẻ em. . 7) nhận thuộc tính. . 8) setAttribute |