[Tự học Javascript] Sửa đổi tài liệu(document) trong Javascript » https://final-blade.com

Sửa đổi DOM là chìa khóa để tạo những trang “ live ” ( sôi động, thực hơn ). Vì vậy ngày hôm nay, cafedev san sẻ cho ace về cách sửa đổi Document để tạo trang web động hơn .

Ở đây, chúng ta sẽ xem cách tạo các phần tử mới “nhanh chóng” và sửa đổi nội dung trang hiện có.

1. Ví dụ: hiển thị một tin nhắn

Hãy chứng tỏ bằng cách sử dụng một ví dụ. Chúng ta sẽ thêm một thông tin trên trang trông đẹp hơn alert .
Đây là cách nó sẽ trông như thế nào :



Hi there! You've read an important message.

Đó là ví dụ HTML. Bây giờ tất cả chúng ta hãy tạo tựa như div với JavaScript ( giả sử rằng những kiểu đã có trong HTML / CSS ) .

2. Tạo một phần tử

Để tạo những nút DOM, có hai giải pháp :
document. createElement ( tag )
Tạo một nút thành phần mới với thẻ đã cho :
let div = document. createElement ( ‘ div ’ ) ;
document. createTextNode ( text )
Tạo một nút văn bản mới với văn bản đã cho :
let textNode = document. createTextNode ( ‘ Here I am ’ ) ;
Hầu hết thời hạn tất cả chúng ta cần tạo những nút thành phần, ví dụ điển hình như nút div cho thông tin .

2.1. Tạo tin nhắn

Tạo div thông tin thực thi 3 bước :

// 1. Create 
element let div = document.createElement('div'); // 2. Set its class to "alert" div.className = "alert"; // 3. Fill it with the content div.innerHTML = "Hi there! You've read an important message.";

Chúng ta đã tạo thành phần. Nhưng hiện tại nó chỉ nằm trong một biến có tên div, chưa có trong trang. Vì vậy, tất cả chúng ta không hề nhìn thấy nó .

2.2. Phương thức chèn

Để div hiển thị, chúng ta cần chèn nó vào đâu đó document. Ví dụ, thành phần tử

Có một chiêu thức đặc biệt quan trọng thêm điều đó : document.body.append ( div ) .
Đây là code khá đầy đủ :

/*
Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
@author cafedevn
Contact: [email protected]
Fanpage: https://www.facebook.com/cafedevn
Group: https://www.facebook.com/groups/cafedev.vn/
Instagram: https://instagram.com/cafedevn
Twitter: https://twitter.com/CafedeVn
Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
Pinterest: https://www.pinterest.com/cafedevvn/
YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
*/



Ở đây chúng ta gọi append vào document.body, nhưng chúng ta có thể gọi phương thức append trên bất kỳ phần tử khác, để đưa phần tử khác vào nó. Ví dụ, chúng ta có thể nối một cái gì đó vào

bằng cách gọi div.append(anotherElement).

Dưới đây là nhiều giải pháp chèn hơn, chúng chỉ định những vị trí khác nhau để chèn :

  • node.append(…nodes or strings)- append nút hoặc các chuỗi vào cuối của node,
  • node.prepend(…nodes or strings)- chèn nút hoặc các chuỗi ở đầu của node,
  • node.before(…nodes or strings)–- chèn các nút hoặc chuỗi trước node ,
  • node.after(…nodes or strings)–- chèn các nút hoặc chuỗi sau node ,
  • node.replaceWith(…nodes or strings)–- thay thế node bằng các nút hoặc chuỗi đã cho.

Hãy xem chúng hoạt động giải trí .
Dưới đây là một ví dụ về việc sử dụng những giải pháp này để thêm những mục vào list và văn bản trước / sau nó :

  1. 0
  2. 1
  3. 2

Dưới đây là một hình ảnh trực quan về những gì những phương pháp :

Vì vậy, list sau cuối sẽ là :

before
  1. prepend
  2. 0
  3. 1
  4. 2
  5. append
after

Như đã nói, những phương pháp này hoàn toàn có thể chèn nhiều nút và đoạn văn bản trong một lệnh gọi .
Ví dụ, ở đây một chuỗi và một thành phần được chèn :

Hãy quan tâm : những văn bản được chèn “ dưới dạng văn bản ”, không phải “ dưới dạng HTML ”, với những thành phần như <, > .
Vì vậy, HTML sau cuối là :

Hello

Nói cách khác, những chuỗi được chèn vào một cách bảo đảm an toàn, giống như elem. textContent .
Vì vậy, những phương phức này chỉ hoàn toàn có thể được sử dụng để chèn những nút DOM hoặc những đoạn văn bản .
Nhưng điều gì sẽ xảy ra nếu tất cả chúng ta muốn chèn một chuỗi HTML “ dưới dạng html ”, với toàn bộ những thẻ và nội dung hoạt động giải trí, theo cách tựa như như elem. innerHTML ?

2.3. insertAdjacentHTML / Text / Element

Cho rằng tất cả chúng ta hoàn toàn có thể sử dụng khác, khá linh động phương pháp : elem. insertAdjacentHTML ( where, html ) .
Tham số tiên phong là một từ code, chỉ định vị trí cần chèn tương quan elem. Phải là một trong những điều sau :

  • “beforebegin”- chèn html ngay trước đó elem,
  • “afterbegin”- chèn html vào elem, ở đầu,
  • “beforeend”- chèn htm vào elem, ở cuối,
  • “afterend”- chèn html ngay sau đó elem.

Tham số thứ hai là một chuỗi HTML, được chèn “ dưới dạng HTML ” .
Ví dụ :

… Sẽ dẫn đến :

Hello
Bye

Đó là cách tất cả chúng ta hoàn toàn có thể nối HTML tùy ý vào trang .
Đây là hình ảnh của những biến thể chèn :

Chúng ta hoàn toàn có thể thuận tiện nhận thấy những điểm tương đương giữa bức tranh này và bức ảnh trước đó. Các điểm chèn thực sự giống nhau, nhưng phương pháp này chèn HTML .
Phương thức này có hai đồng đội :

  • elem.insertAdjacentText(where, text)- cú pháp giống nhau, nhưng một chuỗi text được chèn “dưới dạng văn bản” thay vì HTML,
  • elem.insertAdjacentElement(where, elem) – cú pháp giống nhau, nhưng chèn một phần tử.

Chúng sống sót đa phần để làm cho cú pháp “ thống nhất ”. Trong trong thực tiễn, chỉ insertAdjacentHTML được sử dụng hầu hết thời hạn. Bởi vì so với những thành phần và văn bản, tất cả chúng ta có những phương pháp append / prepend / before / after – chúng ngắn hơn để viết và hoàn toàn có thể chèn những nút / đoạn văn bản .
Vì vậy, đây là một biến thể thay thế sửa chữa của việc hiển thị thông tin :



3. Loại bỏ nút

Để vô hiệu một nút, có một phương pháp node.remove ( ) .
Hãy làm cho thông điệp của tất cả chúng ta biến mất sau một giây :



Xin quan tâm : nếu tất cả chúng ta muốn vận động và di chuyển một thành phần đến một nơi khác – không cần phải xóa thành phần đó khỏi phần cũ .

Tất cả các phương pháp chèn tự động loại bỏ nút khỏi vị trí cũ.

First
Second

4. Nhân bản các nút: cloneNode

Làm thế nào để chèn thêm một tin nhắn tương tự?

Chúng ta hoàn toàn có thể tạo một hàm và đặt mã ở đó. Nhưng cách sửa chữa thay thế sẽ là sao chép hiện có div và sửa đổi văn bản bên trong nó ( nếu cần ) .
Đôi khi khi tất cả chúng ta có một yếu tố lớn, điều đó hoàn toàn có thể nhanh hơn và đơn thuần hơn .

  • Lệnh gọi elem.cloneNode(true)tạo ra một bản sao “sâu” của phần tử – với tất cả các thuộc tính và thành phần phụ. Nếu chúng ta gọi elem.cloneNode(false), thì bản sao được tạo ra mà không có phần tử con.

Một ví dụ về sao chép tin nhắn :



Hi there! You've read an important message.

5. DocumentFragment

DocumentFragment là một nút DOM đặc biệt quan trọng đóng vai trò như một trình bảo phủ để vận động và di chuyển xung quanh list những nút .
Chúng ta hoàn toàn có thể nối những nút khác vào nó, nhưng khi tất cả chúng ta chèn nó vào đâu đó, thì nội dung của nó sẽ được chèn vào .

Ví dụ: getListContent bên dưới tạo một phân đoạn với các mục

  • , sau này được chèn vào

      :

      /*
      Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
      @author cafedevn
      Contact: [email protected]
      Fanpage: https://www.facebook.com/cafedevn
      Group: https://www.facebook.com/groups/cafedev.vn/
      Instagram: https://instagram.com/cafedevn
      Twitter: https://twitter.com/CafedeVn
      Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
      Pinterest: https://www.pinterest.com/cafedevvn/
      YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
      */
      
      

        Xin quan tâm, ở dòng sau cuối, ( * ) tất cả chúng ta thêm vào DocumentFragment, nhưng nó “ trộn vào ”, vì thế cấu trúc tác dụng sẽ là :

        • 1
        • 2
        • 3

        DocumentFragment hiếm khi được sử dụng một cách rõ ràng. Tại sao lại nối vào một loại nút đặc biệt quan trọng, nếu thay vào đó tất cả chúng ta hoàn toàn có thể trả về một mảng những nút ? Ví dụ viết lại :

          Chúng ta đề cập DocumentFragment hầu hết chính bới có 1 số ít khái niệm trên đó .

          6. Chèn / xóa phương thức kiểu cũ

          Trường cũ

          tin tức này giúp hiểu những tập lệnh cũ, nhưng không thiết yếu cho sự tăng trưởng mới .
          Ngoài ra còn có những phương pháp thao tác DOM “ cũ ”, sống sót vì nguyên do lịch sử vẻ vang .
          Những phương pháp này có từ thời cổ đại. Ngày nay, không có nguyên do để sử dụng chúng, như những phương pháp tân tiến, ví dụ điển hình như append, prepend, before, after, remove, replaceWith, là linh động hơn .
          Lý do duy nhất tất cả chúng ta liệt kê những phương pháp này ở đây là bạn hoàn toàn có thể tìm thấy chúng trong nhiều tập lệnh cũ :
          parentElem. appendChild ( node )
          Xuất hiện node với tư cách là đứa con ở đầu cuối của parentElem .

          Ví dụ sau thêm một

        • mới vào cuối

            :

            1. 0
            2. 1
            3. 2

            Chèn node trước khi nextSibling vào parentElem .

            Đoạn code sau sẽ chèn một danh sách mục mới trước mục thứ hai

          1. :

            1. 0
            2. 1
            3. 2

            Để chèn newLi làm thành phần tiên phong, tất cả chúng ta hoàn toàn có thể làm như sau :

            list.insertBefore(newLi, list.firstChild);

            Thay thế oldChild bằng node giữa những con của parentElem .
            parentElem. removeChild ( node )
            Loại bỏ node khỏi parentElem ( giả sử node là con của nó ) .

            Ví dụ sau loại bỏ đầu tiên

          2. khỏi

              :

              1. 0
              2. 1
              3. 2

              Tất cả những phương pháp này trả về nút được chèn / vô hiệu. Nói cách khác, parentElem. appendChild ( node ) thuận tiện node. Nhưng thường thì giá trị trả về không được sử dụng, tất cả chúng ta chỉ chạy phương pháp .

              7. Một từ về “document.write”

              Có một nhiều hơn, phương pháp rất cổ xưa của việc thêm một cái gì đó để một website : document.write .
              Cú pháp :

              /*
              Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam
              @author cafedevn
              Contact: [email protected]
              Fanpage: https://www.facebook.com/cafedevn
              Group: https://www.facebook.com/groups/cafedev.vn/
              Instagram: https://instagram.com/cafedevn
              Twitter: https://twitter.com/CafedeVn
              Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/
              Pinterest: https://www.pinterest.com/cafedevvn/
              YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/
              */
              
              Somewhere in the page ...
              
              The end

              Lời lôi kéo document.write ( html ) viết html vào trang “ ngay tại đây và ngay giờ đây ”. Các chuỗi html hoàn toàn có thể được tạo ra tự động hóa, thế cho nên nó là loại linh động. Chúng ta hoàn toàn có thể sử dụng JavaScript để tạo một website chính thức và viết nó .
              Phương thức này xuất phát từ thời không có DOM, không có tiêu chuẩn … Thực sự là thời xưa. Nó vẫn sống, do tại có những script sử dụng nó .
              Trong những tập lệnh văn minh, tất cả chúng ta hiếm khi hoàn toàn có thể nhìn thấy nó, vì hạn chế quan trọng sau :

              Lệnh gọi document.write chỉ hoạt động khi trang đang tải.

              Nếu tất cả chúng ta gọi nó sau đó, nội dung tài liệu hiện có sẽ bị xóa .
              Ví dụ :

              After one second the contents of this page will be replaced ...
              

              Vì vậy, nó không hề sử dụng được ở tiến trình “ sau khi tải ”, không giống như những giải pháp DOM khác mà tất cả chúng ta đã đề cập ở trên .
              Đó là điểm yếu kém .
              Cũng có một mặt trái. Về mặt kỹ thuật, khi nào document.write được gọi trong khi trình duyệt đang đọc ( “ nghiên cứu và phân tích cú pháp ” ) HTML đến và nó viết nội dung nào đó, trình duyệt sẽ sử dụng nó như thể khởi đầu ở đó, trong văn bản HTML .
              Vì vậy, nó hoạt động giải trí cực kỳ nhanh gọn, chính bới không có sửa đổi DOM. Nó ghi trực tiếp vào văn bản trang, trong khi DOM chưa được kiến thiết xây dựng .
              Vì vậy, nếu tất cả chúng ta cần thêm nhiều văn bản vào HTML động, và tất cả chúng ta đang ở quy trình tiến độ tải trang, và yếu tố vận tốc, nó hoàn toàn có thể hữu dụng. Nhưng trong trong thực tiễn, những nhu yếu này hiếm khi đi kèm với nhau. Và thường thì tất cả chúng ta hoàn toàn có thể thấy giải pháp này trong những script chỉ vì chúng đã cũ .

              8. Tóm lược

              • Các phương pháp tạo các nút mới:
                • document.createElement(tag) – tạo một phần tử với thẻ đã cho,
                • document.createTextNode(value) – tạo một nút văn bản (hiếm khi được sử dụng),
                • elem.cloneNode(deep)- sao chép phần tử, nếu deep==true sau đó với tất cả con cháu.
              • Chèn và xóa:
                • node.append(…nodes or strings)- chèn vào node, ở cuối,
                • node.prepend(…nodes or strings)- chèn vào node, ở đầu,
                • node.before(…nodes or strings)–- chèn ngay trước node,
                • node.after(…nodes or strings)–- chèn ngay sau node,
                • node.replaceWith(…nodes or strings)–- thay thế node.
                • node.remove()–- loại bỏ node.
              • Chuỗi văn bản được chèn “dưới dạng văn bản:
              • Ngoài ra còn có các phương thức cũ “old school”:
                • parent.appendChild(node)
                • parent.insertBefore(node, nextSibling)
                • parent.removeChild(node)
                • parent.replaceChild(newElem, node)
              • Tất cả các phương thức này trả về node.
              • Cho một số HTML vào html, hãy elem.insertAdjacentHTML(where, html) chèn nó tùy thuộc vào giá trị của where:
                • “beforebegin”- chèn html ngay trước elem,
                • “afterbegin”- chèn html vào elem, ở đầu,
                • “beforeend”- chèn htm vào elem, ở cuối,
                • “afterend”- chèn html ngay sau đó elem.
              • Ngoài ra, có những phương thức tương tự elem.insertAdjacentTextvà elem.insertAdjacentElement chèn các chuỗi và phần tử văn bản, nhưng chúng hiếm khi được sử dụng
              • Để nối HTML vào trang trước khi tải xong:
                • document.write(html)
              • Sau khi trang được tải, một cuộc gọi như vậy sẽ xóa tài liệu. Chủ yếu được thấy trong các script cũ.

              Nguồn và tài liệu tiếng anh tham khảo:

              Full series tự học Javascript từ cơ bản tới nâng cao tại đây nha .
              Nếu bạn thấy hay và hữu dụng, bạn hoàn toàn có thể tham gia những kênh sau của cafedev để nhận được nhiều hơn nữa :

              Chào thân ái và quyết thắng !

              Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!