Đôi khi, người dùng cần thao tác với phần tử HTML mà không cần thay đổi mã của HTML. Trong trường hợp này, người dùng có thể sử dụng JavaScript để thay đổi các phần tử HTML mà không ghi đè lên chúng. Trước khi chúng tôi tiếp tục thay đổi phần tử HTML bằng JavaScript, người dùng nên tìm hiểu cách truy cập phần tử đó từ DOM (Mô hình đối tượng tài liệu). Ở đây, DOM là cấu trúc của trang web. Show
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
Ở bên dưới, người dùng có thể xem trình diễn các phương pháp trên với mã mẫu. Nhận phần tử HTML theo Id. Nói chung, hầu hết các nhà phát triển sử dụng id duy nhất trong toàn bộ tài liệu HTML. Người dùng phải thêm id vào phần tử HTML cụ thể trước khi truy cập phần tử HTML có id. Người dùng có thể sử dụng phương thức getElementById() để truy cập phần tử HTML bằng cách sử dụng id. Nếu bất kỳ phần tử nào không tồn tại với id được truyền vào phương thức getElementById, nó sẽ trả về giá trị null cú pháp document.getElementById(element_ID); Tham số. Nó lấy id của phần tử mà người dùng muốn truy cập Giá trị trả về. Nó trả về đối tượng với id cụ thể. Nếu không tìm thấy phần tử có id cụ thể, nó sẽ trả về giá trị NULL Thí dụ. Ví dụ này minh họa việc sử dụng phương thức getElementsById. Ngoài ra, nó in HTML bên trong của đối tượng được trả về vào bảng điều khiển của trình duyệt. Người dùng có thể mở bảng điều khiển vào trình duyệt web chrome bằng cách nhấn ctrl + shift + I HTMLdocument.getElementsByClassName(element_classnames);0 document.getElementsByClassName(element_classnames);1 document.getElementsByClassName(element_classnames);2 document.getElementsByClassName(element_classnames);3 document.getElementsByClassName(element_classnames);4 document.getElementsByClassName(element_classnames);1____11 document.getElementsByClassName(element_classnames);3 document.getElementsByClassName(element_classnames);3______31 document.getElementsByClassName(element_classnames);5 document.getElementsByClassName(element_classnames);6 document.getElementsByClassName(element_classnames);5 document.getElementsByClassName(element_classnames);3 document.getElementsByClassName(element_classnames);9 document.getElementsByClassName(element_classnames);1 document.getElementsByClassName(element_classnames);3 document.getElementsByClassName(element_classnames);4 document.getElementsByClassName(element_classnames);1____84____33 document.getElementsByClassName(element_classnames);4 document.getElementsByClassName(element_classnames);3____88 document.getElementsByClassName(element_classnames);3______31 document.getElementsByClassName(element_classnames);21 document.getElementsByClassName(element_classnames);03 document.getElementsByClassName(element_classnames);23 document.getElementsByClassName(element_classnames);543 document.getElementsByClassName(element_classnames);22 document.getElementsByClassName(element_classnames);23 document.getElementsByClassName(element_classnames);558 document.getElementsByClassName(element_classnames);15 document.getElementsByClassName(element_classnames);21 document.getElementsByClassName(element_classnames);3 Trong HTML, đôi khi người dùng cần truy cập các phần tử HTML để hiển thị cho người dùng những thay đổi khác nhau. Chúng tôi có thể hỗ trợ điều này bằng cách sử dụng JavaScript hiện đại. Để tạo điều kiện thuận lợi cho việc này, chúng ta có thể tiếp tục và thay đổi phần tử HTML bằng cách sử dụng các kỹ thuật sau –
Dưới đây chúng tôi đã thêm phần trình diễn cho các phương pháp trên Nhận phần tử HTML theo IdPhương thức này lấy phần tử từ một ID duy nhất và cho phép người dùng truy cập phần tử đó. Người dùng có thể sử dụng phương thức getElementById() để truy cập và cập nhật nội dung HTML. Nếu bất kỳ phần tử nào không tồn tại với Id đã cho, phương thức sẽ trả về null cú phápdocument.getElementById(element_ID); Tham số - Nó lấy id phần tử cho phần tử được truy cập Giá trị trả về - Nó trả về đối tượng có id cụ thể. Nếu phần tử có id cụ thể không tồn tại, null được trả về ví dụ 1#têntệp. mục lục. html document.getElementsByClassName(element_classnames);2 đầu ra Nhận phần tử HTML theo classNameĐiều này chọn phần tử từ tên lớp. Chúng ta có thể cung cấp tên lớp cho từng phần tử trong HTML và sau đó truy cập phần tử tương tự bằng cách sử dụng tên lớp đó. Trong phần này, chúng ta sẽ sử dụng phương thức getElementsByClassName() để lấy và cập nhật phần tử cú phápdocument.getElementsByClassName(element_classnames);3 Tham số - Nó nhận đầu vào cho tên lớp của phần tử cần được truy cập Giá trị trả về - Nó trả về tập hợp các đối tượng có tên lớp cụ thể. Người dùng có thể truy cập bộ sưu tập này bằng cách sử dụng các chỉ mục ví dụ 2#têntệp. mục lục. html document.getElementsByClassName(element_classnames);4 đầu raNhận phần tử HTML theo TênTrong JavaScript, chúng ta có thể truy cập các phần tử bằng cách sử dụng phương thức getElementsByName(). Nó giúp người dùng có được một phần tử với sự trợ giúp của một cái tên. Tên ở đây là tên thuộc tính của phần tử HTML cú pháp________số 8Tham số - Nó nhận đầu vào cho tên của phần tử mà người dùng muốn truy cập Giá trị trả về - Nó trả về tập hợp các phần tử có tên cụ thể ví dụ 3#têntệp. mục lục. html document.getElementsByClassName(element_classnames);6 đầu raNhận các phần tử HTML theo TagNameTrong JavaScript, chúng ta có thể sử dụng phương thức getElementsByTagName() để truy cập tất cả các phần tử có tên thẻ đã cho. Phương thức này giống như phương thức getElementsByName(). Ở đây, chúng tôi đang truy cập các phần tử bằng cách sử dụng tên thẻ thay vì sử dụng tên của phần tử cú phápdocument.getElementsByClassName(element_classnames);2 Tham số - Nó nhận đầu vào cho tên thẻ Giá trị trả về - Nó trả về tập hợp các phần tử bao gồm tên thẻ được truyền dưới dạng tham số Ví dụ 4#têntệp. mục lục. html document.getElementsByClassName(element_classnames);8 đầu raNhận các phần tử HTML bằng CSS SelectorChúng ta có thể chọn các phần tử HTML bằng cách sử dụng các bộ chọn CSS như Id lớp và Tên thẻ. Các phần tử HTML có thể được truy xuất bằng bộ chọn CSS theo hai cách. Phương thức querySelector() trả về phần tử đầu tiên khớp với bộ chọn CSS cụ thể. Phương thức querySelectorAll() trả về tất cả phần tử khớp với bộ chọn CSS cụ thể cú phápdocument.getElementsByClassName(element_classnames);5 Tham số - Là một tham số, nó chấp nhận các bộ chọn CSS khác nhau như lớp, tên thẻ và id Giá trị trả về − Phương thức querySelector() trả về đối tượng đầu tiên khớp với bộ chọn cCSS, trong khi phương thức querySelectorAll() trả về một tập hợp tất cả các đối tượng khớp với bộ chọn CSS Bạn có thể chạy JavaScript trong tệp HTML không?Các chương trình JavaScript có thể được chèn vào hầu hết mọi nơi trong tài liệu HTML bằng cách sử dụng thẻ . Bạn có thể chạy ví dụ bằng cách nhấp vào nút “Phát” ở góc trên cùng bên phải của hộp ở trên. Thẻ
Làm cách nào bạn có thể truy cập các phần tử HTML bằng JavaScript?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 Thẻ HTML cho JavaScript là gì?Thẻ HTML
Bài Viết Liên Quan
|
