Thuộc tính nodeValue trong JavaScript

• Bùi Tấn Lực
• 898
• 17/09/2025

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

Thuộc tính nodeValue trong JavaScript dùng để lấy chuỗi văn bản của nút văn bản đầu tiên của phần tử HTML và lấy giá trị của nút thuộc tính, đối với nút phần tử thì sẽ trả về null vì các nút phần tử không có một giá trị đơn lẻ.

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

let ketqua = nut.nodeValue;

nut: Đó là một nút, ví dụ nút văn bản hoặc nút thuộc tính,....

ketqua: kết quả sau khi lấy thông tin đưa vô biến.

Code Thuộc tính nodeValue trong JavaScript

Thuộc tính nodeValue nút văn bản trong JavaScript

Lấy chuỗi văn bản trong nút văn bản đầu tiên của một phần tử HTML:

<div id="divid">Văn bản trong thẻ DIV</div>
<p>Kết quả khi lấy chuỗi văn bản trong thẻ DIV: <span id="ketqua"></span></p>
<script>
// Lấy phần tử html có id divid
const divid = document.getElementById("divid");
// Lấy văn bản của nút văn bản đầu tiên, bạn có thể thay childNodes[0] thành firstChild
let chuoivanban = divid.childNodes[0].nodeValue;  
// Nhúng chuỗi văn bản
document.getElementById("ketqua").innerHTML = chuoivanban;
</script>

Kết quả:

Văn bản trong thẻ DIV
Kết quả khi lấy chuỗi văn bản trong thẻ DIV: Văn bản trong thẻ DIV

Chạy Thử

Thuộc tính nodeValue giá trị thuộc tính trong JavaScript

Lấy giá trị của nút thuộc tính:

<div id="divid" data-id="35">Văn bản trong thẻ DIV</div>
<p>Kết quả khi lấy giá trị của thuộc tính data-id: <span id="ketqua"></span></p>
<script>
// Lấy phần tử html có id divid
const divid = document.getElementById("divid");
// Lấy nút thuộc tính data-id
const thuoctinh = divid.getAttributeNode('data-id');
// Lấy giá trị của thuộc tính data-id
let giatri = thuoctinh.nodeValue;  
// Nhúng giá trị
document.getElementById("ketqua").innerHTML = giatri;
</script>

Kết quả:

Văn bản trong thẻ DIV
Kết quả khi lấy giá trị của thuộc tính data-id: 35

Chạy Thử

Ứng Dụng nodeValue Khi Làm Việc Với DOM

nodeValue hữu ích khi cần đọc hoặc thay đổi giá trị của một node cụ thể trong cây DOM. Thuộc tính này đặc biệt phù hợp với Text Node và Comment Node, giúp xử lý nội dung mà không cần thao tác trực tiếp với toàn bộ phần tử HTML.

Đọc nội dung Text Node bằng nodeValue

Khi một phần tử chứa văn bản, nội dung văn bản đó được biểu diễn bởi một Text Node. Lúc này, nodeValue có thể lấy trực tiếp phần chữ bên trong node.

const title = document.querySelector("h1");
const textNode = title.firstChild;

console.log(textNode.nodeValue);

Trong ví dụ trên, firstChild lấy node văn bản đầu tiên của tiêu đề, sau đó nodeValue trả về nội dung mà node đang chứa. Cách này hữu ích khi cần làm việc ở cấp độ node thay vì chỉ lấy nội dung của phần tử.

Lấy nội dung Comment Node bằng nodeValue

Comment Node cũng có giá trị riêng nên có thể đọc bằng nodeValue. Đây là một trường hợp thường bị bỏ qua khi mới tìm hiểu DOM.

const comment = document.createComment("Ghi chú của Web Mới");

console.log(comment.nodeValue);

Kết quả nhận được là nội dung nằm bên trong node bình luận. Cách tiếp cận này phù hợp khi chương trình cần kiểm tra hoặc xử lý các node không hiển thị trực tiếp trên giao diện.

Thay đổi giá trị node bằng nodeValue

nodeValue không chỉ dùng để đọc mà còn có thể gán giá trị mới. Với Text Node, việc thay đổi thuộc tính này sẽ làm nội dung văn bản trên trang được cập nhật theo.

const title = document.querySelector("h1");
const textNode = title.firstChild;

textNode.nodeValue = "Nội dung mới";

Cách làm này cho phép thay đổi trực tiếp giá trị của node mà không cần tạo thêm phần tử mới. Tuy nhiên, khi xử lý DOM trong thực tế, nên xác định đúng loại node trước khi gán để tránh thay đổi nhầm dữ liệu.

Lời kết

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