Kiến thức Hữu ích 😍

DOM là gì? Định nghĩa, Cấu trúc & Ứng dụng trong Lập trình Web

Bạn có bao giờ thắc mắc làm thế nào một trang web có thể chào tên bạn, cập nhật giỏ hàng ngay lập tức, hay hiển thị thông báo mà không cần tải lại toàn bộ trang? Điều kỳ diệu đằng sau những tương tác linh hoạt đó chính là DOM. Hiểu được DOM là gì và cách nó hoạt động là một trong những bước đầu tiên và quan trọng nhất trên hành trình chinh phục lĩnh vực lập trình web. Nếu bạn còn mơ hồ về khái niệm này, bạn không hề đơn độc. Nhiều nhà phát triển mới bắt đầu cũng cảm thấy bối rối trước vai trò của nó.

Bài viết này của AZWEB sẽ là người bạn đồng hành, giúp bạn giải mã mọi thứ về DOM một cách đơn giản và dễ hiểu nhất. Chúng tôi sẽ cùng bạn đi từ định nghĩa cơ bản, khám phá cấu trúc cây độc đáo, học cách thao tác trực tiếp với các phần tử trên trang, cho đến việc ứng dụng nó trong các framework hiện đại như React JS là gì, Angular là gì hay Vuejs là gì. Hãy cùng nhau bắt đầu hành trình khám phá nền tảng của mọi trang web động ngay bây giờ!

Định nghĩa DOM và vai trò trong lập trình web

Để xây dựng những trang web có khả năng tương tác cao, trước hết chúng ta cần hiểu rõ công cụ cốt lõi cho phép điều đó xảy ra. Đó chính là DOM. Vậy cụ thể DOM là gì và tại sao nó lại không thể thiếu trong lập trình web?

DOM là gì?

DOM, viết tắt của Document Object Model (Mô hình Đối tượng Tài liệu), là một giao diện lập trình ứng dụng (API) cho các tài liệu HTML và XML. Nó định nghĩa cấu trúc logic của một tài liệu và cách tài liệu đó được truy cập và thao tác. Khi trình duyệt tải một trang web, nó sẽ tạo ra một mô hình DOM của trang đó. Về cơ bản, DOM biến tài liệu HTML của bạn thành một cấu trúc dạng cây gồm các đối tượng, mà JavaScript là gì có thể hiểu và tương tác.

Hãy hình dung tài liệu HTML của bạn là một bản thiết kế ngôi nhà trên giấy. Trình duyệt giống như một đội xây dựng, đọc bản thiết kế đó và xây dựng nên một mô hình 3D của ngôi nhà. Mô hình 3D này chính là DOM. Với mô hình này, bạn có thể dễ dàng chỉ vào bất kỳ phòng nào, bất kỳ bức tường hay cửa sổ nào và thay đổi chúng, ví dụ như sơn lại tường hay thay một chiếc cửa mới. Tương tự, DOM chính là cầu nối cho phép các ngôn ngữ lập trình như JavaScript “nhìn thấy” và “thay đổi” mọi thành phần trên trang web của bạn.

Hình minh họa

Vai trò của DOM trong lập trình web

Vai trò của DOM là cực kỳ quan trọng, nó là nền tảng cho gần như mọi tương tác động trên web. Nếu không có DOM, các trang web sẽ chỉ là những tài liệu tĩnh, không thể thay đổi sau khi đã được tải. DOM cung cấp một phương tiện tiêu chuẩn để các kịch bản (scripts) truy cập và cập nhật nội dung, cấu trúc, và cả phong cách (style) của một tài liệu.

Nhờ có DOM, các lập trình viên có thể:

  • Thay đổi nội dung: Cập nhật văn bản trong một tiêu đề, thay đổi hình ảnh trong một thẻ `

    Hình minh họa

    `, hay điền dữ liệu vào một bảng.

  • Thay đổi cấu trúc: Thêm các phần tử HTML mới vào trang (ví dụ: thêm một mục vào danh sách), hoặc xóa bỏ các phần tử không còn cần thiết.
  • Thay đổi giao diện: Điều chỉnh CSS của một phần tử, chẳng hạn như thay đổi màu sắc, kích thước, hoặc vị trí của nó trên trang để tạo ra các hiệu ứng hình ảnh. Bạn có thể tìm hiểu kỹ hơn về CSS là gì để nâng cao khả năng này.
  • Phản hồi tương tác người dùng: Tạo ra các sự kiện khi người dùng nhấp chuột, di chuột qua một phần tử, hoặc nhập dữ liệu vào biểu mẫu. Đây là cốt lõi của trải nghiệm người dùng tương tác. Để hiểu sâu hơn về cách hoạt động của sự kiện, xem bài viết Event là gì và DOM event là gì.

Tóm lại, DOM chính là xương sống của các trang web hiện đại, cho phép chúng trở nên sống động, linh hoạt và đáp ứng lại hành động của người dùng một cách tức thì.

Cấu trúc cây DOM từ HTML và XML

Để làm việc hiệu quả với DOM, bạn cần hiểu cách nó được cấu trúc. DOM không phải là một danh sách phẳng các phần tử, mà là một cấu trúc phân cấp phức tạp được gọi là “cây DOM”. Cấu trúc này phản ánh trực tiếp cấu trúc lồng nhau của tài liệu HTML hoặc XML của bạn.

Mô hình cây DOM

Mô hình cây DOM (DOM Tree) biểu diễn một tài liệu web dưới dạng một cây phân cấp các nút (nodes). Mỗi thành phần trong tài liệu HTML đều tương ứng với một node trong cây. Cây này bắt đầu từ một node gốc (root node), chính là đối tượng `document`, và từ đó phân nhánh ra các node con, cháu, chắt.

Có nhiều loại node khác nhau trong cây DOM, nhưng ba loại phổ biến nhất bạn sẽ gặp là:

  • Node phần tử (Element Node): Đại diện cho một thẻ HTML, ví dụ như ``, `
    `, `

    Đây là một đoạn văn.



    “`
    Cấu trúc cây DOM tương ứng sẽ trông như thế này:

    • `document`
      • ``
        • ``
          • `` <ul> <li>Text Node: “Trang Web của Tôi”</li> </ul> </li> </ul> </li> <li>`<body>` <ul> <li>`</div> <p>`.</p> <ul> <li>Để chọn thẻ `div`, bạn dùng: `const header = document.getElementById(‘header’);`</li> <li>Để chọn thẻ `h1`, bạn có thể dùng: `const title = document.querySelector(‘#header .title’);`</li> </ul> <p><img decoding="async" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/DOMDEV_LOGO.jpg/1200px-DOMDEV_LOGO.jpg" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <h3>Thay đổi nội dung và cấu trúc DOM</h3> <p>Một khi đã chọn được phần tử mong muốn, bạn có thể thực hiện vô số thay đổi. Các thao tác này có thể được chia thành ba nhóm chính: thay đổi nội dung, thay đổi thuộc tính và phong cách, và thay đổi cấu trúc.</p> <p>Dưới đây là các phương thức và thuộc tính thông dụng:</p> <ul> <li><b>Thay đổi nội dung:</b> <ul> <li>`innerHTML`: Lấy hoặc thiết lập toàn bộ nội dung HTML bên trong một phần tử. Cần cẩn thận khi dùng vì có thể gây ra lỗ hổng bảo mật XSS nếu chứa dữ liệu từ người dùng.</li> <li>`textContent`: Lấy hoặc thiết lập chỉ nội dung văn bản, bỏ qua mọi thẻ HTML. An toàn hơn `innerHTML`.</li> </ul> </li> <li><b>Thay đổi thuộc tính và style:</b> <ul> <li>`setAttribute(‘name’, ‘value’)`: Thiết lập giá trị cho một thuộc tính. Ví dụ: `element.setAttribute(‘href’, ‘https://azweb.vn’);`</li> <li>`element.style.property`: Truy cập và thay đổi các thuộc tính CSS. Ví dụ: `element.style.color = ‘blue’;` hoặc `element.style.fontSize = ’16px’;`</li> </ul> </li> <li><b>Thay đổi cấu trúc:</b> <ul> <li>`createElement(‘tagName’)`: Tạo một phần tử HTML mới.</li> <li>`appendChild(node)`: Thêm một node con vào cuối danh sách con của một phần tử cha.</li> <li>`removeChild(node)`: Xóa một node con khỏi một phần tử cha.</li> <li>`insertBefore(newNode, referenceNode)`: Chèn một node mới vào trước một node tham chiếu đã có.</li> </ul> </li> </ul> <p><b>Ví dụ thực tế:</b> Hãy thử thêm một mục mới vào danh sách.<br /> “`html</p> <ul id="my-list"> <li>Mục 1</li> </ul> <p>“`<br /> “`javascript<br /> // 1. Chọn phần tử danh sách<br /> const list = document.getElementById(‘my-list’);</p> <p>// 2. Tạo một phần tử </p> <li> mới<br /> const newItem = document.createElement(‘li’);</p> <p>// 3. Thêm nội dung văn bản cho nó<br /> newItem.textContent = ‘Mục 2’;</p> <p>// 4. Thêm phần tử mới vào cuối danh sách<br /> list.appendChild(newItem);<br /> “`<br /> Sau khi đoạn mã này chạy, danh sách của bạn sẽ được cập nhật ngay lập tức mà không cần tải lại trang.</p> <h2>Ứng dụng DOM trong phát triển web hiện đại</h2> <p>Trong thế giới web hiện đại, việc thao tác trực tiếp với DOM bằng <a href="https://azweb.com.vn/javascript-la-gi/">JavaScript thuần</a> (Vanilla JS) vẫn rất quan trọng, nhưng sự trỗi dậy của các <a href="https://azweb.com.vn/framework-la-gi-trong-lap-trinh/">framework và thư viện</a> đã thay đổi cách chúng ta tiếp cận nó. DOM không chỉ là công cụ để thay đổi trang mà còn là nền tảng cho các kiến trúc phức tạp hơn, giúp tạo ra trải nghiệm người dùng mượt mà và hiệu quả.</p> <h3>DOM trong các framework và thư viện</h3> <p>Các framework JavaScript phổ biến như <b><a href="https://azweb.com.vn/react-js-la-gi-va-uu-diem/">React</a>, <a href="https://azweb.com.vn/angular-la-gi-tong-quan/">Angular</a>, và <a href="https://azweb.com.vn/vuejs-la-gi-huong-dan-su-dung/">Vue.js</a></b> đều được xây dựng để đơn giản hóa và tối ưu hóa quá trình tương tác với DOM. Thay vì để lập trình viên phải tự viết mã để truy vấn và thay đổi từng phần tử, các framework này cung cấp một lớp trừu tượng. Bạn chỉ cần khai báo “trạng thái” (state) của ứng dụng, và framework sẽ tự động cập nhật DOM để phản ánh trạng thái đó.</p> <p>Một trong những khái niệm đột phá nhất được giới thiệu bởi React là <b>Virtual DOM (DOM ảo)</b>. DOM ảo là một bản sao nhẹ của DOM thật, được lưu trong bộ nhớ. Khi trạng thái của ứng dụng thay đổi, framework sẽ tạo ra một cây DOM ảo mới và so sánh nó với cây DOM ảo trước đó (quá trình này gọi là “diffing”). Sau đó, nó sẽ tính toán ra cách hiệu quả nhất để cập nhật DOM thật với số lượng thay đổi tối thiểu. Cách tiếp cận này giúp tránh các thao tác DOM không cần thiết và tốn kém, từ đó cải thiện đáng kể hiệu suất, đặc biệt là trong các ứng dụng phức tạp có dữ liệu thay đổi liên tục.</p> <p><img decoding="async" src="https://www.w3.org/TR/WD-DOM/table.gif" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <h3>DOM và tương tác người dùng</h3> <p>Mọi tính năng tương tác mà bạn yêu thích trên web đều dựa vào DOM. DOM cho phép chúng ta lắng nghe các “<a href="https://azweb.com.vn/event-la-gi-trong-javascript/">sự kiện</a>” (events) do người dùng gây ra và thực thi các đoạn mã để phản hồi lại.</p> <p>Một số ví dụ điển hình về ứng dụng của DOM trong việc xây dựng tính năng tương tác:</p> <ul> <li><b>Xác thực biểu mẫu (Form Validation):</b> Khi người dùng nhập dữ liệu vào một biểu mẫu, JavaScript có thể sử dụng DOM để kiểm tra tính hợp lệ của dữ liệu ngay lập tức. Nếu có lỗi, nó có thể thay đổi style của ô nhập liệu (ví dụ: viền đỏ) và hiển thị một thông báo lỗi bên dưới mà không cần gửi dữ liệu đến máy chủ.</li> <li><b>Hiệu ứng và hoạt ảnh (Animations):</b> Bằng cách thay đổi các thuộc tính CSS (như `transform`, `opacity`, `position`) của các phần tử DOM theo thời gian, chúng ta có thể tạo ra các hiệu ứng chuyển động mượt mà, từ các menu xổ xuống đơn giản đến các hoạt ảnh phức tạp. Tìm hiểu thêm <a href="https://azweb.com.vn/css-la-gi/">CSS là gì</a> để cải thiện kỹ năng với hiệu ứng này.</li> <li><b>Sự kiện nhấp chuột (Click Events):</b> Khi người dùng nhấp vào một nút, một liên kết, hay một hình ảnh, chúng ta có thể bắt sự kiện `click` và thực thi một hành động tương ứng, chẳng hạn như hiển thị một cửa sổ pop-up, tải thêm nội dung, hoặc gửi một yêu cầu đến máy chủ.</li> <li><b>Kéo và thả (Drag and Drop):</b> DOM cho phép xây dựng các giao diện kéo thả trực quan, giúp người dùng sắp xếp lại các mục trong danh sách hoặc tải tệp lên một cách dễ dàng.</li> </ul> <p>Chất lượng của các tương tác này ảnh hưởng trực tiếp đến trải nghiệm người dùng (UX). Một trang web phản hồi nhanh, mượt mà và trực quan sẽ giữ chân người dùng tốt hơn nhiều so với một trang web chậm chạp và khó sử dụng.</p> <h2>Các công cụ và phương pháp làm việc với DOM hiệu quả</h2> <p>Làm việc với DOM không chỉ là biết các phương thức. Để trở thành một lập trình viên web chuyên nghiệp, bạn cần biết cách sử dụng các công cụ hỗ trợ và áp dụng các phương pháp tối ưu để đảm bảo mã của bạn vừa dễ gỡ lỗi, vừa có hiệu suất cao.</p> <h3>Công cụ hỗ trợ thao tác DOM</h3> <p>Hầu hết các trình duyệt hiện đại đều tích hợp sẵn bộ công cụ dành cho nhà phát triển (Developer Tools hay DevTools), đây là người bạn thân thiết của bất kỳ ai làm việc với DOM.</p> <ul> <li><b>Bảng Elements (Phần tử):</b> Trong Chrome DevTools (hoặc Inspector trong Firefox), tab Elements cho phép bạn xem cấu trúc cây DOM của trang web theo thời gian thực. Bạn có thể mở rộng các node, xem các thuộc tính, và thấy các thay đổi ngay khi chúng xảy ra. Bạn thậm chí có thể chỉnh sửa trực tiếp HTML, CSS ngay tại đây để thử nghiệm nhanh các thay đổi về giao diện mà không cần sửa mã nguồn.</li> <li><b>Bảng Console (Bảng điều khiển):</b> Console là nơi bạn có thể viết và thực thi các lệnh JavaScript trực tiếp trên trang. Đây là một cách tuyệt vời để kiểm tra các bộ chọn DOM (`querySelector`), thử nghiệm các phương thức thao tác, và xem kết quả ngay lập tức.</li> </ul> <p><img decoding="async" src="https://www.domd.pl/assets2/static/domd_logo_1200x630.jpg" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <p>Ngoài DevTools, các thư viện như <a href="https://azweb.com.vn/jquery-la-gi/">jQuery</a> từng rất phổ biến vì nó đã đơn giản hóa đáng kể cú pháp thao tác DOM. Mặc dù ngày nay JavaScript thuần đã có các phương thức mạnh mẽ tương đương (`querySelector`, `classList`…), hiểu biết về jQuery vẫn hữu ích khi làm việc với các dự án cũ. Tuy nhiên, đối với các dự án mới, việc sử dụng JavaScript thuần thường được khuyến khích để giảm sự phụ thuộc và tối ưu hóa tốc độ tải trang.</p> <h3>Phương pháp và tips làm việc với DOM</h3> <p>Thao tác với DOM là một trong những tác vụ tốn kém nhất về mặt hiệu suất trong trình duyệt. Mỗi khi bạn thay đổi DOM, trình duyệt có thể phải thực hiện các quá trình tính toán lại bố cục (reflow) và vẽ lại giao diện (repaint). Vì vậy, làm việc hiệu quả với DOM đồng nghĩa với việc giảm thiểu các thao tác không cần thiết.</p> <ul> <li><b>Tối ưu truy cập DOM:</b> Tránh truy vấn lặp đi lặp lại cùng một phần tử trong vòng lặp. Thay vào đó, hãy truy vấn một lần và lưu kết quả vào một biến để tái sử dụng (gọi là “caching” phần tử DOM).</li> <li><b>Sử dụng Event Delegation:</b> Thay vì gắn một trình xử lý sự kiện (event listener) cho mỗi phần tử con trong một danh sách lớn, hãy gắn một trình xử lý duy nhất cho phần tử cha. Khi một sự kiện xảy ra trên phần tử con, nó sẽ “nổi bọt” (bubble up) lên phần tử cha. Kỹ thuật này giúp giảm bộ nhớ và cải thiện hiệu suất. Tìm hiểu thêm trong bài <a href="https://azweb.com.vn/event-la-gi-trong-javascript/">Event là gì</a>.</li> <li><b>Gom nhóm các thay đổi:</b> Nếu bạn cần thực hiện nhiều thay đổi DOM cùng lúc (ví dụ: thêm 100 hàng vào một bảng), đừng thực hiện chúng từng cái một. Thay vào đó, hãy sử dụng một <em>DocumentFragment</em>. Đây là một đối tượng DOM nhẹ, không thuộc cây DOM chính. Bạn có thể thêm tất cả các thay đổi vào fragment này, sau đó chỉ cần chèn fragment vào DOM thật một lần duy nhất, giảm thiểu đáng kể số lần reflow và repaint.</li> <li><b>Bảo mật khi thao tác DOM:</b> Luôn cảnh giác với các cuộc tấn công Cross-Site Scripting (XSS). Không bao giờ sử dụng `innerHTML` để chèn nội dung do người dùng cung cấp trực tiếp vào trang. Thay vào đó, hãy sử dụng `textContent` để chèn dưới dạng văn bản thuần túy, hoặc sử dụng các thư viện chuyên dụng để “làm sạch” (sanitize) dữ liệu đầu vào trước khi hiển thị. Bạn có thể tham khảo thêm bài viết <a href="https://azweb.com.vn/debug-la-gi-huong-dan/">Debug là gì</a> để tìm hiểu cách xử lý lỗi và bảo mật trong JavaScript.</li> </ul> <h2>Common Issues/Troubleshooting</h2> <p>Khi làm việc với DOM, ngay cả những lập trình viên kinh nghiệm cũng có thể gặp phải những vấn đề khó chịu. Hiểu rõ các lỗi thường gặp và cách khắc phục sẽ giúp bạn tiết kiệm rất nhiều thời gian và công sức gỡ lỗi.</p> <p><img decoding="async" src="https://workai.com/page/uploads/2024/12/1024px-DOMDEV_LOGO-1.png" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <h3>DOM không được cập nhật sau thao tác JavaScript</h3> <p>Đây có lẽ là vấn đề phổ biến nhất mà người mới bắt đầu gặp phải. Bạn viết một đoạn mã JavaScript để thay đổi một phần tử, nhưng khi chạy, không có gì xảy ra và console cũng không báo lỗi. Đâu là nguyên nhân?</p> <ul> <li><b>Nguyên nhân 1: Script chạy trước khi DOM được tải xong.</b> Trình duyệt phân tích tệp HTML từ trên xuống dưới. Nếu bạn đặt thẻ `<script>` của mình trong phần `<head>` mà không có thuộc tính `defer` hay `async`, mã JavaScript sẽ được thực thi ngay lập tức. Tại thời điểm đó, phần `<body>` của trang có thể chưa được trình duyệt phân tích xong, do đó phần tử bạn đang cố gắng truy cập chưa tồn tại trong DOM.</li> <li><b>Cách khắc phục:</b> <ul> <li><b>Cách đơn giản nhất:</b> Di chuyển thẻ `<script>` của bạn xuống ngay trước thẻ đóng `</body>`. Điều này đảm bảo toàn bộ cây DOM đã được xây dựng trước khi script của bạn bắt đầu chạy.</li> <li><b>Cách chuyên nghiệp hơn:</b> Giữ script trong `<head>` và thêm sự kiện `DOMContentLoaded`. Sự kiện này sẽ được kích hoạt khi tài liệu HTML ban đầu đã được tải và phân tích xong, không cần đợi stylesheet, hình ảnh tải xong.<br /> ```javascript<br /> document.addEventListener('DOMContentLoaded', function() {<br /> // Toàn bộ mã thao tác DOM của bạn đặt ở đây<br /> const title = document.getElementById('my-title');<br /> if (title) {<br /> title.textContent = 'Tiêu đề đã được cập nhật!';<br /> }<br /> });<br /> ``` </li> </ul> </li> <li><b>Nguyên nhân 2: Sai bộ chọn (selector).</b> Đôi khi vấn đề chỉ đơn giản là một lỗi chính tả trong `id`, `class`, hoặc cú pháp `querySelector` của bạn. Hãy kiểm tra lại cẩn thận xem bộ chọn trong mã JavaScript có khớp chính xác với HTML của bạn hay không. Sử dụng `console.log()` để in ra giá trị của biến chứa phần tử. Nếu nó trả về `null`, có nghĩa là bộ chọn của bạn đã không tìm thấy gì.</li> </ul> <h3>Vấn đề hiệu suất khi thao tác DOM quá nhiều</h3> <p>Ứng dụng của bạn hoạt động đúng chức năng, nhưng lại có cảm giác chậm chạp, giật lag, đặc biệt là khi có nhiều dữ liệu hoặc tương tác phức tạp. Nguyên nhân rất có thể đến từ việc thao tác DOM quá mức cần thiết.</p> <ul> <li><b>Nguyên nhân:</b> Mỗi lần bạn thay đổi một thuộc tính hình học (chiều rộng, vị trí) hoặc cấu trúc của một phần tử, trình duyệt phải thực hiện "reflow" (tính toán lại bố cục của trang). Sau đó, nó phải thực hiện "repaint" (vẽ lại các điểm ảnh trên màn hình). Đây là những quá trình rất tốn tài nguyên. Nếu bạn thực hiện hàng trăm thay đổi DOM trong một vòng lặp, bạn sẽ gây ra hàng trăm lần reflow/repaint, làm cho trình duyệt bị quá tải.</li> <li><b>Cách khắc phục:</b> <ul> <li><b>Gom nhóm các thao tác:</b> Như đã đề cập ở phần trước, hãy sử dụng `DocumentFragment` để xây dựng một phần của cây DOM trong bộ nhớ trước, sau đó mới chèn vào DOM thật bằng một thao tác duy nhất.</li> <li><b>Hạn chế thay đổi style trực tiếp trong JS:</b> Thay vì thay đổi nhiều thuộc tính style riêng lẻ (`element.style.color`, `element.style.fontSize`), hãy định nghĩa một lớp CSS mới. Sau đó, chỉ cần dùng JavaScript để thêm hoặc xóa lớp đó khỏi phần tử (`element.classList.add('new-style')`). Việc này chỉ gây ra một lần reflow/repaint duy nhất.</li> <li><b>Tối ưu hiệu ứng:</b> Đối với các hoạt ảnh, hãy ưu tiên sử dụng các thuộc tính CSS như `transform` và `opacity`. Các trình duyệt hiện đại có thể tối ưu hóa (hardware acceleration) cho các thuộc tính này, giúp chúng chạy mượt mà hơn nhiều so với việc thay đổi `top`, `left`, `width` hay `height`.</li> </ul> </li> </ul> <h2>Best Practices</h2> <p>Để viết mã JavaScript tương tác với DOM một cách sạch sẽ, hiệu quả và an toàn, việc tuân thủ các phương pháp hay nhất (best practices) là vô cùng quan trọng. Những nguyên tắc này không chỉ giúp cải thiện hiệu suất mà còn làm cho mã của bạn dễ đọc, dễ bảo trì và ít bị lỗi hơn.</p> <p><img decoding="async" src="https://www.nilebits.com/wp-content/uploads/2024/07/Was-DOM-Invented-with-HTML-1140x445.png" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <p>Dưới đây là danh sách các best practices quan trọng mà bạn nên áp dụng khi làm việc với DOM:</p> <ul> <li><b>Hạn chế thao tác DOM trực tiếp:</b> Mỗi tương tác với DOM đều có chi phí. Hãy cố gắng giảm thiểu số lần bạn đọc hoặc ghi vào DOM. Gom nhóm các thay đổi và cập nhật một lần duy nhất khi có thể.</li> <li><b>Lưu trữ (Cache) các phần tử DOM:</b> Nếu bạn cần truy cập một phần tử nhiều lần, đừng gọi `getElementById` hay `querySelector` mỗi lần. Hãy gọi một lần và lưu kết quả vào một biến. Điều này giúp tránh việc phải duyệt lại toàn bộ cây DOM một cách không cần thiết. Có thể tham khảo chi tiết tại bài viết <a href="https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/">Dom là gì cấu trúc và ứng dụng</a>.</li> <li><b>Sử dụng Event Delegation cho các danh sách lớn:</b> Thay vì gắn hàng trăm trình xử lý sự kiện cho mỗi mục trong danh sách, hãy gắn một trình xử lý duy nhất cho phần tử cha. Kỹ thuật này giúp tiết kiệm bộ nhớ và làm cho ứng dụng của bạn nhanh hơn. Xem thêm trong bài <a href="https://azweb.com.vn/event-la-gi-trong-javascript/">Event là gì trong JavaScript</a>.</li> <li><b>Không bao giờ tin tưởng dữ liệu người dùng:</b> Luôn coi dữ liệu từ người dùng là không an toàn. Để tránh các cuộc tấn công Cross-Site Scripting (XSS), không bao giờ chèn chuỗi HTML từ người dùng trực tiếp bằng `innerHTML`. Thay vào đó, hãy sử dụng `textContent` để hiển thị văn bản hoặc dùng các thư viện để làm sạch dữ liệu trước khi đưa vào DOM.</li> <li><b>Sử dụng các phương thức hiện đại:</b> Ưu tiên sử dụng `querySelector` và `querySelectorAll` vì chúng linh hoạt và mạnh mẽ hơn các phương thức cũ như `getElementsByTagName` hay `getElementsByClassName`. Chúng cũng trả về các NodeList tĩnh, ít gây ra các lỗi không mong muốn hơn HTMLCollection động.</li> <li><b>Tận dụng DevTools để gỡ lỗi:</b> Thường xuyên sử dụng bảng Elements và Console trong công cụ phát triển của trình duyệt. Đây là những công cụ vô giá để kiểm tra cấu trúc DOM, thử nghiệm các bộ chọn, và gỡ lỗi mã JavaScript của bạn trong thời gian thực. Bạn có thể xem thêm bài viết <a href="https://azweb.com.vn/debug-la-gi-huong-dan/">Debug là gì</a> để nâng cao khả năng gỡ lỗi.</li> <li><b>Tách biệt JavaScript khỏi HTML và CSS:</b> Tránh sử dụng các thuộc tính inline như `onclick` trong HTML hoặc chỉnh sửa quá nhiều style trực tiếp trong JavaScript. Thay vào đó, hãy giữ mã JavaScript trong các tệp `.js` riêng biệt và quản lý style thông qua việc thêm/xóa các lớp CSS. Điều này giúp mã nguồn của bạn có tổ chức và dễ quản lý hơn.</li> </ul> <p><img decoding="async" src="https://www.domd.pl/assets2/images/timeline/logo1.png" alt="Hình minh họa" style="max-width:100%; height:auto; margin-top:10px;"></p> <h2>Kết luận</h2> <p>Qua bài viết này, chúng ta đã cùng nhau thực hiện một hành trình chi tiết để khám phá <a href="https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/">DOM (Document Object Model)</a>. Từ định nghĩa cơ bản, cấu trúc cây phân cấp, cho đến các phương thức thao tác và ứng dụng trong thực tế, hy vọng rằng bạn đã có một cái nhìn rõ ràng và toàn diện hơn về khái niệm nền tảng này.</p> <p>Điểm mấu chốt cần nhớ là: DOM chính là cây cầu nối giữa tài liệu HTML tĩnh và ngôn ngữ lập trình JavaScript, cho phép chúng ta tạo ra những trang web động, linh hoạt và có khả năng tương tác cao. Việc hiểu và làm chủ DOM không chỉ là một kỹ năng cơ bản mà còn là chìa khóa để mở ra cánh cửa đến với thế giới lập trình web hiện đại. Nắm vững cách truy cập, thay đổi và tối ưu hóa các thao tác DOM sẽ giúp bạn xây dựng những ứng dụng web nhanh hơn, hiệu quả hơn và mang lại trải nghiệm tốt hơn cho người dùng.</p> <p>Đừng chỉ dừng lại ở việc đọc lý thuyết. Cách tốt nhất để củng cố kiến thức là thực hành. AZWEB khuyến khích bạn hãy thử mở một trình soạn thảo mã, tạo một tệp HTML đơn giản và bắt đầu thực hành các thao tác DOM cơ bản ngay hôm nay. Hãy thử thay đổi một dòng chữ, thêm một phần tử mới vào danh sách, hoặc tạo một hiệu ứng đơn giản khi nhấp chuột. Mỗi bước thực hành nhỏ sẽ giúp bạn trở nên tự tin hơn rất nhiều. Nếu có bất kỳ thắc mắc nào, đừng ngần ngại liên hệ với đội ngũ chuyên gia tại AZWEB để được hỗ trợ.</p> <p>Khi bạn đã cảm thấy thoải mái với DOM, hãy tìm hiểu sâu hơn về các khái niệm nâng cao như Virtual DOM, Shadow DOM và cách các framework như <a href="https://azweb.com.vn/react-js-la-gi-va-uu-diem/">React JS là gì</a> hay <a href="https://azweb.com.vn/vuejs-la-gi-huong-dan-su-dung/">Vuejs là gì</a> sử dụng chúng để tối ưu hóa hiệu suất. Chúc bạn thành công trên con đường trở thành một nhà phát triển web chuyên nghiệp!</p> <div class="kk-star-ratings kksr-auto kksr-align-right kksr-valign-bottom" data-payload='{"align":"right","id":"1156","slug":"default","valign":"bottom","ignore":"","reference":"auto","class":"","count":"0","legendonly":"","readonly":"","score":"0","starsonly":"","best":"5","gap":"5","greet":"Đánh giá","legend":"0\/5 - (0 Đánh giá)","size":"24","title":"DOM là gì? Định nghĩa, Cấu trúc \u0026amp; Ứng dụng trong Lập trình Web","width":"0","_legend":"{score}\/{best} - ({count} Đánh giá)","font_factor":"1.25"}'> <div class="kksr-stars"> <div class="kksr-stars-inactive"> <div class="kksr-star" data-star="1" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="2" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="3" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="4" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" data-star="5" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> </div> <div class="kksr-stars-active" style="width: 0px;"> <div class="kksr-star" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> <div class="kksr-star" style="padding-right: 5px"> <div class="kksr-icon" style="width: 24px; height: 24px;"></div> </div> </div> </div> <div class="kksr-legend" style="font-size: 19.2px;"> <span class="kksr-muted">Đánh giá</span> </div> </div> <hr class="mt-0 mb-5"> <div class="row"> <div class="col-md-6"> </div> <div class="col-md-6"> <div class="post_share_link"> <ul class="social_icons_block unordered_list justify-content-md-end"> <!-- Facebook Share --> <li> <a class="rounded-circle" href="https://www.facebook.com/sharer/sharer.php?u=https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/" target="_blank" title="Share on Facebook" rel="nofollow noindex"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_facebook.svg" alt="Icon Facebook"> </a> </li> <!-- Twitter Share --> <li> <a class="rounded-circle" href="https://twitter.com/intent/tweet?url=https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/&text=DOM là gì? Định nghĩa, Cấu trúc & Ứng dụng trong Lập trình Web" target="_blank" title="Share on Twitter" rel="nofollow noindex"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_twitter_x.svg" alt="Icon Twitter X"> </a> </li> <!-- LinkedIn Share --> <li> <a class="rounded-circle" href="https://www.linkedin.com/shareArticle?mini=true&url=https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/&title=DOM là gì? Định nghĩa, Cấu trúc & Ứng dụng trong Lập trình Web" target="_blank" title="Share on LinkedIn" rel="nofollow noindex"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_linkedin.svg" alt="Icon Linkedin"> </a> </li> <li> <a class="rounded-circle" href="javascript:;" target="_blank" title="Share on Instagram"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_instagram.svg" alt="Icon Instagram" rel="nofollow noindex"> </a> </li> </ul> </div> </div> </div> <div class="post_author_box"> <div class="author_image"> <img alt='' src='https://secure.gravatar.com/avatar/0f4c430f219a66ca31f783c9ecc73624bbc305fb8a94f0c2fcf579301db31116?s=80&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/0f4c430f219a66ca31f783c9ecc73624bbc305fb8a94f0c2fcf579301db31116?s=160&d=mm&r=g 2x' class='avatar avatar-80 photo' height='80' width='80' decoding='async'/> </div> <div class="author_content"> <h3 class="author_name">Bùi Mạnh Đức</h3> <!-- Lấy tên tác giả --> <!-- Lấy vai trò tác giả nếu có trường 'role', nếu không có thì hiển thị 'Content Editor' --> <h4 class="author_designation">AZWEB Team</h4> <!-- Mô tả tác giả --> <p>Hơn 10+ năm kinh nghiệm trong lĩnh vực thiết kế website và SEO, với hơn 200+ dự án thành công.</p> <!-- Các icon mạng xã hội --> <ul class="author_social_icons unordered_list"> </ul> </div> </div> <div class="other_posts_nav"> <a href="https://azweb.com.vn/data-analyst-la-gi/"> <i class="fa-regular fa-arrow-left-long"></i> <span> <strong>Data Analyst là gì? Vai trò, kỹ năng và cơ hội nghề nghiệp hấp dẫn</strong> <small>06/07/2025</small> </span> </a> <!-- Link đến trang Blog --> <a href="https://azweb.com.vn/dom-la-gi-cau-truc-va-ung-dung/"> <i class="fa-solid fa-grid-2"></i> </a> <a href="https://azweb.com.vn/editor-la-gi-12/"> <span> <strong>Editor là gì? Vai trò, quy trình làm việc và bí quyết thành công</strong> <small>06/07/2025</small> </span> <i class="fa-regular fa-arrow-right-long"></i> </a> </div> <hr class="m-0"> </div> <div class="col-lg-4"> <aside class="sidebar ps-lg-5"> <div class="search_form"> <h3 class="sidebar_widget_title">Tìm kiếm</h3> <div class="form-group"> <form role="search" method="get" class="search-form" action="https://azweb.com.vn/"> <input class="form-control" type="search" name="s" placeholder="Nhập từ khóa..." value=""> <button type="submit"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_search.svg" alt="Search Icon"> </button> </form> </div> </div> <div class="post_list_block"> <h3 class="sidebar_widget_title">TOP XEM NHIỀU</h3> <ul class="unordered_list_block"> <li> <h3 class="post_title"> <a href="https://azweb.com.vn/share-mien-phi-plugin-tinh-toan-dien-mat-troi-2-0/">[Share miễn phí] Plugin Tính toán Điện mặt trời 2.0</a> </h3> <ul class="post_meta unordered_list"> <li> <a href="javascript:;"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_calendar.svg" alt="Icon Calendar"> 12/03/2025 </a> </li> <li> <a href="javascript:;"><i class="fa-solid fa-eye"></i> 723</a> </li> </ul> </li> <li> <h3 class="post_title"> <a href="https://azweb.com.vn/share-plugin-tich-hop-viettel-post-cho-woocommerce/">[Share] Plugin tích hợp Viettel Post cho Woocommerce</a> </h3> <ul class="post_meta unordered_list"> <li> <a href="javascript:;"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_calendar.svg" alt="Icon Calendar"> 11/03/2025 </a> </li> <li> <a href="javascript:;"><i class="fa-solid fa-eye"></i> 618</a> </li> </ul> </li> <li> <h3 class="post_title"> <a href="https://azweb.com.vn/share-plugin-review-wordpress-thuan-viet-tot-nhat/">[SHARE] Plugin Review WordPress thuần Việt tốt nhất</a> </h3> <ul class="post_meta unordered_list"> <li> <a href="javascript:;"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_calendar.svg" alt="Icon Calendar"> 21/02/2025 </a> </li> <li> <a href="javascript:;"><i class="fa-solid fa-eye"></i> 583</a> </li> </ul> </li> </ul> </div> </aside> </div> </div> </div> </div> </section> <!-- Blog Details Section - End ================================================== --> </main> <!-- Site Footer - Start ================================================== --> <footer class="site_footer footer_layout_2 section_decoration" style="background-image: url('https://azweb.com.vn/wp-content/themes/azweb/assets/images/shapes/bg_pattern_3.svg');"> <div class="decoration_item shape_image_1"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/shapes/shape_space_2.svg" alt="AZWEB Shape"> </div> <div class="container"> <div class="service_pill_carousel swiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/hosting-gia-re/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Hosting Giá Rẻ</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/thiet-ke-website/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Thiết kế website</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/xu-ly-ma-doc-website/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Xử Lý Mã Độc Website</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/tang-toc-website/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Tăng Tốc Website</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/kho-plugin-wordpress/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Kho Plugin WordPress</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/khoa-hoc-wordpress/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Khóa Học WordPress</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/quan-tri-website/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Quản Trị Website</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> <div class="swiper-slide"> <a class="service_pill_block" href="https://azweb.com.vn/kho-giao-dien-wordpress/"> <!-- Liên kết đến chi tiết dịch vụ --> <i class="fa-solid fa-check"></i> <span>Kho Theme WordPress</span> <!-- Hiển thị tiêu đề dịch vụ --> </a> </div> </div> </div> <div class="footer_main_content"> <div class="row justify-content-lg-between"> <div class="col-lg-2 col-md-6"> <div class="footer_widget"> <h3 class="footer_info_title">Về AZWEB</h3> <ul class="icon_list unordered_list_block"><li id="menu-item-24" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-24"><a href="/">Trang chủ</a></li> <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://azweb.com.vn/gioi-thieu/">Giới thiệu</a></li> <li id="menu-item-177" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-177"><a href="https://azweb.com.vn/du-an-noi-bat/">Portfolio</a></li> <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="https://azweb.com.vn/blog/">Blog</a></li> <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://azweb.com.vn/lien-he/">Liên hệ</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6"> <div class="footer_widget"> <h3 class="footer_info_title">Dịch vụ nổi bật</h3> <ul class="icon_list unordered_list_block"><li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-43"><a href="https://azweb.com.vn/thiet-ke-website/">Thiết kế website</a></li> <li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-41"><a href="https://azweb.com.vn/quan-tri-website/">Quản Trị Website</a></li> <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-37"><a href="https://azweb.com.vn/hosting-gia-re/">Hosting Giá Rẻ</a></li> <li id="menu-item-876" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-876"><a href="https://buimanhduc.com/kho-theme-wordpress/">Kho 1000+ Giao Diện</a></li> <li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-42"><a href="https://azweb.com.vn/tang-toc-website/">Tăng Tốc Website</a></li> <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-39"><a href="https://azweb.com.vn/kho-plugin-wordpress/">Kho Plugin WordPress</a></li> <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-40"><a href="https://azweb.com.vn/khoa-hoc-wordpress/">Khóa Học WordPress</a></li> <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-dich_vu menu-item-44"><a href="https://azweb.com.vn/xu-ly-ma-doc-website/">Xử Lý Mã Độc Website</a></li> </ul> </div> </div> <div class="col-lg-2 col-md-6"> <div class="footer_widget"> <h3 class="footer_info_title">Dự án tiêu biểu</h3> <ul class="icon_list unordered_list_block"><li id="menu-item-178" class="menu-item menu-item-type-post_type menu-item-object-du_an menu-item-178"><a href="https://azweb.com.vn/cae-xanh-phantom/">CAE Xanh Phantom</a></li> <li id="menu-item-179" class="menu-item menu-item-type-post_type menu-item-object-du_an menu-item-179"><a href="https://azweb.com.vn/liberkey/">Liberkey</a></li> <li id="menu-item-180" class="menu-item menu-item-type-post_type menu-item-object-du_an menu-item-180"><a href="https://azweb.com.vn/y-khoa-astarte/">Y khoa Astarte</a></li> </ul> </div> </div> <div class="col-lg-4 col-md-6"> <div class="footer_widget pe-lg-3"> <h2 class="footer_info_title">Cập Nhật Tin Tức</h2> <p> Hãy đăng ký Email để nhận thông tin mới nhất từ AZWEB. </p> <div class="countdown"> </div> <form class="footer_newslatter_2" action="#"> <label for="footer_mail_input"> <img src="https://azweb.com.vn/wp-content/themes/azweb/assets/images/icons/icon_mail_2.svg" alt="Mail SVG Icon"> </label> <input id="footer_mail_input" type="email" name="email" placeholder="Nhập Email"> <button type="submit">GỬI</button> </form> <ul class="social_icons_block unordered_list"> <li> <a href="javascript:;"> <i class="fa-brands fa-facebook-f"></i> </a> </li> <li> <a href="javascript:;"> <i class="fa-brands fa-twitter"></i> </a> </li> <li> <a href="javascript:;"> <i class="fa-brands fa-linkedin-in"></i> </a> </li> <li> <a href="javascript:;"> <i class="fa-brands fa-youtube"></i> </a> </li> </ul> </div> </div> </div> </div> </div> <div class="footer_bottom" style="background-image: url('https://azweb.com.vn/wp-content/themes/azweb/assets/images/shapes/shape_space_6.svg');"> <div class="container text-center"> <p class="copyright_text m-0"> Bản quyền thuộc về AZWEB. </p> </div> </div> </footer> <!-- Site Footer - End ================================================== --> <!-- Back To Top - Start --> <div class="backtotop"> <a href="javascript:;" class="scroll"> <i class="fa-solid fa-arrow-up"></i> </a> </div> <!-- Back To Top - End --> </div> <!-- Body Wrap - End --> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"\/*"},{"not":{"href_matches":["\/wp-*.php","\/wp-admin\/*","\/wp-content\/uploads\/*","\/wp-content\/*","\/wp-content\/plugins\/*","\/wp-content\/themes\/azweb\/*","\/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" id="kk-star-ratings-js-extra"> /* <![CDATA[ */ var kk_star_ratings = {"action":"kk-star-ratings","endpoint":"https:\/\/azweb.com.vn\/wp-admin\/admin-ajax.php","nonce":"7c122b6f27"}; /* ]]> */ </script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/plugins/kk-star-ratings/src/core/public/js/kk-star-ratings.min.js?ver=5.4.10.2" id="kk-star-ratings-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/jquery.min.js?ver=1.0" id="jquery-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/azweb.js?ver=1.0" id="azweb-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/popper.min.js?ver=1.0" id="popper-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/bootstrap.min.js?ver=1.0" id="bootstrap-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/bootstrap-dropdown-ml-hack.min.js?ver=1.0" id="bootstrap-dropdown-hack-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/swiper-bundle.min.js?ver=1.0" id="swiper-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/parallaxie.js?ver=1.0" id="parallaxie-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/parallax-scroll.js?ver=1.0" id="parallax-scroll-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/wow.min.js?ver=1.0" id="wow-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/countdown.js?ver=1.0" id="countdown-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/magnific-popup.min.js?ver=1.0" id="magnific-popup-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/appear.min.js?ver=1.0" id="appear-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/odometer.min.js?ver=1.0" id="odometer-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/circularProgressBar.min.js?ver=1.0" id="circular-progress-bar-js-js"></script> <script type="text/javascript" src="https://azweb.com.vn/wp-content/themes/azweb/assets/js/main.js?ver=1.0" id="main-js-js"></script> </body> </html>