Thuộc tính parentElement trong JavaScript

• Bùi Tấn Lực
• 882
• 16/09/2025

Chức năng của Thuộc tính parentElement trong JavaScript

Thuộc tính parentElement trong JavaScript dùng để lấy thông tin về phần tử HTML cha của phần tử HTML con, ngoài ra còn có thể thực hiện tạo thuộc tính và giá trị của thuộc tính lên phần tử cha.

Cú pháp của Thuộc tính parentElement trong JavaScript

Lấy thông tin:

tenbien.parentElement.phuongthuc;

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

phuongthuc: Phương thức lấy thông tin của phần tử cha như getAttribute("id"), getAttribute("style"),......

Lấy thông tin:

tenbien.parentElement.phuongthuc;

tenbien: Tên biến là phần tử HTML thường dùng document.getElementById("giá trị id") để lấy.

phuongthuc: Phương thức tạo thông tin của phần tử cha như setAttribute("id", "divid"), style.background= "red",......

Code Thuộc tính parentElement trong JavaScript

Thuộc tính parentElement lấy thông tin trong JavaScript

Lấy thông tin tên thẻ, các thuộc tính của phần tử cha:

<div id="divid" style="width:100%;float:left;height:auto">
<p id="pid">Lấy thông tin phần tử cha</p>
</div>
<p>Tên thẻ cha: <span id="tenthe"></span></p>
<p>Giá trị id thẻ cha: <span id="idthe"></span></p>
<p>Giá trị style thẻ cha: <span id="stylethe"></span></p>
<script>
// Lấy tên thẻ cha
var ten = document.getElementById("pid").parentElement.nodeName;
document.getElementById("tenthe").innerHTML = ten;
// Lấy giá trị id thẻ cha
var giatriid = document.getElementById("pid").parentElement.getAttribute("id");
document.getElementById("idthe").innerHTML = giatriid;
// Lấy giá trị style thẻ cha
var giatristyle = document.getElementById("pid").parentElement.getAttribute("style");
document.getElementById("stylethe").innerHTML = giatristyle;
</script>

Kết quả:

Lấy thông tin phần tử cha

Tên thẻ cha: DIV

Giá trị id thẻ cha: divid

Giá trị style thẻ cha: width:100%;float:left;height:auto

Chạy Thử

Thuộc tính parentElement tạo thuộc tính trong JavaScript

Tạo các thuộc tính và gắn giá trị cho phần tử cha:

<div>
<p id="pid">Tạo thuộc tính cho phần tử cha</p>
</div>
<p>Click vào nút TẠO THUỘC TÍNH để tạo thuộc tính cho phần tử cha</p>
<button onclick="taoThuocTinh()">TẠO THUỘC TÍNH</button>
<script>
function taoThuocTinh() {
   // Tạo thuộc tính cho thẻ cha với id có giá trị divid
   document.getElementById("pid").parentElement.setAttribute("id", "divid");
   // Tạo css cho thẻ cha
   document.getElementById("pid").parentElement.style.background= "red";
}
</script>

Chạy Thử

Những Lưu Ý Khi Sử Dụng parentElement Trong JavaScript

Khi làm việc với DOM, parentElement giúp truy cập nhanh phần tử HTML bao bọc trực tiếp một phần tử khác. Tuy nhiên, để sử dụng ổn định, cần hiểu rõ sự khác biệt với parentNode, trường hợp có thể nhận giá trị null và cách kiểm tra phần tử trước khi thao tác.

parentElement Khác Gì parentNode?

Cả parentElement và parentNode đều dùng để truy cập nút cha trực tiếp. Điểm khác biệt nằm ở kiểu nút mà chúng có thể trả về.

parentElement chỉ trả về phần tử DOM thuộc kiểu Element. Trong khi đó, parentNode có thể trả về nhiều loại Node khác nhau, chẳng hạn Document hoặc DocumentFragment.

Với các phần tử HTML thông thường, hai thuộc tính này thường cho kết quả giống nhau:

const button = document.querySelector("button");

console.log(button.parentElement);
console.log(button.parentNode);

Vì vậy, nếu mục đích là lấy phần tử HTML cha để tiếp tục xử lý DOM, parentElement thường là lựa chọn trực quan hơn.

Khi Nào parentElement Có Thể Trả Về null?

parentElement có thể trả về null khi nút hiện tại không có phần tử HTML cha. Trường hợp này dễ gặp khi phần tử đang nằm trực tiếp dưới Document hoặc khi DOM chưa tồn tại như đoạn mã đang kỳ vọng.

Do đó, không nên mặc định rằng kết quả luôn là một Element. Nếu gọi tiếp thuộc tính hoặc phương thức trên giá trị null, JavaScript có thể phát sinh lỗi.

const element = document.querySelector(".item");
const parent = element?.parentElement;

if (parent) {
    parent.classList.add("active");
}

Cách kiểm tra này đặc biệt hữu ích khi phần tử được tìm bằng querySelector() hoặc được tạo và chèn vào DOM ở những thời điểm khác nhau.

Cách Sử Dụng parentElement An Toàn Với DOM

Khi dùng parentElement, nên xác định trước phần tử cần xử lý và kiểm tra kết quả trước khi thay đổi nội dung, thuộc tính hoặc class của phần tử cha.

Nếu cần tìm một phần tử cha đáp ứng điều kiện cụ thể, không nên liên tục truy cập nhiều cấp bằng parentElement. Có thể kết hợp với closest() để tìm phần tử tổ tiên phù hợp, giúp mã nguồn dễ đọc và ít phụ thuộc vào cấu trúc DOM hiện tại.

const item = document.querySelector(".item");
const container = item?.closest(".container");

if (container) {
    container.classList.add("selected");
}

Cách viết này giúp mã JavaScript linh hoạt hơn khi cấu trúc HTML thay đổi. Quan trọng nhất là luôn kiểm tra khả năng phần tử không tồn tại trước khi thực hiện các thao tác tiếp theo.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính parentElement trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính parentElement trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp