Làm cách nào để thay đổi nội dung văn bản trong JavaScript?

Thuộc tính

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
1 của giao diện
let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
2 đại diện cho nội dung văn bản của nút và hậu duệ của nó

Ghi chú.

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
1 và
let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
4 rất dễ bị nhầm lẫn, nhưng hai thuộc tính này là

Một chuỗi, hoặc

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
5. Giá trị của nó phụ thuộc vào tình hình

  • Nếu nút là một
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    6 hoặc một loại tài liệu, thì
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 trả về
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    5

    Ghi chú. Để lấy tất cả văn bản và dữ liệu CDATA cho toàn bộ tài liệu, hãy sử dụng

    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1

  • Nếu nút là phần CDATA, nhận xét, hướng dẫn xử lý hoặc nút văn bản, thì
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 trả về hoặc đặt, văn bản bên trong nút, i. e. ,
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    3
  • Đối với các loại nút khác,
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 trả về kết quả nối của
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 của mọi nút con, không bao gồm nhận xét và hướng dẫn xử lý. (Đây là chuỗi rỗng nếu nút không có nút con. )

Cảnh báo. Đặt

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
1 trên một nút sẽ xóa tất cả nút con của nút và thay thế chúng bằng một nút văn bản duy nhất có giá trị chuỗi đã cho

Đừng nhầm lẫn bởi sự khác biệt giữa

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
7 và
let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
4. Mặc dù những cái tên có vẻ giống nhau, nhưng có những khác biệt quan trọng

  • let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 lấy nội dung của tất cả các phần tử, bao gồm cả phần tử
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    0 và
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    1. Ngược lại,
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    2 chỉ hiển thị các phần tử "con người có thể đọc được"
  • let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 trả về mọi phần tử trong nút. Ngược lại,
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    2 biết về kiểu dáng và sẽ không trả lại văn bản của các phần tử "ẩn"
    • Hơn nữa, vì
      document.getElementById('divA').textContent = 'This text is different!';
      // The HTML for divA is now:
      // 
      This text is different!
      2 tính đến các kiểu CSS, nên việc đọc giá trị của
      document.getElementById('divA').textContent = 'This text is different!';
      // The HTML for divA is now:
      // 
      This text is different!
      2 sẽ kích hoạt chỉnh lại dòng để đảm bảo các kiểu được tính toán cập nhật. (Reflows có thể tốn kém về mặt tính toán, và do đó nên tránh khi có thể. )
  • Cả
    let text = document.getElementById('divA').textContent;
    // The text variable is now: 'This is some text!'
    
    1 và
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    2 đều xóa các nút con khi bị thay đổi, nhưng việc thay đổi
    document.getElementById('divA').textContent = 'This text is different!';
    // The HTML for divA is now:
    // 
    This text is different!
    2 trong Internet Explorer (phiên bản 11 trở xuống) cũng sẽ hủy vĩnh viễn tất cả các nút văn bản con cháu. Không thể chèn lại các nút vào bất kỳ phần tử nào khác hoặc vào cùng một phần tử sau khi làm như vậy

let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
10 trả về HTML, như tên của nó chỉ ra. Đôi khi mọi người sử dụng
let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
11 để truy xuất hoặc viết văn bản bên trong một phần tử, nhưng
let text = document.getElementById('divA').textContent;
// The text variable is now: 'This is some text!'
1 có hiệu suất tốt hơn vì giá trị của nó không được phân tích cú pháp dưới dạng HTML

Làm cách nào để chỉnh sửa nội dung văn bản trong JavaScript?

Sử dụng thuộc tính textContent để thay đổi văn bản của phần tử , e. g. thành phần. textContent = 'Văn bản mới'. Thuộc tính textContent sẽ đặt văn bản của phần tử thành chuỗi được cung cấp, thay thế bất kỳ nội dung hiện có nào.

Làm cách nào để đặt nội dung văn bản của một phần tử trong JavaScript?

Trong JavaScript, thuộc tính textContent cho phép chúng tôi lấy hoặc đặt nội dung văn bản của nút hoặc phần tử. Đặt thuộc tính textContent sẽ xóa và thay thế các nút con bằng nút văn bản mới. Thuộc tính textContent trả về nội dung của một phần tử/nút và tất cả các phần tử con của nó (nút con).

JavaScript có thể thay đổi nội dung không?

JavaScript là ngôn ngữ lập trình máy tính động, nhẹ và phổ biến nhất được sử dụng để tạo trang web. Nó tương tác với phía máy khách và tạo các trang động. JavaScript có thể thay đổi nội dung của trang HTML . Phương thức getElementById() dùng để lấy id của phần tử và thay đổi nội dung HTML.

Làm cách nào để thay đổi văn bản của đoạn văn trong JavaScript?

Để thay đổi văn bản trong một đoạn bằng JavaScript, hãy lấy tham chiếu đến phần tử đoạn và gán văn bản mới làm giá trị chuỗi cho thuộc tính innerHTML của phần tử đoạn.