Làm cách nào để xóa nút văn bản trong javascript?

Nhận toàn quyền truy cập vào JavaScript. The Definitive Guide, 5th Edition và hơn 60 nghìn đầu sách khác, với 10 ngày dùng thử miễn phí O'Reilly

Ngoài ra còn có các sự kiện trực tuyến trực tiếp, nội dung tương tác, tài liệu chuẩn bị chứng nhận, v.v.

Việc xóa InternalHTML rất đơn giản, tuy nhiên, nó có thể không phù hợp với các ứng dụng hiệu suất cao vì nó gọi trình phân tích cú pháp HTML của trình duyệt

  
    Title of the Document
    
    
  
  
    

      Welcome to W3Docs
    
    Remove via innerHTML
    
  

văn bảnnội dung

Cách tiếp cận thứ hai là xóa textContent. Nó tương tự như phương pháp trên. Phương pháp này nhanh hơn nhiều so với InternalHTML. Sử dụng trình duyệt textContent sẽ không gọi trình phân tích cú pháp HTML và ngay lập tức thay thế tất cả phần tử con của phần tử bằng một nút #text duy nhất

  
    Title of the Document
    
    
  
  
    

      Welcome to W3Docs
    
    Remove via textContent
    
  

Thay vì xóa firstChild, hãy sử dụng lastChild để xóa phần tử cuối cùng nhanh hơn. Vòng lặp sẽ kiểm tra FirstChild trong trường hợp kiểm tra FirstChild nhanh hơn LastChild

  
    Title of the Document
    
    
  
  
    

      Welcome to W3Docs
    
    Remove via lastChild-loop
    
  

Vòng lặp để loại bỏ mọi cách tiếp cận lastElementChild bảo toàn tất cả các phần tử không phải, (chẳng hạn như các nút #text và

Hàm lấy một tham chiếu phần tử làm đối số của nó và loại bỏ tất cả các nút không mong muốn đó khỏi bên trong nó. Hàm hoạt động trực tiếp trên phần tử được đề cập, vì các đối tượng trong JavaScript được truyền theo tham chiếu – nghĩa là hàm nhận tham chiếu đến đối tượng ban đầu, không phải bản sao của nó. Đây là mã của hàm clean()

function clean(node)
{
  for(var n = 0; n < node.childNodes.length; n ++)
  {
    var child = node.childNodes[n];
    if
    (
      child.nodeType === 8 
      || 
      (child.nodeType === 3 && !/\S/.test(child.nodeValue))
    )
    {
      node.removeChild(child);
      n --;
    }
    else if(child.nodeType === 1)
    {
      clean(child);
    }
  }
}

Vì vậy, để xóa các nút không mong muốn đó từ bên trong phần tử

clean(document.body);

0, bạn chỉ cần làm điều này

clean(document.body);

Ngoài ra, để làm sạch toàn bộ tài liệu, bạn có thể làm điều này

clean(document);

Mặc dù tham chiếu thông thường sẽ là một nút

clean(document.body);

1, nhưng nó cũng có thể là một loại nút chứa phần tử khác, chẳng hạn như một nút

clean(document.body);

2. Chức năng này cũng không bị hạn chế khi làm việc với HTML và có thể hoạt động trên bất kỳ loại XML DOM nào khác

Tại sao phải làm sạch DOM

Khi làm việc với DOM trong JavaScript, chúng tôi sử dụng các thuộc tính tiêu chuẩn như

clean(document.body);

3 và

clean(document.body);

4 để nhận các tham chiếu nút tương đối. Thật không may, sự phức tạp có thể phát sinh khi có khoảng trắng trong DOM, như trong ví dụ sau

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

Đối với hầu hết các trình duyệt hiện đại (ngoài IE8 trở về trước), mã HTML trước đó sẽ dẫn đến cấu trúc DOM sau

DIV
#text ("\n\t")
+ H2
| + #text ("Shopping list")
+ #text ("\n\t")
+ UL
| + #text ("\n\t\t")
| + LI
| | + #text ("Washing-up liquid")
| + #text ("\n\t\t")
| + LI
| | + #text ("Zinc nails")
| + #text ("\n\t\t")
| + LI
| | + #text ("Hydrochloric acid")
| + #text ("\n\t")
+ #text ("\n")

Ngắt dòng và tab bên trong cây đó xuất hiện dưới dạng khoảng trắng

clean(document.body);

5 nút. Vì vậy, ví dụ, nếu chúng ta bắt đầu với một tham chiếu đến phần tử

clean(document.body);

6, thì

clean(document.body);

7 sẽ không tham chiếu đến phần tử

clean(document.body);

8. Thay vào đó, nó sẽ đề cập đến nút khoảng trắng

clean(document.body);

5 (ngắt dòng và tab) xuất hiện trước nó. Hoặc, nếu chúng ta bắt đầu với một tham chiếu đến phần tử

clean(document.body);

8, thì

clean(document);

1 sẽ không phải là phần tử đầu tiên của

clean(document);

2, nó sẽ là khoảng trắng trước nó

Nhận xét HTML cũng là các nút và hầu hết các trình duyệt cũng lưu giữ chúng trong DOM – như chúng nên làm, bởi vì trình duyệt không quyết định nút nào quan trọng và nút nào không. Nhưng rất hiếm khi các tập lệnh thực sự muốn có dữ liệu trong các bình luận. Nhiều khả năng các nhận xét (và khoảng trắng xen vào) là các nút "rác" không mong muốn

Có một số cách để xử lý các nút này. Ví dụ: bằng cách lặp qua chúng

var ul = h2.nextSibling;
while(ul.nodeType !== 1)
{
  ul = ul.nextSibling;
}

Cách tiếp cận đơn giản nhất, thiết thực nhất, chỉ đơn giản là loại bỏ chúng. Vì vậy, đó là chức năng của hàm clean() - chuẩn hóa hiệu quả cây con của phần tử, để tạo một mô hình phù hợp với cách sử dụng thực tế của chúng ta đối với nó và giống nhau giữa các trình duyệt

Sau khi phần tử

clean(document);

4 từ ví dụ ban đầu được làm sạch, các tham chiếu

clean(document.body);

7 và

clean(document);

1 sẽ trỏ đến các phần tử dự kiến. DOM đã được làm sạch được hiển thị bên dưới

SECTION
+ H2
| + #text ("Shopping list")
+ UL
| + LI
| | + #text ("Washing-up liquid")
| + LI
| | + #text ("Zinc nails")
| + LI
| | + #text ("Hydrochloric acid")

Cách chức năng hoạt động

Hàm clean() là hàm đệ quy – một hàm gọi chính nó. Đệ quy là một tính năng rất mạnh và có nghĩa là hàm có thể xóa một cây con ở bất kỳ kích thước và độ sâu nào. Chìa khóa của hành vi đệ quy là điều kiện cuối cùng của câu lệnh

clean(document);

8, được lặp lại bên dưới

else if(child.nodeType === 1)
{
  clean(child);
}

Vì vậy, mỗi phần tử con của phần tử được truyền cho clean(). Sau đó, các nút con của nút con đó được chuyển đến clean(). Điều này được tiếp tục cho đến khi tất cả các hậu duệ được làm sạch

Trong mỗi lần gọi clean(), hàm lặp qua bộ sưu tập

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

2 của phần tử, loại bỏ bất kỳ nút

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

3 nào (có

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

4 trên 8) hoặc nút

clean(document.body);

5 (với

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

4 trên 3) có giá trị không là gì ngoài khoảng trắng. Biểu thức chính quy thực sự là một phép thử nghịch đảo, tìm kiếm các nút không chứa các ký tự không phải khoảng trắng

Tất nhiên, chức năng này không xóa tất cả khoảng trắng. Bất kỳ khoảng trắng nào là một phần của nút

clean(document.body);

5 cũng chứa văn bản không phải khoảng trắng, đều được giữ nguyên. Vì vậy, các nút

clean(document.body);

5 duy nhất bị ảnh hưởng là những nút chỉ có khoảng trắng

Lưu ý rằng iterator phải truy vấn

  
Shopping list
  

    
Washing-up liquid
    
Zinc nails
    
Hydrochloric acid
  

9 mỗi lần, thay vì lưu trước

DIV
#text ("\n\t")
+ H2
| + #text ("Shopping list")
+ #text ("\n\t")
+ UL
| + #text ("\n\t\t")
| + LI
| | + #text ("Washing-up liquid")
| + #text ("\n\t\t")
| + LI
| | + #text ("Zinc nails")
| + #text ("\n\t\t")
| + LI
| | + #text ("Hydrochloric acid")
| + #text ("\n\t")
+ #text ("\n")

0, điều này thường hiệu quả hơn. Chúng tôi đã làm điều này bởi vì chúng tôi đang loại bỏ các nút khi chúng tôi tiếp tục, điều này rõ ràng sẽ thay đổi độ dài của bộ sưu tập

Chia sẻ bài viết này

James Edwards

James là nhà phát triển web tự do có trụ sở tại Vương quốc Anh, chuyên phát triển ứng dụng JavaScript và xây dựng các trang web có thể truy cập. Với kinh nghiệm chuyên môn hơn một thập kỷ, ông là một tác giả đã xuất bản, một blogger và diễn giả thường xuyên, đồng thời là người ủng hộ thẳng thắn cho sự phát triển dựa trên tiêu chuẩn

Làm cách nào để xóa một nút trong JavaScript?

Làm cách nào để xóa nút con trong JavaScript?

Nút văn bản trong JavaScript là gì?

Xóa () trong JavaScript là gì?