HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

nodeValue trong JavaScript và cách lấy hoặc thiết lập giá trị của Node

21 tháng 6 ,2022

Hướng dẫn cách sử dụng nodeValue trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính nodeValue để lấy cũng như thiết lập giá trị của một Node chỉ định sau bài học này.

nodeValue trong JavaScript và cách lấy giá trị của Node

Cú pháp

nodeValue trong JavaScript là một thuộc tính của Node Object, có tác dụng tham chiếu tới giá trị của một Node chỉ định. Sau khi tham chiếu tới giá trị của Node bằng nodeValue, chúng ta có thể truy xuất giá trị, hoặc là thiết lập lại giá trị cho Node.

Cú pháp sử dụng thuộc tính nodeValue trong JavaScript để lấy giá trị của Node như sau:

node.nodeValue

Bảng nodeValue trong JavaScript

Thuộc tính nodeValue trả về kết quả là một DOMString đại diện của Node đó, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng nodeValue dưới đây:

Node Type	Node Value	Ý nghĩa
1 ELEMENT_NODE	null	Node phần tử
2 ATTRIBUTE_NODE	null	Node thuộc tính
3 TEXT_NODE	Nội dung của text	Node văn bản
4 CDATA_SECTION_NODE	Nội dung của CDATA SECTION	Node SECTION của CDATA
5 ENTITY_REFERENCE_NODE	null	Node tham chiếu thực thể
6 ENTITY_NODE	null	Node khai báo thực thể
7 PROCESSING_INSTRUCTION_NODE	Toàn bộ nội dung không bao gồm mục tiêu	Node hướng dẫn xử lý
8 COMMENT_NODE	Giá trị của comment	Node comment
9 DOCUMENT_NODE	null	Node tài liệu
10 DOCUMENT_TYPE_NODE	null	Node loại tài liệu
11 DOCUMENT_FRAGMENT_NODE	null	Node đoạn tài liệu
12 NOTATION_NODE	null	Node ký hiệu

Ví dụ, một Node thuộc kiểu TEXT_NODE sẽ trả về nội dung của text đó chẳng hạn.

Mã mẫu

Hãy cùng tìm hiểu cách lấy giá trị của Node chỉ định bằng thuộc tính nodeValue trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nodeValue </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
   <!-- Địa điểm -->
  <p>Ninh Bình</p>
  <p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy giá trị Node bằng nodeValue </button>

<script>
function getElements(){
    let elements = document.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        console.log(elements.item(i).firstChild.nodeValue);
    }
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì các Element có thuộc tính tagname bằng p sẽ được lấy thông qua phương thức getElementsByTagName. Sau đó bằng vòng lặp, chúng ta truy cập tới Node con đầu tiên thông qua thuộc tính firstChild (thuộc kiểu Node text), rồi tham chiếu và lấy giá trị của Node con này bằng thuộc tính nodeValue rồi xuất ra màn hình console như sau:

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

nodeValue trong JavaScript và cách thay đổi giá trị của Node

Cú pháp

Ngoài tác dụng lấy giá trị thì chúng ta cũng có thể sử dụng nodeValue trong JavaScript để thay đổi giá trị của Node chỉ định, với cú pháp như sau:

node.nodeValue = 'value'

Lưu ý, chúng ta chỉ có thể thay đổi giá trị của Node trong trường hợp giá trị tham chiếu của Node đó không phải là null mà thôi. Đó là một trong bốn kiểu Node sau đây:

Node Type	Node Value	Ý nghĩa
3 TEXT_NODE	Nội dung của text	Node văn bản
4 CDATA_SECTION_NODE	Nội dung của CDATA SECTION	Node SECTION của CDATA
7 PROCESSING_INSTRUCTION_NODE	Toàn bộ nội dung không bao gồm mục tiêu	Node hướng dẫn xử lý
8 COMMENT_NODE	Giá trị của comment	Node comment

Mã mẫu

Hãy cùng tìm hiểu cách thay đổi giá trị của Node chỉ định bằng thuộc tính nodeValue trong ví dụ sau:

<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng nodeValue </title>
</head>
<body>

<p>Kế hoạch mua sắm</p>
<div id="box">
   <!-- Địa điểm -->
  <p>Ninh Bình</p>
  <p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và thay đổi giá trị Node bằng nodeValue </button>

<script>
function getElements(){
    let elements = document.getElementsByTagName('p');
    let len = elements.length;
    for (let i = 0; i < len; i++){
        let value = elements.item(i).firstChild.nodeValue ;
        elements.item(i).firstChild.nodeValue = '[' + value + ']';
    }
}
</script>
</body>
</html>

Trong mã HTML ở trên, sau khi click vào nút thì các Element có thuộc tính tagname bằng p sẽ được lấy thông qua phương thức getElementsByTagName. Sau đó bằng vòng lặp, chúng ta truy cập tới Node con đầu tiên của từng Element lấy được thông qua thuộc tính firstChild (thuộc kiểu Node text), rồi thay đổi giá trị của Node con này bằng thuộc tính nodeValue. Kết quả sau khi click thì giá trị của các element lấy được sẽ thay đổi như sau:

Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng nodeValue trong JavaScript để lấy và thay đổi giá trị của một Node chỉ định rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.