Nhận phần tử JavaScript

Đô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.  

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

Ở 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

HTML

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByClassName[element_classnames];

document.getElementsByTagName[Tag_name];

document.getElementsByClassName[element_classnames];

document.getElementsByTagName[Tag_name];

document.querySelector[selectors];
document.querySelectorAll[selectors];

document.getElementsByTagName[Tag_name];

document.getElementsByTagName[Tag_name];

document.querySelector[selectors];
document.querySelectorAll[selectors];

document.getElementsByClassName[element_classnames];

document.getElementsByTagName[Tag_name];

Để lấy giá trị của phần tử, hãy sử dụng thuộc tính “giá trị” với phương thức “getelementById[]” để lấy tham chiếu của phần tử bằng cách sử dụng “id” được chỉ định của nó

Đầu tiên, tạo một biểu mẫu trong tệp HTML, với trường nhập và nút sẽ hiển thị giá trị đã nhập trong trường văn bản trong sự kiện “nhấp chuột”