” cho đoạn văn, “
” cho tiêu đề cấp đầu tiên, v.v. Cách tiếp cận này là cần thiết khi người dùng cần truy cập một phần tử HTML bằng tên thẻ của nó trực tiếp thay vì tìm kiếm nhiều dòng mã.
Hướng dẫn này sẽ giải thích quy trình hoàn chỉnh để tìm nạp tên thẻ của phần tử HTML bằng JavaScript.
Làm cách nào để Tìm nạp Tên Thẻ của Phần tử HTML bằng JavaScript?
JavaScript cung cấp chế độ chỉ đọc “ tên thẻ ” thuộc tính hiển thị tên thẻ của phần tử HTML tương ứng. Nó trả về một giá trị chuỗi tức là tên thẻ của phần tử ở dạng HOA.
cú pháp
yếu tố. tên thẻ
Trong cú pháp trên, “ tên thẻ ” tương ứng với tên thẻ của phần tử cần được tìm nạp.
Bây giờ, hãy chuyển sang triển khai thực tế của nó để kiểm tra xem nó có thể được sử dụng như thế nào để tìm nạp tên thẻ của phần tử HTML tương ứng.
Ví dụ: Áp dụng Thuộc tính “tagName” để Tìm nạp Tên Thẻ của Phần tử HTML
Trong ví dụ này, tất cả các tên thẻ của phần tử được chỉ định trong mã HTML có thể được tìm nạp thông qua “ tên thẻ ' tài sản.
Mã HTML
Chúng ta hãy xem đoạn mã HTML sau:
< thân hình trong một cái nhấp chuột = 'elemName()' >< h2 > Tìm nạp tagName của phần tử HTML trong JavaScript < / h2 >
< P > Nhấp vào bất kỳ phần tử nào trong tài liệu này để lấy tên thẻ của nó. < / P >
< cái nút > Nhấp vào nó < / cái nút >
< P nhận dạng = 'thử nghiệm' >< / P >
Trong các dòng mã trên:
- Các ' ” thẻ được liên kết với một “ trong một cái nhấp chuột ” chuyển hướng sự kiện đến chức năng JavaScript “ elemName() ” sẽ được kích hoạt khi nhấp chuột.
- Các ' ” thẻ xác định tiêu đề phụ.
- Các ' ” thẻ tạo ra một tuyên bố đoạn văn.
- Các '
” thêm một nút có tên “Click It”. - Cuối cùng, “ ” thẻ định nghĩa một đoạn trống có id “ thử nghiệm ” để hiển thị tên thẻ phần tử HTML khi kích hoạt sự kiện “onclick”.
Mã JavaScript
Tiếp theo chuyển sang mã được cung cấp bên dưới:
< kịch bản >chức năng elemName ( ) {
hằng số yếu tố = sự kiện. mục tiêu ;
tài liệu. getElementById ( 'thử nghiệm' ) . bên trongHTML = 'Tên thẻ Phần tử HTML được nhấp là: ' + yếu tố. tên thẻ ;
}
kịch bản >
Trong khối mã này:
- Định nghĩa một chức năng có tên là “ elemName() ”.
- Trong định nghĩa của nó, hãy khai báo biến “ yếu tố ” kiểu dữ liệu “ hằng số ” mà sử dụng “ mục tiêu ” để trả về tên thành phần khi sự kiện liên quan của nó kích hoạt.
- Cuối cùng, áp dụng “ getElementById() ” để truy cập đoạn đã thêm bằng cách sử dụng id của nó.
- Nó sẽ hiển thị tên thẻ của phần tử HTML tương ứng bằng cách sử dụng “ tên thẻ ” khi sự kiện “onclick” kích hoạt.
- Như vậy khi nhấp vào bất kỳ thành phần nào trong mã HTML, tên thẻ tương ứng sẽ được truy xuất.
đầu ra
Đầu ra hiển thị tên thẻ phần tử tương ứng nơi sự kiện “onclick” kích hoạt tương ứng.
Phần kết luận
JavaScript cung cấp tích hợp sẵn “ tên thẻ ” để lấy tên thẻ phần tử HTML. Nó thường được sử dụng với các trình xử lý sự kiện JavaScript như “onclick”, “onmouseover”, “ondblclick”, v.v. Khi sự kiện được liên kết của phần tử HTML kích hoạt, nó sẽ trả về tên thẻ của nó bằng chữ HOA theo mặc định. Hướng dẫn này đã cung cấp một mô tả ngắn gọn về cách tìm nạp tên thẻ của một phần tử HTML bằng JavaScript.