Hướng dẫn này sẽ minh họa cách truy cập và thao tác thuộc tính “textContent” của phần tử HTML DOM trong JavaScript.
Trước tiên, hãy xem những điều cơ bản về thuộc tính “textContent” của DOM DOM.
Thuộc tính “textContent” HTML DOM trong JavaScript là gì?
Các ' văn bảnNội dung ” là thuộc tính tích hợp để đặt, truy xuất và sửa đổi văn bản của một phần tử hoặc nút được chỉ định bao gồm tất cả các phần tử con của nó. Phần tử con là các phần tử con như , , và nhiều phần tử con khác được sử dụng cho mục đích định dạng. Trong khi cài đặt văn bản bằng thuộc tính “textContent”, phần tử con của phần tử được nhắm mục tiêu sẽ được thay thế hoàn toàn bằng văn bản mới.
Cú pháp(Đặt nội dung văn bản)
Cú pháp cơ bản để đặt văn bản của một phần tử/nút bằng cách sử dụng “ văn bảnNội dung ” tài sản được viết dưới đây:
yếu tố. văn bảnNội dung = chữ | nút. văn bảnNội dung = chữ
Cú pháp trên lấy “ chữ ” là giá trị mà người dùng muốn đặt cho một phần tử hoặc nút.
Cú pháp(Lấy nội dung văn bản)
Cú pháp tổng quát để trả về văn bản của một phần tử hoặc nút thông qua “ văn bảnNội dung ” tài sản được nêu ở đây:
yếu tố. văn bảnNội dung | nút. văn bảnNội dungGiá trị trả về: Các ' văn bảnNội dung ” thuộc tính trả về “ chữ ” của một phần tử hoặc nút có khoảng cách nhưng không có thẻ HTML bên trong.
Bây giờ, hãy sử dụng các cú pháp được xác định ở trên một cách thực tế để truy cập và thao tác với thuộc tính “textContent”.
Làm cách nào để truy cập và thao tác thuộc tính “textContent” của phần tử DOM HTML trong JavaScript?
Tương tự như thuộc tính “innerHTML” và “innerText”, thuộc tính “ văn bảnNội dung Thuộc tính ” cũng cho phép người dùng thiết lập, truy cập và sửa đổi văn bản của thành phần mong muốn một cách dễ dàng. Phần này thực hiện tất cả các thao tác này trên một phần tử bằng cách sử dụng các ví dụ nêu dưới đây.
Ví dụ 1: Áp dụng thuộc tính “textContent” để truy cập văn bản phần tử/nút
Ví dụ này áp dụng thuộc tính “textContent” để trả về văn bản của một phần tử hoặc nút cụ thể bao gồm tất cả các phần tử con của nó.
Mã HTML
< div nhận dạng = 'myDiv' di chuột qua = 'getText()' phong cách = 'viền: 3px màu đen đặc; chiều rộng: 400px; phần đệm: 5px 5px; lề: tự động;' >< h1 > Tiêu đề đầu tiên < / h1 >
< h2 > Tiêu đề thứ hai < / h2 >
< h3 > Tiêu đề thứ ba < / h3 >
< h4 > Tiêu đề thứ tư < / h4 >
< h5 > Tiêu đề thứ năm < / h5 >
< h6 > Tiêu đề thứ sáu < / h6 >
< / div >
Trong các dòng mã HTML trên:
- Các ' Thẻ ” có id “myDiv” tạo một phần tử div được tạo kiểu với các thuộc tính sau: đường viền, chiều rộng, phần đệm (trên và dưới, trái và phải) và lề. Nó cũng đính kèm “ di chuột qua ” sự kiện gọi ra “ getText() ” khi người dùng di chuột qua nó.
- Bên trong div, tất cả các thẻ tiêu đề (h1, h2, h3, h4, h5 và h6) được chỉ định sẽ chèn các thành phần tiêu đề theo cấp độ được chỉ định của chúng.
Mã JavaScript
< kịch bản >
chức năng getText ( ) {
là yếu tố = tài liệu. getElementById ( 'myDiv' ) ;
báo động ( yếu tố. văn bảnNội dung ) ;
}
kịch bản >Trong khối mã JavaScript được viết ở trên:
- Xác định một hàm có tên “ getText() ”.
- Bên trong hàm này, biến “elem” áp dụng “ getElementById() ” để truy cập phần tử div thông qua id của nó.
- Các ' báo động() ” phương thức tạo một hộp cảnh báo sử dụng “ văn bảnNội dung ” để trả về văn bản của div cha cùng với tất cả các phần phụ thuộc của nó.
đầu ra
Đầu ra bên dưới bật lên một hộp cảnh báo hiển thị nội dung văn bản của phần tử div:
Ví dụ 2: Áp dụng thuộc tính “textContent” để thay thế một phần tử Nội dung văn bản bao gồm các phần tử con của nó
Ví dụ này cho thấy cách thuộc tính “textContent” thay thế tất cả các phần tử con của một phần tử trong khi sửa đổi văn bản của nó.
Mã HTML
< trung tâm >
< mã h1 = 'đầu của tôi' trong một cái nhấp chuột = 'sửa đổiText()' >< b > Cái này b > là < nhịp > Phần mở đầu < nhịp > < Tôi > Yếu tố Tôi > h1 >
trung tâm >Trong các dòng mã nêu trên:
- Các ' Thẻ ” thêm phần tử tiêu đề cấp 1 kèm theo “ trong một cái nhấp chuột ” sự kiện gọi ra “ sửa đổi() ” hoạt động khi người dùng nhấp vào nó.
- Phần tử tiêu đề cũng chứa “ ','
', Và ' ” gắn thẻ là hậu duệ của nó. Thẻ “ ” được sử dụng để in đậm chuỗi kèm theo, thẻ “” không có bất kỳ thuộc tính tạo kiểu nào được sử dụng để không áp dụng kiểu dáng nào cho chuỗi đã cho và thẻ “ ” được sử dụng để hiển thị chuỗi được chỉ định ở dạng in nghiêng.
Mã JavaScript
< kịch bản >
h1 ở đâu = tài liệu. getElementById ( 'đầu của tôi' ) ;
bảng điều khiển. nhật ký ( h1 ) ;
chức năng sửa đổi văn bản ( ) {
h1. văn bảnNội dung = 'Chào mừng đến với Linuxhint!' ;
bảng điều khiển. nhật ký ( h1 )
}
kịch bản >Trong đoạn mã JavaScript ở trên:
- Biến “h1” sử dụng “ document.getElementById() ” để truy cập phần tử tiêu đề thông qua id được chỉ định của nó.
- Các ' console.log() Phương thức ” hiển thị phần tử tiêu đề được truy cập trên bảng điều khiển trước khi thay đổi nội dung của nó.
- Chức năng có tên “ sửa đổi() ” sử dụng “ văn bảnNội dung ” để sửa đổi văn bản của phần tử tiêu đề được tìm nạp.
- Phương thức “console.log()” cuối cùng lại hiển thị giá trị “h1” sau khi sửa đổi.
đầu ra
Bảng điều khiển hiển thị rõ ràng rằng tất cả phần tử con của phần tử tiêu đề đã cho đã được thay thế bằng văn bản mới được chỉ định khi nhấp vào nó:
Ví dụ 3: Áp dụng thuộc tính “textContent” để sửa đổi văn bản của phần tử con
Ví dụ này sử dụng thuộc tính “textContent” để sửa đổi văn bản của phần tử con cụ thể.
Mã HTML
< div nhận dạng = 'myDiv' phong cách = 'viền: 3px màu đen đặc; chiều rộng: 400px; phần đệm: 5px 5px; lề: tự động;' >
< trung tâm >
< cái nút nhận dạng = 'btn' di chuột qua = 'changeText()' > Nút cũ < / cái nút >
< / trung tâm >
< / div >Trong kịch bản này:
- Phần tử “div” có phần tử “button” được tạo với sự trợ giúp của “
' nhãn. - Phần tử nút còn chứa id được chỉ định và “ di chuột qua ” sự kiện gọi là “ thay đổi văn bản() ” hoạt động khi chuột di chuột qua nó.
Mã JavaScript
< kịch bản >
là phần tử cha mẹ = tài liệu. getElementById ( 'myDiv' ) ;
mục tiêu var = tài liệu. getElementById ( 'btn' ) ;
đã tìm thấy tôi = phần tử cha mẹ. chứa ( mục tiêu ) ;
nếu như ( phần tử cha mẹ. chứa ( mục tiêu ) == ĐÚNG VẬY ) {
bảng điều khiển. nhật ký ( tìm tôi ) ;
chức năng thay đổi văn bản ( ) {
mục tiêu. văn bảnNội dung = 'Nút mới' ;
}
} khác {
bảng điều khiển. nhật ký ( 'Không tồn tại' )
}
kịch bản >Trong đoạn mã trên:
- Biến “parentElement” áp dụng “ getElementById() ” để truy cập phần tử div cha. Biến “target” cũng sử dụng phương thức “getElementById()” để tìm nạp phần tử nút đã thêm bằng id của nó.
- Biến “find_me” sử dụng “ chứa() ” để kiểm tra xem phần tử nút được nhắm mục tiêu có phải là phần tử con của div hay không. Phương thức này sẽ trả về “ ĐÚNG VẬY ” cho “có” nếu không thì “sai”.
- Các ' nếu khác Câu lệnh ” xác định một khối mã.
- Nếu phần tử được nhắm mục tiêu là phần tử con của phần tử cha, thì “ thay đổi văn bản() ” sẽ thay đổi văn bản của nó thông qua “ văn bảnNội dung ' tài sản. Ngược lại, khối mã “else” sẽ thực thi để hiển thị thông báo đã chỉ định bằng cách sử dụng lệnh “ console.log() ' phương pháp.
đầu ra
Bảng điều khiển hiển thị biểu tượng “ ĐÚNG VẬY ” giá trị boolean xác minh phần tử nút là con của div đã cho và sau đó văn bản của nó thay đổi khi di chuột qua nó:
Sự khác biệt giữa các thuộc tính textContent, InnerText và InnerHTML?
Nói chung, “ văn bảnNội dung ',' văn bản bên trong ', Và ' bên trongHTML ” thuộc tính xử lý văn bản của một phần tử hoặc nút theo cách thiết lập và nhận nó. Tuy nhiên, các thuộc tính này khác nhau dựa trên một số yếu tố. Phần này nhấn mạnh sự khác biệt chính giữa tất cả chúng:
Điều kiện 'Nội dung văn bản' 'Văn bản bên trong' “HTML bên trong” Kiểu trả về Nó trả về văn bản của một phần tử bao gồm tất cả các phần tử con của nó (thẻ định dạng), văn bản ẩn CSS và khoảng trắng. Nó không trả về các thẻ HTML của một phần tử. Nó trả về nội dung văn bản của phần tử HTML được nhắm mục tiêu cùng với tất cả các phần tử con của nó (thẻ định dạng). Nó không trả về khoảng trắng, văn bản ẩn CSS và các thẻ HTML ngoại trừ