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

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

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 TypeNode ValueÝ nghĩa
1 ELEMENT_NODEnullNode phần tử
2 ATTRIBUTE_NODEnullNode thuộc tính
3 TEXT_NODENội dung của textNode văn bản
4 CDATA_SECTION_NODENội dung của CDATA SECTIONNode SECTION của CDATA
5 ENTITY_REFERENCE_NODEnullNode tham chiếu thực thể
6 ENTITY_NODEnullNode khai báo thực thể
7 PROCESSING_INSTRUCTION_NODEToàn bộ nội dung không bao gồm mục tiêuNode hướng dẫn xử lý
8 COMMENT_NODEGiá trị của commentNode comment
9 DOCUMENT_NODEnullNode tài liệu
10 DOCUMENT_TYPE_NODEnullNode loại tài liệu
11 DOCUMENT_FRAGMENT_NODEnullNode đoạn tài liệu
12 NOTATION_NODEnullNode 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:

nodeValue trong JavaScript.

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 TypeNode ValueÝ nghĩa
3 TEXT_NODENội dung của textNode văn bản
4 CDATA_SECTION_NODENội dung của CDATA SECTIONNode SECTION của CDATA
7 PROCESSING_INSTRUCTION_NODEToàn bộ nội dung không bao gồm mục tiêuNode hướng dẫn xử lý
8 COMMENT_NODEGiá trị của commentNode 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:

nodeValue trong JavaScript.

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.

Hãy chia sẻ và cùng lan tỏa kiến thức lập trình Nhật Bản tại Việt Nam!

HOME>> >>

Profile
きよしです!笑

Tác giả : Kiyoshi (Chis Thanh)

Kiyoshi là một cựu du học sinh tại Nhật Bản. Sau khi tốt nghiệp đại học Toyama năm 2017, Kiyoshi hiện đang làm BrSE tại Tokyo, Nhật Bản.