previousSibling trong JavaScript và cách lấy Node anh em liền kề phía trước | Laptrinhcanban.com

previousSibling trong JavaScript và cách lấy Node anh em liền kề phía trước

Hướng dẫn cách sử dụng previousSibling trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính previousSibling để lấy Node anh em liền kề phía trước 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 trước Node chỉ định mà Node đó phải là một Element, hãy dùng tới thuộc tính previousElementSibling để thay thế.

previousSibling trong JavaScript là gì

previousSibling 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) liền kề phía trước một Node chỉ định. Thuộc tính này đối lập với thuộc tính nextSibling vốn dùng để lấy Node anh em đứng kế tiếp 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 previousSibling trong JavaScript như sau:

node.previousSibling

Thuộc tính previousSibling có tác dụng tham chiếu đến Node anh em liền kề phía trước, và một Node Object chứa Node anh em 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 trước 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 trước của Node có id bằng main và xử lý Node Object được trả về như sau:

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

Mã mẫu

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

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng previousSibling</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 trước</button>

<script>
function getElements(){
let element = document.getElementById('shopname');
let previousSibling = element.previousSibling;
console.log(previousSibling.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 trước Node có id bằng shopname sẽ được in ra như sau:
previousSibling trong JavaScript

Ở 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:

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

Do vậy, Node đằng trước với Node có id bằng shopname không phải là Node có id bằng place, 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 previousSibling trong JavaScript để lấy Node anh em liền kề phía trước 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.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.