Javascript: lấy phần tử cha của một node với parentElement

Để lấy node cha của 1 node đã được xác định với JS, ta sử dụng thuộc tính parentElement, parentElement trả về phần tử cha của phần tử được chỉ định.

Sự khác biệt giữa parentElement và parentNode, là parentElement trả về null nếu nút cha không phải là nút phần tử (bạn có thể xem ví dụ sự khác nhau ở bên dưới). Trong hầu hết các trường hợp, bạn sử dụng thuộc tính nào không quan trọng, tuy nhiên, parentElement có lẽ là phổ biến nhất.

Thuộc tính này là read-only.

Cú pháp

node.parentElement

Giá trị trả về:

Một đối tượng Element, đại diện cho nút cha của một nút hoặc null nếu nút không có cha.

Ví dụ:

Tìm phần tử cha của phần tử có id là menu_3

var x = document.getElementById("menu_3").parentElement;

Tạo nút đóng bảng thông báo bằng HTML và JavaScript

<style>
	.nut {
		float: right;
		font-size: 30px;
		font-weight: bold; cursor: pointer;
		border: 1px solid #999;
		padding:0 12px;
		border-radius: 5px
	}
	.bang {
		box-sizing: border-box;
		padding: 16px;
		width: 70%;
		border: 1px solid #999;
	}
</style>
<div class="bang">
	<span class="nut" onclick="this.parentNode.style.display = 'none';">x</span>
	<p>Nội dung thông báo</p>
</div>

So sánh giữa parentNode và parentElement

document.body.parentNode; // Returns the element
document.body.parentElement; // Returns the element

document.documentElement.parentNode; // Returns the Document node
document.documentElement.parentElement; // Returns null ( does not have a parent ELEMENT node)

Bài viết liên quan:

Web APIs: Đối tượng Node

Web APIs: Đối tượng Document