parentNode trong JavaScript và cách lấy Node cha | Laptrinhcanban.com

HOME › >>

parentNode trong JavaScript và cách lấy Node cha

Hướng dẫn cách sử dụng parentNode trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính parentNode để lấy các Node cha trực tiếp của một Node chỉ định sau bài học này.

  • Trong trường hợp muốn lấy Node cha của một Node chỉ định mà Node cha đó phải là một Element Node, hãy dùng tới thuộc tính parentElement để thay thế.

parentNode trong JavaScript là gì

parentNode trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy Node cha trực tiếp của một Node chỉ định. Thuộc tính này đối lập với thuộc tính childNodes vốn dùng để lấy các Node con trực tiếp của một 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 parentNode trong JavaScript như sau:

node.parentNode

Thuộc tính parentNode có tác dụng tham chiếu đến các Node cha trực tiếp của Node chỉ định, và Node Object chứa Node cha này sẽ được trả về. Trong trường hợp tìm Node cha của Document Node thì giá trị null sẽ được trả về, do Document Node đã là Node lớn nhất và không có Node cha.

Node Object là một tập hợp của các 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ý tập hợp Node, ví dụ như là thuộc tính length để tìm số phần tử, hay phương thức item để lấy element từ index của nó chẳng hạn.

Ví dụ cụ thể, chúng ta lấy Node cha trực tiếp của Node con có id bằng main và xử lý Node Object được trả về như sau:

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

Mã mẫu

Hãy cùng tìm hiểu cách lấy Node cha trực tiếp của một Node chỉ định bằng thuộc tính parentNode trong ví dụ sau:

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

<script>
function getElements(){
let element = document.getElementById('shopname');
let parent = element.parentNode;
console.log(parent.nodeName);

}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click nút, Node có id bằng shopname sẽ được chỉ định, và sau đó bằng cách sử dụng thuộc tính parentNode, chúng ta đã lấy được Node cha của nó (<div class="box">) và in ra tên Node như sau:
parentNode trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng parentNode trong JavaScript để lấy các Node con trực tiếp của một Node cha 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.

URL Link

https://laptrinhcanban.com/javascript/javascript-co-ban-den-nang-cao/dom-trong-javascript/parentnode-trong-javascript/

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.