GetElementsByName trong JavaScript
HTML has too quen thuộc với lập trình viên, vậy nó được hiểu như thế nào? . Chúng ta nhìn vào một tệp HTML thì nhìn thấy văn bản, còn trình duyệt nhìn vào sẽ thấy cây DOM Show
DOM là gì?Thêm một khái niệm nữa, chúng ta thường nghe đến DOM và làm việc với chúng, vậy chúng được hiểu như thế nào? Chúng ta có thể thấy tất cả các thẻ HTML sẽ được quản lý trong tài liệu đối tượng (DOM), thẻ cao nhất là thẻ html, tiếp đến là phân nhánh body và head. Bên trong đầu thì có các thẻ như phong cách, tiêu đề,. và bên trong phần nội dung chứa bất kỳ thẻ nào đó là thành phần của HTML. Như vậy ta có thể hiểu Javascript để thao tác với các thẻ HTML ta phải thông qua đối tượng tài liệu (DOM) Với DOM, JavaScript là tất cả sức mạnh cần thiết để tạo ra HTML động
Document Object Model - DOM ("Mô hình đối tượng tài liệu"), là một giao diện lập trình ứng dụng (API). DOM được sử dụng để truy xuất tài liệu ở định dạng HTML và XML, có dạng dữ liệu cấu trúc cây và thông thường mô hình DOM độc lập với hệ điều hành và dựa trên kỹ thuật lập trình hướng đối tượng để mô tả tài liệu Thời kỳ khai thác các thành phần trong một tài liệu HTML mô tả bằng các phiên bản khác nhau của DOM được hiển thị bởi các chương trình duyệt web thông qua JavaScript do không có một hệ thống chuẩn nhất nào. Điều kiện này buộc World Wide Web Consortium (W3C) phải đưa ra một loạt các mô tả kỹ thuật về tiêu chuẩn cho DOM để hệ thống mô hình này tốt nhất
kết quả của ví dụ trên như sau HTML DOM là gì?HTML DOM là một đối tượng mô hình chuẩn và giao diện lập trình cho HTML. it'sdefault
HTML DOM là một tiêu chuẩn cho phép bạn thực hiện các công việc thao tác với một trang web bất kỳ. nhận, thay đổi, thêm hoặc xóa các thành phần của HTML Thuộc tính DOM
Các ví dụ sau
Kết quả sẽ như sau Nói lại bản ghi, Tài sảnThuộc tính cung cấp thêm thông tin về các thành phần trong HTML, các phần tử DOM được ánh xạ vào các đối tượng Javascript khi chúng ta sử dụng Javascript để thao tác với DOM
Phần tử 0 đầu tiên của tài liệu được ánh xạ thành đối tượng Javascript được trỏ bởi biến 1, ( 2 trả về một cấu trúc dữ liệu tương tự 1 mảng các Node được gọi là NodeList, tức là có thuộc tính độ dài và truy xuất . Phần tử DOM được ánh xạ thành đối tượng có thuộc tính và phương thức trong Javascript. Thuộc tính của đối tượng Javascript, được gọi là thuộc tính. Chung quy lại thì3 thuộc tính của các phần tử DOM còn **Một vài chú ý nhỏ
Nói một cách khái niệm, nếu giá trị trong đầu vào được định nghĩa là 'nhập để tìm kiếm', thì tương ứng tương ứng cũng như vậy. Sau khi người dùng nhập dữ liệu, 'abc' không có giới hạn, thì thuộc tính sẽ được thiết lập thành 'abc', tuy nhiên, thuộc tính vẫn không thay đổi
Mặc dù nghĩa dịch sang tiếng việt giống nhau nhưng 6 thuộc về 2 thế giới hoàn toàn khác nhau. Cần phải xác định danh tính để tránh các lỗi hiểu lầm không cần thiếtCây cấu trúc trong DOMHạtĐối với HTML DOM, cấu trúc dạng cây gọi là DOM Tree có nghĩa là mọi thành phần đều được xem là 1 nút (node), được biểu diễn trên 1 cây. Các phần tử khác nhau sẽ được phân loại các nút khác nhau nhưng quan trọng nhất là 3 loại. nút gốc (nút tài liệu), nút phần tử (nút phần tử), nút văn bản (nút văn bản)
Quan hệ giữa các nút
Thuộc tính và phương thức thường gặpCác khái niệm này khá quen thuộc, các bạn có thể tìm trong W3Schools Truy xuất DOMTruy xuất gián tiếpMỗi nút trên cây DOM đều có 6 thuộc tính quan hệ giúp bạn truy xuất gián tiếp theo vị trí của nút
Truy xuất trực tiếpTruy xuất trực tiếp sẽ nhanh hơn và đơn giản hơn khi bạn không cần phải biết nhiều về quan hệ và vị trí của nút. Có 3 phương thức để bạn truy xuất trực tiếp được hỗ trợ ở mọi trình duyệt
Trình duyệt hiện đại sau này (Chrome) có hỗ trợ thêm các phương thức truy xuất mạnh mẽ và linh hoạt hơn nhiều, thậm chí còn hỗ trợ truy xuất theo vùng chọn CSS phức tạp như vùng chọn jQuery (một thư viện Javascript mạnh và
Kết luậnChung quy lại chúng ta đã cùng nhau tìm hiểu các khái niệm cơ bản về DOM và cách thao tác với nó. Đó chỉ là những kiến thức hết sức cơ bản, tuy nhiên bạn cũng có thể thấy DOM quan trọng như thế nào Làm cách nào để nhận giá trị bằng cách sử dụng getElementsByName trong JavaScript?Ví dụ JavaScript getElementsByName()
. Đầu tiên, chọn nút gửi theo id btnRate của nó bằng phương thức getElementById(). Thứ hai, lắng nghe sự kiện nhấp chuột của nút gửi. Thứ ba, lấy tất cả các nút radio bằng getElementsByName() và hiển thị giá trị đã chọn trong phần tử đầu ra.
getElementsByName trong JavaScript là gì?Phương thức getElementsByName() của đối tượng Tài liệu trả về Tập hợp NodeList gồm các phần tử có thuộc tính tên đã cho trong tài liệu .
Làm cách nào để lấy giá trị của phần tử theo tên trong JavaScript?Lấy (các) phần tử theo tên bằng cách sử dụng getElementsByName()
. Không giống như các phương thức getElementsBy* khác, phương thức getElementsByName() trả về NodeList trực tiếp. NodeList có thể được lặp lại bằng phương thức forEach() tích hợp. |