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

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 parentElementparentNode, 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ó idmenu_3

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

Tạo nút đóng bảng thông báo bằng HTMLJavaScript

<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 parentNodeparentElement

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

Các tính năng mặc định của trang web

Các trang web được Đại Phố thiết kế luôn mặc định các tính năng sau:

  • Mã nguồn được tối ưu với các công cụ tìm kiếm.
  • Trang web hỗ trợ thiết bị di động, tương thích với mọi thiết bị: điện thoại, máy tính bảng, máy tính và laptop. Sử dụng công nghệ HTML5, CSS3 Mobile Responsive.
  • Dễ dàng thay đổi theo phong cách riêng của bạn.
  • Dễ dàng thêm bớt số lượng các trang, và chỉnh sửa nội hiển thị trên website tùy ý
  • Phần quản trị rõ ràng, trực quan, dễ sử dụng với cả những người không chuyên về IT.

Quản lí nội dung: có thể dễ dàng thêm, xóa, sửa các thông tin trên website

  • Thông tin sản phẩm và dịch vụ của công ty
  • Thông tin dự án, đối tác Giới thiệu – Liên hệ
  • Thông tin giới thiệu, thông tin liên hệ
  • Tin tức
  • Hình ảnh trên website, sửa các tag alt, descriotion, caption
  • Hình ảnh và caption trên Slideshow
Xin vui lòng liên hệ với chúng tôi nếu cần thêm thông tin
thương mại điện tử,