Hướng dẫn javascript get div text - javascript nhận văn bản div

Nhận văn bản của một phần tử div bằng JavaScript #

Sử dụng thuộc tính textContent để lấy văn bản của phần tử div, ví dụ: ________số 8. Thuộc tính textContent sẽ trả về nội dung văn bản của div và con cháu của nó. Nếu phần tử trống, một chuỗi trống được trả về.

Đây là HTML cho các ví dụ trong bài viết này.

Copied!
DOCTYPE html>

  
    
  

  
    
      One, Two, Three
    

    
  

Và đây là mã JavaScript liên quan.

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

Chúng tôi đã sử dụng thuộc tính TextContent để có được nội dung văn bản của div và con cháu của nó.

Thuộc tính trả về sự kết hợp của nội dung văn bản của mỗi nút trẻ, không bao gồm nhận xét.

Nếu phần tử div trống, thuộc tính sẽ trả về một chuỗi trống.

Bạn có thể nhận được không gian dẫn đầu hoặc theo dõi khi sử dụng textContent tùy thuộc vào cấu trúc của HTML của bạn. Nếu bạn cần loại bỏ bất kỳ không gian dẫn đầu hoặc dấu vết, hãy sử dụng phương pháp

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

4.

Copied!
const container = document.getElementById['container'];

// 👇️ "One, Two, Three"
const result = container.textContent.trim[];

Đoạn mã cũng cho thấy rằng chúng ta có thể sử dụng thuộc tính bên trong để lấy nội dung văn bản của một phần tử và hậu duệ của nó.

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
const result = container.innerText;

Tuy nhiên, có một số khác biệt quan trọng giữa các thuộc tính textContent và

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

6:

1. textContent có được nội dung của tất cả các yếu tố, bao gồm các yếu tố

   Copied!
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   console.log[container.textContent];
   
   // 👇️ One, Two, Three
   console.log[container.innerText];
   

   8 và

   Copied!
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   console.log[container.textContent];
   
   // 👇️ One, Two, Three
   console.log[container.innerText];
   

   9, trong khi

   Copied!
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   console.log[container.textContent];
   
   // 👇️ One, Two, Three
   console.log[container.innerText];
   

   6 chỉ nhận được nội dung của các yếu tố "có thể đọc được".

2. Copied!
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   console.log[container.textContent];
   
   // 👇️ One, Two, Three
   console.log[container.innerText];
   

   6 nhận thức được kiểu dáng và không trả về văn bản của các yếu tố ẩn, trong khi textContent không xem xét các kiểu.
3. Sử dụng textContent có thể ngăn chặn các cuộc tấn công kịch bản chéo trang.

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

6 tính đến các kiểu CSS, vì vậy khi tài sản được truy cập, một phản xạ được kích hoạt để đảm bảo các kiểu được cập nhật.

Phản xạ có thể tốn kém và nên tránh khi có thể.

Khi bạn sử dụng textContent và

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

6 để đặt nội dung văn bản của phần tử, các nút con của phần tử sẽ bị xóa.

Khi sử dụng các thuộc tính textContent và

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
console.log[container.textContent];

// 👇️ One, Two, Three
console.log[container.innerText];

6 để cập nhật nội dung văn bản của phần tử, các nút con của phần tử sẽ được thay thế bằng một nút văn bản với giá trị chuỗi được cung cấp.

Nếu bạn cần đặt nội dung văn bản của một phần tử, bạn nên sử dụng phương thức InsertAdjacentText.

Copied!
const container = document.getElementById['container'];

// ✅ Update text content of element
container.insertAdjacentText['beforeend', ', Four'];

// ✅ Update HTML content of element
container.insertAdjacentHTML[
  'beforeend',
  ', Five',
];

Phương pháp

Copied!
const container = document.getElementById['container'];

// 👇️ "One, Two, Three"
const result = container.textContent.trim[];

9 không loại bỏ các nút con của phần tử mà nó được gọi.

Phương thức

Copied!
const container = document.getElementById['container'];

// 👇️ "One, Two, Three"
const result = container.textContent.trim[];

9 lấy 2 tham số sau:

1. Copied!
   
     
   
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   const result = container.innerText;
   

   1 - Vị trí liên quan đến phần tử của nơi văn bản nên được chèn. Có thể là một trong những điều 4 sau đây:

• Copied!
  const container = document.getElementById['container'];
  
  // 👇️ One, Two, Three
  const result = container.innerText;
  

  2 - trước chính phần tử.

• Copied!
  const container = document.getElementById['container'];
  
  // 👇️ One, Two, Three
  const result = container.innerText;
  

  3 - Ngay bên trong phần tử, trước đứa con đầu lòng của nó.

• Copied!
  const container = document.getElementById['container'];
  
  // 👇️ One, Two, Three
  const result = container.innerText;
  

  4 - Ngay bên trong phần tử, sau đứa con cuối cùng của nó.

• Copied!
  const container = document.getElementById['container'];
  
  // 👇️ One, Two, Three
  const result = container.innerText;
  

  5 - sau chính phần tử.

1. Copied!
   const container = document.getElementById['container'];
   
   // 👇️ One, Two, Three
   const result = container.innerText;
   

   6 - Chuỗi mà từ đó tạo một nút văn bản mới để chèn tại vị trí đã cho.

Trong ví dụ, chúng tôi đã thêm một chuỗi bên trong phần tử, sau đứa con cuối cùng của nó. Tuy nhiên, bạn có thể chuyển một đối số đầu tiên khác cho phương thức tùy thuộc vào trường hợp sử dụng của bạn.

Ví dụ cũng cho thấy cách sử dụng phương thức

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
const result = container.innerText;

7 để chèn HTML vào phần tử div.

Phương thức

Copied!
const container = document.getElementById['container'];

// 👇️ One, Two, Three
const result = container.innerText;

7 có cùng tham số đầu tiên như

Copied!
const container = document.getElementById['container'];

// 👇️ "One, Two, Three"
const result = container.textContent.trim[];

9.

Copied!
const container = document.getElementById['container'];

// ✅ Update HTML content of element
container.insertAdjacentHTML[
  'beforeend',
  ', Five',
];

Tuy nhiên, lưu ý rằng bạn không nên sử dụng đầu vào do người dùng tạo mà không thoát khỏi nó, bởi vì điều đó dẫn đến lỗ hổng kịch bản chéo trang.