Thuộc tính parentNode trong JavaScript

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

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

Thuộc tính parentNode trong JavaScript dùng để lấy thông tin về node (nút) cha của phần tử HTML con hoặc node 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 node cha, nút con ngoài các phần tử HTML còn có khoảng trắng, chú thích.

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

Lấy thông tin:

tenbien.parentNode.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.parentNode.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 parentNode trong JavaScript

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

Lấy thông tin tên node (nút), các thuộc tính của node (nút) cha:

<div id="divid" style="width:100%;float:left;height:auto">
<p id="pid">Lấy thông tin node (nút) cha</p>
</div>
<p>Tên node (nút) cha: <span id="tennode"></span></p>
<p>Giá trị id node (nút) cha: <span id="idnode"></span></p>
<p>Giá trị style node (nút) cha: <span id="stylenode"></span></p>
<script>
// Lấy tên node (nút) cha
var ten = document.getElementById("pid").parentNode.nodeName;
document.getElementById("tennode").innerHTML = ten;
// Lấy giá trị id node (nút) cha
var giatriid = document.getElementById("pid").parentNode.getAttribute("id");
document.getElementById("idnode").innerHTML = giatriid;
// Lấy giá trị style node (nút) cha
var giatristyle = document.getElementById("pid").parentNode.getAttribute("style");
document.getElementById("stylenode").innerHTML = giatristyle;
</script>

Kết quả:

Lấy thông tin node (nút) cha

Tên node (nút) cha: DIV

Giá trị id node (nút) cha: divid

Giá trị style node (nút) cha: width:100%;float:left;height:auto

Chạy Thử

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

Tạo các thuộc tính và gắn giá trị cho node (nút) cha:

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

Chạy Thử

parentNode khác gì parentElement trong JavaScript?

Khi cần truy cập phần tử cha của một node, parentNode và parentElement thường cho kết quả giống nhau trong các thao tác với HTML. Tuy nhiên, hai thuộc tính này không hoàn toàn tương đương vì chúng có phạm vi trả về khác nhau.

parentNode và parentElement khác nhau ở điểm nào?

parentNode trả về node cha trực tiếp của đối tượng hiện tại. Node cha có thể là một phần tử HTML, nhưng cũng có thể là Document hoặc một loại node khác.

Trong khi đó, parentElement chỉ trả về phần tử HTML cha. Nếu node hiện tại không có phần tử HTML làm cha, kết quả có thể là null.

Thuộc tính	Giá trị trả về
parentNode	Node cha trực tiếp, không nhất thiết phải là phần tử HTML
parentElement	Phần tử HTML cha trực tiếp hoặc null

Với một phần tử nằm bên trong div, cả hai thường cùng trỏ đến phần tử div đó. Điểm khác biệt chỉ trở nên đáng chú ý khi làm việc với cấu trúc DOM có những node không phải phần tử HTML.

Khi nào nên dùng parentNode?

Dùng parentNode khi bạn cần thao tác ở cấp DOM và muốn lấy chính xác node cha trực tiếp, bất kể node đó có phải phần tử HTML hay không.

Thuộc tính này phù hợp khi xử lý nhiều loại node trong DOM, chẳng hạn phần tử, node văn bản hoặc cấu trúc tài liệu. Nó cũng hữu ích khi thao tác DOM không chỉ giới hạn trong các phần tử HTML.

Khi nào nên dùng parentElement?

Nếu mục tiêu của bạn là tìm phần tử HTML cha để tiếp tục đọc thuộc tính, thay đổi nội dung hoặc thao tác giao diện, parentElement thường dễ hiểu hơn.

Ví dụ, khi xử lý một nút bấm nằm trong một div, bạn có thể lấy phần tử bao quanh nó rồi thay đổi nội dung hoặc thuộc tính của phần tử đó mà không cần quan tâm đến các loại node DOM khác.

Ví dụ thực tế với phần tử HTML

Giả sử một nút bấm nằm bên trong một div. Khi người dùng nhấn nút, có thể sử dụng cả hai thuộc tính để truy cập phần tử cha:

<div id="box">
    <button id="btn">Chọn phần tử cha</button>
</div>

<script>
const button = document.getElementById("btn");

console.log(button.parentNode);
console.log(button.parentElement);
</script>

Trong trường hợp này, cả parentNode và parentElement đều tham chiếu đến phần tử div có id="box". Vì đang làm việc trực tiếp với cấu trúc HTML, parentElement thường là lựa chọn rõ ràng nếu bạn chỉ cần phần tử cha.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính parentNode 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 parentNode 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