Nội dung chính - textContent trong JavaScript và cách lấy giá trị text của Node
- Bảng textContent trong JavaScript
- Mã mẫu 1
- Mã mẫu 2
- textContent trong JavaScript và cách thay đổi giá trị text của Node
- Mã mẫu 1
- Mã mẫu 2
- textContent trong JavaScript và cách thay đổi giá trị text của Node
Mã mẫu 1 textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để
lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. textContent trong JavaScript và cách lấy giá trị text của NodeBảng textContent trong JavaScriptMã mẫu 1 là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. Mã mẫu 2 node.textContent Bảng textContent trong JavaScriptMã mẫu 1
| Mã mẫu 2 | textContent trong JavaScript và cách thay đổi giá trị text của Node | Mã mẫu 1 |
|---|
| Tổng kết | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp | | textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp | | textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. | Cú pháp sử dụng thuộc tính textContent trong JavaScript để lấy giá trị text như sau: | Thuộc tính textContent trả về kết quả là một DOMString, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng textContent dưới đây: | | Node Type | Cú pháp sử dụng thuộc tính textContent trong JavaScript để lấy giá trị text như sau: | Thuộc tính textContent trả về kết quả là một DOMString, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng textContent dưới đây: | | Node Type | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp | | textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp | | textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. | Cú pháp sử dụng thuộc tính textContent trong JavaScript để lấy giá trị text như sau: | Thuộc tính textContent trả về kết quả là một DOMString, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng textContent dưới đây: | | Node Type | Cú pháp sử dụng thuộc tính textContent trong JavaScript để lấy giá trị text như sau: | Thuộc tính textContent trả về kết quả là một DOMString, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng textContent dưới đây: | | Node Type | textContent | Ý nghĩa | | 1 ELEMENT_NODE | textContent | Ý nghĩa | | 1 ELEMENT_NODE | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp | | textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. | Hướng dẫn cách sử dụng textContent trong JavaScript. Bạn sẽ biết cách sử dụng thuộc tính textContent để lấy cũng như thiết lập giá trị text của một Node chỉ định sau bài học này. | Cú pháp |
textContent trong JavaScript là một thuộc tính của Node Object, có tác dụng lấy giá trị được nối của tất cả các text có trong một Node và các Node con cháu của nó. Cú pháp sử dụng thuộc tính textContent trong JavaScript để lấy giá trị text như sau: Thuộc tính textContent trả về kết quả là một DOMString, và giá trị trả về sẽ tuỳ thuộc vào kiểu nodeType như bảng textContent dưới đây:Node Type <div>
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
textContent - Ý nghĩa
- 1 ELEMENT_NODE
- Ý nghĩa
- 1 ELEMENT_NODE
- *1
Node phần tử 2 ATTRIBUTE_NODE Node thuộc tính 3 TEXT_NODE Mã mẫu 1Node.nodeValue <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng textContent </title>
</head>
<body>
<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy giá trị text Node</button>
<script>
function getElements(){
let element = document.getElementById('box');
console.log('-- start --');
console.log(element.textContent);
console.log('-- end --');
}
</script>
</body>
</html>
Node văn bản 4 CDATA_SECTION_NODE Mã mẫu 25 ENTITY_REFERENCE_NODE <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng textContent </title>
</head>
<body>
<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy giá trị text Node</button>
<script>
function getElements(){
let elements = document.getElementsByTagName('body');
console.log('-- start --');
console.log(elements[0].textContent);
console.log('-- end --');
}
</script>
</body>
</html>
Node tham chiếu thực thể 4 CDATA_SECTION_NODE textContent trong JavaScript và cách thay đổi giá trị text của NodeBảng textContent trong JavaScriptMã mẫu 1 Mã mẫu 2 textContent trong JavaScript và cách thay đổi giá trị text của Nodetoàn bộ các Node con cháu của nó sẽ bị xoá đi khỏi DOM. Mã mẫu 1 Mã mẫu 1 Hãy cùng tìm hiểu cách thay đổi giá trị text của Node chỉ định bằng thuộc tính textContent trong ví dụ sau: <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng textContent </title>
</head>
<body>
<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và thay đổi giá trị text Node</button>
<script>
function getElements(){
let element = document.getElementById('box');
element.textContent = "Đi Hà Nội";
}
</script>
</body>
</html>
Trong mã HTML ở trên, sau khi click vào nút thì Node có thuộc tính <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng textContent </title>
</head>
<body>
<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và lấy giá trị text Node</button>
<script>
function getElements(){
let elements = document.getElementsByTagName('body');
console.log('-- start --');
console.log(elements[0].textContent);
console.log('-- end --');
}
</script>
</body>
</html>
1 sẽ được lấy thông qua phương thức getElementById. Sau đó khi sử dụng thuộc tính textContent để thiết lập một giá trị mới cho Node này thì toàn bộ Node con cháu ban đầu của nó đều bị xoá đi, và thay thế bằng giá trị mới như sau:.- Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagname
Mã mẫu 2Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML. <!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Ví dụ minh hoạ cách dùng textContent </title>
</head>
<body>
<p>Kế hoạch mua sắm</p>
<div id="box">
<p>Ninh Bình</p>
<p>Shop mẹ và bé</p>
</div>
<button onClick="getElements();">Click và thay đổi giá trị text Node</button>
<script>
function getElements(){
let element = document.getElementById('box');
element.textContent = " <p> Đi <strong> Hà Nội </strong> </p>";
}
</script>
</body>
</html>
Các ký tự này sẽ chỉ được coi là ký tự bình thường khi thay thế giá trị textContent mà thôi. .Xem thêm: getElementsByTagName trong JavaScript và cách lấy element theo thuộc tính tagnameMã mẫu 2textContent 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é. Một ví dụ khác khi chỉ định giá trị của value chứa các ký tự đặc biệt như thẻ tag của HTML. Các ký tự này sẽ chỉ được coi là ký tự bình thường khi thay thế giá trị textContent mà thôi. Tổng kết>> học javascript - lập trình javascript cơ bản>>13.
dom trong javascript Trên đây Kiyoshi đã hướng dẫn bạn cách sử dụng textContent 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>> học javascript - lập trình javascript cơ bản>>13. dom trong javascript
| 
