Bài đăng này giải thích thuộc tính 'previousElementSibling' của phần tử DOM HTML bằng cách sử dụng JavaScript.
Thuộc tính HTML DOM Element “previousElementSibling” là gì?
Phần tử DOM (Mô hình đối tượng tài liệu) “ trướcYếu tốAnh chị em ” là thuộc tính chỉ đọc giúp truy xuất phần tử anh chị em trước đó của một phần tử trong cùng một cây. Thuộc tính này trả về nội dung của thuộc tính anh chị em trước đó.
cú pháp
yếu tố. trướcYếu tốAnh chị em
Cú pháp này trả về “ sợi dây ” chứa nội dung HTML của anh chị em trước đó và “ vô giá trị ” nếu nó không tồn tại.
Thực tế, hãy sử dụng cú pháp được xác định ở trên để hiển thị hoạt động của thuộc tính “previousElementSibling”.
Ví dụ: Áp dụng thuộc tính “previousElementSibling” để trả về nội dung của anh chị em trước đó
Ví dụ này áp dụng thuộc tính JavaScript “previousElementSibling” để lấy nội dung HTML của anh chị em trước đó.
Mã HTML
Đầu tiên, tổng quan về mã HTML sau:
< u >< cái đó nhận dạng = 'Đầu tiên' > HTML < / cái đó >
< cái đó nhận dạng = 'thứ hai' > CSS < / cái đó >
< cái đó nhận dạng = 'ngày thứ ba' > JavaScript < / cái đó >
< / u >
< P nhận dạng = 'vì' >< / P >
Trong các dòng mã trên:
- Các '
- Bên trong danh sách không có thứ tự, nhiều mục được nhúng bằng cách sử dụng “ <đó> ” gắn thẻ với id được chỉ định của họ.
- Cuối cùng, “ ” thẻ nhúng một đoạn văn trống với một id duy nhất “para”.
Mã JavaScript
Bây giờ, hãy tiếp tục với mã JavaScript:
< kịch bản >để mục = tài liệu. getElementById ( 'ngày thứ ba' ) . trướcYếu tốAnh chị em . bên trongHTML ;
tài liệu. getElementById ( 'vì' ) . bên trongHTML = ' Anh chị em trước đó của mục thứ ba là : ' + mục ;
kịch bản >
Theo đoạn mã trên:
- Biến 'item' trước tiên sử dụng ' getElementById() ” để truy cập vào mục danh sách được nhắm mục tiêu bằng cách sử dụng id “thứ ba” của nó và sau đó áp dụng “ trướcYếu tốAnh chị em ” tài sản để có được anh chị em trước đó của nó.
- Sau đó, “ getElementById() ” phương thức truy cập vào đoạn trống đã thêm bằng cách sử dụng id “para” của nó để nối nó với giá trị của biến “item”, tức là anh chị em trước đó.
đầu ra
Như đã thấy, kết quả hiển thị anh chị em trước đó của mục được nhắm mục tiêu, tức là (JavaScript).
Phần kết luận
JavaScript cung cấp phần tử DOM được xác định trước “ trướcYếu tốAnh chị em ” để lấy thuộc tính anh chị em trước đó của một phần tử. Nó trả về anh chị em trước đó của một phần tử từ cùng cấp độ cây nơi phần tử đích nằm. Bài đăng này đã giải thích sâu về thuộc tính “previousElementSibling” của phần tử DOM HTML trong JavaScript.