HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

nextSibling trong JavaScript và cách lấy Node anh em liền kề phía sau

20 tháng 6 ,2022

Hướng dẫn cách sử dụng nextSibling trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính nextSibling để lấy Node anh em liền kề phía sau Node chỉ định sau bài học này.

Trong trường hợp muốn lấy Node anh em liền kề phía sau Node chỉ định mà Node đó phải là một Element, hãy dùng tới thuộc tính nextElementSibling để thay thế.

nextSibling trong JavaScript là gì

nextSibling trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy Node anh em (có cùng Node cha) đứng kế tiếp một Node chỉ định. Thuộc tính này đối lập với thuộc tính previousSibling vốn dùng để lấy Node anh em đứng đằng trước của Node chỉ định.

Node chỉ định có thể được lấy thông qua các phương thức như getElementById hoặc querySelector mà chúng ta đã học trong các bài trước.

Cú pháp sử dụng thuộc tính nextSibling trong JavaScript như sau:

node.nextSibling

Thuộc tính nextSibling có tác dụng tham chiếu đến Node anh em liền kề phía sau, và một Node Object chứa Node con này sẽ được trả về. Trong trường hợp không tìm thấy Node anh em liền kề phía sau thì giá trị null sẽ được trả về.

Node Object là đối tượng để xử lý Node trong JavaScript. Trong Node Object được tích hợp nhiều thuộc tính cũng như phương thức có sẵn giúp chúng ta xử lý Node, ví dụ như là thuộc tính nodeName để lấy tên Node chẳng hạn.

Ví dụ cụ thể, chúng ta lấy Node anh em liền kề phía sau của Node có id bằng main và xử lý Node Object được trả về như sau:

let element = document.getElementById('main');
console.log(element.nextSibling.nodeName);

Mã mẫu

Hãy cùng tìm hiểu cách lấy Node anh em liền kề phía sau của một Node chỉ định bằng thuộc tính nextSibling trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nextSibling</title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div class="box">
  <p id = "place">Ninh Bình</p>
  <p id ="shopname">Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy Node anh em liền kề phía sau</button>

<script>
function getElements(){
    let element = document.getElementById('place');
    let nextSibling = element.nextSibling;
    console.log(nextSibling.nodeName);
}
</script>
</body>
</html>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì tên Node anh em liền kề phía sau Node có id bằng place sẽ được in ra như sau:

Ở ví dụ này, mặc dù chúng ta chỉ nhìn thấy trực quan chỉ có 2 node con với tagname là p trong Node cha có id="box", tuy nhiên do trong HTML sẽ đếm cả các Node trống nên thực tế sẽ có 5 Node được liệt kê trong kết quả ở trên, bao gồm:

Node trống #text
Node p của <p>Ninh Bình</p>
Node trống #text
Node p của <p>Shop mẹ và bé</p>
Node trống #text

Do vậy, Node kế tiếp với Node có id bằng place không phải là Node có id bằng shopname, mà là một Node trống #text như trên.

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng nextSibling trong JavaScript để lấy Node anh em liền kề phía sau của một Node chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.