Cách dùng nextSibling trong javascript
Trong bài này chúng ta sẽ tìm hiểu thuộc tính nextSibling trong javascript, qua đó bạn sẽ biết cách lấy node kế tiếp node hiện tại trong javascript.
Nếu bạn sử dụng jQuery thì ít khi quan tâm đến nextSibling. Nhưng nếu bạn code javascript thuần thì đây là một thuộc tính khá hay và hữu ích.
1. nextSibling javascript là gì?
nextSibling là một thuộc tính của các node javascript, công dụng của nó là trả về node kế tiếp node hiện tại (node đang được chỉ định). Cú pháp của nó như sau:
nextNode = node.nextSibling
Trong đó node
chính là node được chỉ định, còn nextNode
chính là node kế tiếp được trả về từ thuộc tính nextSibling.
Bài viết này được đăng tại [free tuts .net]
2. Cách dùng nextSibling trong javascript
Trong cấu trúc DOM của javascript có nhiều loại node khác nhau, điển hình là:
- Node
#element
- chính là các thẻ html - Node
#text
- chính là các dòng xuống hàng - Node
#comment
- là các dòng comment trong html
Khi bạn enter xuống hàng thì nó sẽ tạo ra một node #text
. Xem ví dụ dưới đây:
<span id="value1">Value 1</span> <span id="value2">Value 2</span> <script> let node = document.getElementById('value1'); let nextNode = node.nextSibling; console.log(nextNode); // #text </script>
Nhưng khi bạn để chúng cùng một hàng thì nó lại là node span value2
.
<span id="value1">Value 1</span><span id="value2">Value 2</span> <script> let node = document.getElementById('value1'); let nextNode = node.nextSibling; console.log(nextNode); // span id value2 </script>
Trên là cách dùng thuộc tính nextSibling trong javascript.