Outerhtml là gì

Mục Lục

1. DOM là gì?
2. HTML DOM là gì?
3. DOM Selector
4. Thao tác với DOM trong JavaScript
Tổng kết

Nội dung chính Show

1. DOM là gì?
2. HTML DOM là gì?
3. DOM Selector
3.1. Nhắm đến phần tử DOM hàng đầu
3.1. Nhắm đến phần tử DOM bằng ID
3.2. Nhắm đến phần tử DOM bằng Class Name
3.3. Nhắm đến phần tử DOM bằng Tag Name
3.3. Nhắm đến phần tử DOM bằng CSS Selector
4. Thao tác với DOM trong JavaScript
4.1. Thao tác với DOM sử dụng thuộc tính id
4.2. Thao tác với DOM sử dụng thuộc tính className
4.3. Thao tác với DOM sử dụng thuộc tính tagName
4.4. Thao tác với DOM sử dụng thuộc tính innerHTML
4.5. Thao tác với DOM sử dụng thuộc tính outerHTML
4.6. Thao tác với DOM sử dụng thuộc tính attributes
4.7. Thao tác với DOM sử dụng thuộc tính style
4.8. Một số thuộc tính quan hệ
4.9. Một số phương thức phổ biến để thao tác với DOM khác
Tổng kết
Video liên quan

Một công việc phổ biến khi làm việc với JavaScript phía Web Front end là thao tác với DOM. Vậy DOM là gì? Thao tác với DOMnhư thế nào? Hãy cùng tìm hiểu trong bài học này nhé.

1. DOM là gì?

DOM là viết tắt của từ Document Object Model (khá khó hiểu đúng không nào? :D)

Giải thích một chút DOM là một giao diện lập trình ứng dụng (API) để thao tác với các tài liệu HTML và XML.

DOM đại diện cho một tài liệu dưới dạng một cây tài liệu(Document Tree) gồm có nhiều nốt / nút / node (gì cũng được :v).

Nó cung cấp API cho phép bạn có thể thêm, sửa và xóa các thành phần của cây tài liệu một cách hiệu quả.

> Chú ý: DOM là một trình xử lý tài liệu HTML và XML đa nền tảng (cross-platform) mà không phục thuộc vào ngôn ngữ.

2. HTML DOM là gì?

Khi một trang web được tải về, trình duyệt sẽ tạo ra một Document Object Model (DOM).

Đối với HTML DOM thì mọi thành phần đều được xem là node, được biểu diễn trên 1 cây cấu trúc gọi là cây DOM.

Các phần tử khác nhau sẽ được phân loại node khác nhau.

Có 3 loại node chính:

Node gốc (Document node): Chính là tài liệu HTML

Node phần tử (Element node): Biểu diễn cho 1 phần tử của HTML

Node văn bản (Text node): mỗi đoạn ký tự trong tài liệu HTML, bên trong 1 tag HTML đều là một node văn bản.Đó có thể là tên trang web trong thẻ , tên heading 1 trong thẻ <h2>, hay một đoạn văn bản <p>.</span></li> </ul> <ul> <li> <span style="font-size:18px;">Ngoài ra còn có <strong>node thuộc tính</strong> (attribute node) và <strong>node chú thích</strong> (comment node).</span></li> </ul> <br> <span style="font-size:18px;">Ví dụ một cây DOM cơ bản:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">html</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span>DOMinJavaScript<span style="color: #808080;"></</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span>Xinchàocácbạn<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">html</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Đây là sơ đồ minh họa của nó:</span><br> <p style="text-align: center;"> <br> <span style="font-size:18px;"><div class="imgBox"><img alt="Outerhtml là gì" data-orgimg="https://sg.cdnki.com/outerhtml-la-gi---aHR0cHM6Ly9pbWcuaWhvY3RvdC5jb20vb3V0ZXJodG1sLWxhLWdpLS1iNTI0NDcyODlmNThiMmVmZmQ1NGNjOWFhZDIzM2FiNC53ZXBi.webp" ></img></div></span><br> <br> <span style="font-size:16px;">Ví dụ minh họa về cây DOM đơn giản</span></p> <p style="text-align: center;"> </p> <p> <span style="font-size:18px;">Trong cây DOM trên:</span><br> </p> <ul> <li> <span style="font-size:18px;"><strong>Document</strong> là <strong>Node gốc</strong>.</span></li> </ul> <ul> <li> <span style="font-size:18px;">Node gốc có một node con là thẻ <html>.Thẻ</span> <html><span style="font-size: 18px;"> dược gọi là node phần tử của tài liệu.</span></li> </ul> <ul> <li> <span style="font-size:18px;">Trong node phần tử các node văn bản nằm trong thẻ <title> và <p></span></li> </ul> <ul> <li> <span style="font-size:18px;">Mỗi tài liệu chỉ có thể có một phần tử Document.</span></li> </ul> <ul> <li> <span style="font-size:18px;">Trong tài liệu HTML, phần tử Document là phần tử <html>. Mỗi một đánh dấu (markup)có thể được biểu diễn bằng một node trong cây.</span></li> </ul> <br> </p> </p> <p class="section" id="t3"> <span class="name bold blue"><h2 id="3-dom-selector">3. DOM Selector</h2></span> <p class="noidung"> <br> <span style="font-size:18px;">Như bạn đã thấy mô hình DOM HTML ở bên trên. Để thao tác được với DOM thì việc đơn giản là bạn phải <strong>nhắm đến được nó</strong>.<br> <br> Việc này cũng giống như là <span style="font-size:24px;"><strong>CSS Selector</strong></span> phải nhắm đúng thì mới áp dụng được style cho HTML vậy.<br> <br> Vậy, chúng ta sẽ đi vào tìm hiểu một số cách để <strong>nhắm chọn phần tử DOM</strong> mà bạn muốn.<br> <br> Đầu tiên...</span><br> <br> <h3 id="3-1-nham-den-phan-tu-dom-hang-dau"> 3.1. Nhắm đến phần tử DOM hàng đầu</h3> <br> <span style="font-size:18px;">Các phần tử hàng đầu trong DOM HTML có sẵn trực tiếp dưới dạng các thuộc tính củadocument.<br> <br> Do đó, chúng ta có thể truy cập nó bằng cách sử dụng dấu chấm .<br> <br> Ví dụ:</span><br> <br> <ul> <li> <span style="font-size:18px;">Phần tử html có thể được truy cập bằng document.documentElement</span></li> </ul> <ul> <li> <span style="font-size:18px;">Phần tử head có thể được truy cập bằng document.head</span></li> </ul> <ul> <li> <span style="font-size:18px;">Phần tử body có thể được truy cập bằng document.body.</span></li> </ul> <br> <span style="font-size:18px;">Chúng ta hãy thử làm một vài ví dụ sau. Bạn hãy tạo một file HTML và một file .js<br> <br> Hoặc có thể sử dụng từng DOM selector ở bên dưới chạy trên tab console của trang web bất kỳ để thấy cách nó thay đổi.<br> <br> Bước 1: Vào trang web bất kỳ, ví dụ https://niithanoi.edu.vn</span><br> <p style="text-align: center;"> <br> <span style="font-size:18px;"><div class="imgBox"><img alt="Outerhtml là gì" data-orgimg="https://sg.cdnki.com/outerhtml-la-gi---aHR0cHM6Ly9pbWcuaWhvY3RvdC5jb20vb3V0ZXJodG1sLWxhLWdpLS05ZjI3OTNlMGIxNDc4NjRkY2JlNzA5OTE1NDcxNzQ0ZC53ZXBi.webp" ></img></div></span></p> <p> <br> <span style="font-size:18px;">Sau đó đến tab Console và thử nghiệm DOM Selector</span></p> <p style="text-align: center;"> <br> <span style="font-size:18px;"><div class="imgBox"><img alt="Outerhtml là gì" data-orgimg="https://sg.cdnki.com/outerhtml-la-gi---aHR0cHM6Ly9pbWcuaWhvY3RvdC5jb20vb3V0ZXJodG1sLWxhLWdpLS04YjFhMGUwYzMzMTVjZDc3NmIzYjI0OTNmZjNkN2U5OC53ZXBi.webp" ></img></div></span></p> <br> <span style="font-size:18px;">Ví dụ DOM Selector:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Hiểnthịgiátrịthuộctínhlangcủaphầntửhtml</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #4fc1ff;">documentElement</span>.<span style="color: #dcdcaa;">getAttribute</span>(<span style="color: #ce9178;">"lang"</span>));<span style="color: #6a9955;">//Kếtquả:vi</span></p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>);<br> </p> </p> <br> <span style="font-size:18px;">Thử thiết lập CSS xem nhé:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Thiếtlậpmàunềnchophầntửbody</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #9cdcfe;">body</span>.<span style="color: #4fc1ff;">style</span>.<span style="color: #9cdcfe;">background</span>=<span style="color: #ce9178;">"gray"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Và đây là ví dụ lấy tên thẻ:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Hiểnthịtagnamcủaphầntửđầutiêntronghead</span></p> <p> <span style="color: #dcdcaa;">alert</span>(<span style="color: #9cdcfe;">document</span>.<span style="color: #4fc1ff;">head</span>.<span style="color: #4fc1ff;">firstElementChild</span>.<span style="color: #4fc1ff;">nodeName</span>);<br> </p> </p> <br> <h3 id="3-1-nham-den-phan-tu-dom-bang-id"> 3.1. Nhắm đến phần tử DOM bằng ID</h3> <p> <br> <span style="font-size:18px;">Nếu phần tử DOM có <strong>thuộc tính id</strong> thì ban có thể dễ dàng nhắm đến nó thông qua phương thức getElementById()<br> <br> Hãy xem ví dụ để hiểu cách sử dụng:<br> <br> Đầu tiên ta có HTML:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h2</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"tieuDe"</span><span style="color: #808080;">></span>ThaotácvớiDOMthôngquaID<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><br> </p> <br> <span style="font-size:18px;">Và nếu bạn viết code JS như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"tieuDe"</span>);</p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>);<br> </p> </p> </p> <br> <span style="font-size:18px;">Thì trong màn hình console nó sẽ trả về:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <h2 id="tieuDe"></h2><br> </p> <br> <span style="font-size:18px;">Tuy nhiên, chúng ta muốn nhắm đến phần tử có id đó để làm cái gì đó như thay đổi (thiết lập) màu sắc thì làm như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//NhắmđếnphầntửcóidlàtieuDe</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"tieuDe"</span>);</p> <br> <p> <span style="color: #6a9955;">//Thiếtlậpmàuđỏchonó</span></p> <p> <span style="color: #9cdcfe;">x</span>.<span style="color: #4fc1ff;">style</span>.<span style="color: #9cdcfe;">color</span>=<span style="color: #ce9178;">"red"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Phương thức getElementById() trả về phần tử dưới dạng đối tượng, nếu không tìm thấy thì nó trả về null</span><br> <br> <h3 id="3-2-nham-den-phan-tu-dom-bang-class-name"> 3.2. Nhắm đến phần tử DOM bằng Class Name</h3> <br> <span style="font-size:18px;">Tương tự, bạn có thể sử dụng phương thức getElementsByClassName() để lấy tất cả các phần tử có class nào đó.<br> <br> Ví dụ, ta có HTML như sau:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h2</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"tieuDenhom1"</span><span style="color: #808080;">></span>ThaotácvớiDOMthôngquaClass<span style="color: #808080;"></</span><span style="color: #569cd6;">h2</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nhom1"</span><span style="color: #808080;">></span>Nhiềuphầntửcóthểcócùngtênclass<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"nhom1"</span><span style="color: #808080;">></span>VìthếnólàgetElementschứkhôngphảigetElement<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ, muốn lấy tất cả các phần tử có class là nhom1 thì làm thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByClassName</span>(<span style="color: #ce9178;">"nhom1"</span>);<br> </p> <br> <span style="font-size:18px;">Bởi vì có thể sẽ lấy được nhiều phần tử nên xtrả về sẽ giống như một mảng và có thể truy cập thông qua chỉ số index.<br> <br> Hơi khó hiểu nhỉ.<br> <br> Kiểm tra thử xem lấy được bao nhiêu phần tử có class là nhom1 nhé:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Kiểmtraxemlấyđượcbaonhiêuphầntử</span></p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>.<span style="color: #4fc1ff;">length</span>);<span style="color: #6a9955;">//Kếtquả:3</span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ, thông qua chỉ số index là ta có thể truy cập, sửa đổi nó như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Thiếtlậph2thànhmàuđỏ</span></p> <p> <span style="color: #9cdcfe;">x</span>[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">color</span>=<span style="color: #ce9178;">"red"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Ta cũng có thể lặp qua các phần tử này bằng cách sử dụng <strong>vòng lặp for in</strong>:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lặpquatừngphầntửvàthiếtlậpnềnmàu</span></p> <p> <span style="color: #c586c0;">for</span>(<span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">elem</span><span style="color: #569cd6;">in</span><span style="color: #9cdcfe;">x</span>){</p> <p> <span style="color: #9cdcfe;">x</span>[<span style="color: #9cdcfe;">elem</span>].<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">background</span>=<span style="color: #ce9178;">"blue"</span>;</p> <p> }<br> </p> </p> <br> <span style="font-size:18px;">Bạn thử chạy xem kết quả có đúng mong đợi không nhé. :D</span><br> <br> <h3 id="3-3-nham-den-phan-tu-dom-bang-tag-name"> 3.3. Nhắm đến phần tử DOM bằng Tag Name</h3> <p> <br> <span style="font-size:18px;">Bạn cũng có thể nhắm đến các phần tử HTML theo tên thẻ bằng phương thức getElementsByTagName().<br> <br> Phương thức này cũng trả về một đối tượng giống mảng của tất cả các phần tử con với tên thẻ đã cho.<br> <br> Ta có HTML:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span>NhắmđếnPhầntửsửdụngTagName<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"test"</span><span style="color: #808080;">></span>Nósẽlấytấtcảcácphầntửvớithẻtagđó<span style="color: #808080;"></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span>Kếtquảtrảvềgiốngnhưmảng.Sauđótacóthểlàmgìtùythích<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ sử dụng phương thức getElementsByTagName() để lấy tất cả các phần tử p</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByTagName</span>(<span style="color: #ce9178;">"p"</span>);<br> </p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p> <br> <span style="font-size:18px;">Kết quả trả về giống như một mảng.<br> <br> Ta thử kiểm tra xem nó lấy được bao nhiêu phần tử nhé.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>.<span style="color: #4fc1ff;">length</span>);<span style="color: #6a9955;">//Kếtquả:2</span><br> </p> <br> <span style="font-size:18px;">Bây giờ thì dễ rồi đúng không?<br> <br> Đã lấy được về chính xác rồi. Bây giờ bạn cứ thoải mái ABC, XYZ =))</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Thiếtlậpmàuchophầntửđầutiên</span></p> <p> <span style="color: #9cdcfe;">x</span>[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">color</span>=<span style="color: #ce9178;">"blue"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Vì nó giống mảng nên ta có thể lặp qua nhé.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lặpquacácphầntửlấyđượcvàthiếtlậpmàunền</span></p> <p> <span style="color: #c586c0;">for</span>(<span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">elem</span><span style="color: #569cd6;">in</span><span style="color: #9cdcfe;">x</span>){</p> <p> <span style="color: #9cdcfe;">x</span>[<span style="color: #9cdcfe;">elem</span>].<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">background</span>=<span style="color: #ce9178;">"gray"</span>;</p> <p> }<br> </p> </p> <br> <h3 id="3-3-nham-den-phan-tu-dom-bang-css-selector"> 3.3. Nhắm đến phần tử DOM bằng CSS Selector</h3> <br> <span style="font-size:18px;">Đúng vậy, nếu bạn có <strong>CSS Selector</strong> thì bạn cũng có thể thông qua CSS Selector đó để nhắm đến phần tử mà bạn cần.<br> <br> Phương thứcquerySelectorAll()trả về danh sách tất cả các phần tử khớp với các CSS Selector được chỉ định.<br> <br> Bạn có thể thao tác với nó giống như bất kỳ mảng nào.<br> <br> Ví dụ ta có HTML sau:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">ul</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcJava<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"gachChan"</span><span style="color: #808080;">></span>HọcJavaScript<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcPHP<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcPyton<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>NIIT-ICTHàNội<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">ul</span><span style="color: #808080;">></span><br> </p> </p> <p> <br> <span style="font-size:18px;">Bây giờ, sử dụng phương thức querySelectorAll() để lấy tất cả các phần tử li về nhé:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//LấyvềcácphầntửtheoCSSSelector</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelectorAll</span>(<span style="color: #ce9178;">"ulli"</span>);</p> <br> <p> <span style="color: #6a9955;">//Kiểmtraxemlấyđượcbaonhiêuphầntử</span></p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>.<span style="color: #9cdcfe;">length</span>);<span style="color: #6a9955;">//Kếtquả:5</span><br> </p> </p> </p> <br> <span style="font-size:18px;">Bây giờ chúng ta đã nhắm đến được chúng thành công, lặp qua nó xem sao nào.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lặpquacácphầntửlilấyđược</span></p> <p> <span style="color: #6a9955;">//Inramànhìnhconsole</span></p> <p> <span style="color: #c586c0;">for</span>(<span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">elem</span><span style="color: #569cd6;">of</span><span style="color: #9cdcfe;">x</span>){</p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">elem</span>.<span style="color: #9cdcfe;">innerHTML</span>);</p> <p> }<br> </p> </p> <br> <span style="font-size:18px;">Ok. Bây giờ thử với CSS Selector khác xem nhé:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//NhắmđếnphầntửlicóclassgachChan</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">y</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">querySelectorAll</span>(<span style="color: #ce9178;">"ulli.gachChan"</span>);</p> <br> <p> <span style="color: #6a9955;">//Thêmgạchchân</span></p> <p> <span style="color: #9cdcfe;">y</span>[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">style</span>.<span style="color: #9cdcfe;">textDecoration</span>=<span style="color: #ce9178;">"underline"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Bạn thử chạy kết quả trên trình duyệt xem. Có được kết quả như mong đợi không?<br> <br> > <span style="background-color:#ffff00;">Ghi chú</span>: Phương thức querySelectorAll() hoạt động với cả pesudo class. Tuy nhiên pesudo element thì không.</span><br> <br> <span style="font-size:18px;">Ok. Như vậy là bạn đã thành công trong việc nhắm chọn đến phần tử DOM.<br> <br> Vẫn còn một số phương thức như là getElementByName(), getElementByTagName() có thể được sử dụng để nhắm đến các phần tử DOM mà bạn muốn.<br> <br> Nó cũng tương tự như phương thứcgetElementById() hay getElementsByClassName() thôi.<br> <br> Bây giờ, hãy đi tìm hiểu <strong>một số thao tác phổ biến với phần tử DOM bằng JavaScript</strong>.</span><br> </p> </p> </p> <p class="section" id="t4"> <span class="name bold blue"><h2 id="4-thao-tac-voi-dom-trong-javascript">4. Thao tác với DOM trong JavaScript</h2></span> <p class="noidung"> <br> <span style="font-size: 18px;">Thao tác với DOM trong JavaScript là gì?</span><br> <br> <span style="font-size:18px;">Thao tác, tương tác với DOM hiểu ra cũng đơn giản như thế này:</span><br> <br> <p style="text-align: center;"> <span style="font-size:18px;">"A, thằng áo đỏ kia. Bây giờ mày sẽ mặc áo xanh"<br> hoặc<br> "Thằng con con bên cạnh thằng áo đỏ kia, khi nghe tao ra hiệu mày sẽ chồng cây chuối"</span></p> <br> <span style="font-size:18px;">Đó, Thao tác với DOM chỉ đơn giản là gọi đến thằng nào đó và bắt nó làm gì đó. :D</span><br> <br> <span style="font-size: 18px;">Với JavaScript, bạn có đầy đủ các công cụ để<strong>thao tác với các phần tử DOM</strong>. Nói chung, tất cả những gì mà HTML có, JavaScript đều có thể tác động, thay đổi được chúng:</span><br> <br> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể thay đổi các HTML elements</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể thay đổi các HTML attributes</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể thay đổi các CSS styles</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể xóa bỏ (remove) các HTML elements và attributes</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể thêm mới HTML elements và attributes</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể tương tác với HTML events</span></li> </ul> <ul> <li> <span style="font-size: 18px;">JavaScript DOM có thể tạo các HTML events mới</span></li> </ul> <br> <span style="font-size:18px;">Bên dưới đây mình sẽ giới thiệu một số thuộc tính thường sử dụng nhiều nhất trong DOM.</span><br> <br> <h3 id="4-1-thao-tac-voi-dom-su-dung-thuoc-tinh-id"> 4.1. Thao tác với DOM sử dụng thuộc tính id</h3> <br> <span style="font-size:18px;">Thuộc tính <strong>id</strong> sẽ trả vể ID của một phần tử là định danh duy nhất cho mỗi phần tử bạn có thể thay đổi ID nếu bạn muốn.<br> <br> Để hiểu cách sử dụng thuộc tính id để thao tác với DOM thì hãy xem xét ví dụ sau:<br> <br> Ví dụ thay đổi id message thành xinChao</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">id</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByTagName</span>(<span style="color: #ce9178;">"p"</span>)[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"xinChao"</span>;</p> <p> <span style="color: #6a9955;">//inraidcủap</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">write</span>(<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"xinChao"</span>).<span style="color: #9cdcfe;">id</span>);</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Trong mã HTML thì rõ ràng chúng ta đặt id của thẻ p là message.<br> <br> Nhưng khi chạy trên trình duyệt, bạn sẽ thấy thẻ <p> có id là xinChao<br> <br> Câu lệnh này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">id</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByTagName</span>(<span style="color: #ce9178;">"p"</span>)[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"xinChao"</span>;<br> </p> <br> <span style="font-size:18px;">Viết liền như thế có thể sẽ làm bạn hơi khó hiểu.<br> <br> Vì thế, mình sẽ viết lại như sau:<br> <br> Đầu tiên,</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lấycácphầntửptrongtàiliệu</span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">arrays_p</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByTagName</span>(<span style="color: #ce9178;">"p"</span>);<br> </p> </p> <br> <span style="font-size:18px;">Bây giờ chúng ta có arrays_p là một tập hợp giống như một mảng, chứa các thẻ p<br> <br> Và bạn còn nhớ cách truy cập mảng trong JavaScript rồi chứ?<br> <br> > Nếu không thì đọc lại bài <span style="font-size:24px;"><strong>Mảng trong JavaScript</strong></span> này nhé.<br> <br> Ở ví dụ trên mình đã cố tình để thẻ <p> là phần tử ngay sau thẻ mở <body>.<br> <br> Thế nên, nó sẽ là phần tử đầu tiên trong mảng chúng ta lấy được.<br> <br> Tiếp theo, ta sẽ gán id mới cho phần tử này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Gánlạigiátrịidchophầntửpđầutiên</span></p> <p> <span style="color: #9cdcfe;">arrays_p</span>[<span style="color: #b5cea8;">0</span>].<span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"xinChao"</span>;<br> </p> </p> <br> <span style="font-size:18px;">Cách làm này có vẻ là hơi rắc rối nhỉ.<br> <br> Có cách nào làm khác không?<br> <br> Có.<br> <br> Phương thứcdocument.getElementById() cũng sẽ cho kết quả tương tự.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">br</span><span style="color: #808080;">/></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">p</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"message"</span>);</p> <p> <span style="color: #6a9955;">//Thayđổiid</span></p> <p> <span style="color: #9cdcfe;">p</span>.<span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"xinChao"</span>;</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Thử chạy trên trình duyệt để xem kết quả bạn nhé.<br> <br> Bây giờ, chúng ta đã nhắm đến chính xác phần tử p có id là message để thực hiện thay đổi id thành công.<br> <br> Vì sử dụng phương thức getElementById(), bạn sẽ nhắm chính xác cho dù thẻ p này có nằm ở đâu đi nữa.</span><br> <br> <h3 id="4-2-thao-tac-voi-dom-su-dung-thuoc-tinh-classname"> 4.2. Thao tác với DOM sử dụng thuộc tính className</h3> <br> <span style="font-size:18px;">Sử dụng thuộc tính <strong>className</strong> bạn có thể thực hiện gán class cho phần tử DOM nào đó.<br> <br> Ví dụ, ta có file HTML như sau:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">html</span><span style="color: #9cdcfe;">lang</span>=<span style="color: #ce9178;">"en"</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span>DOMtrongJavaScript<span style="color: #808080;"></</span><span style="color: #569cd6;">title</span><span style="color: #808080;">></span></p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">style</span><span style="color: #808080;">></span></p> <p> <span style="color: #d7ba7d;">.red</span>{</p> <p> <span style="color: #9cdcfe;">color</span>:<span style="color: #ce9178;">red</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">style</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">head</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">class</span>=<span style="color: #ce9178;">"normal"</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">myFunction</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>Nhấnvàođểthànhmàuđỏ<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">myFunction</span>(){</p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementsByTagName</span>(<span style="color: #ce9178;">"p"</span>)[<span style="color: #b5cea8;">0</span>];</p> <p> <span style="color: #9cdcfe;">x</span>.<span style="color: #9cdcfe;">className</span>=<span style="color: #ce9178;">"red"</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">body</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">html</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Sau khi click vào</span><span style="font-size: 18px;">nút</span><span style="font-size:18px;">thì class normal sẽ được thay thế bằng red<br> <br> > Nếu bạn quên cách tạo hàm thì xin mời học lại bài <span style="font-size:24px;"><strong>Hàm trong JavaScript</strong></span> bạn nhé.<br> <br> Nhưng lưu ý, cách làm này sẽ thay thế toàn bộ class trong phần tử p.<br> <br> Để thêm được nhiều class thì đơn giản bạn chỉ cần tách các class bởi dấu cách như thế này: "red group1 smallTitel"</span><br> <br> <h3 id="4-3-thao-tac-voi-dom-su-dung-thuoc-tinh-tagname"> 4.3. Thao tác với DOM sử dụng thuộc tính tagName</h3> <br> <span style="font-size:18px;">Thuộc tính <strong>tagName</strong> trả về tên của phần tử mà bạn nhắm tới.<br> <br> Ví dụ:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">tag_name</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"message"</span>).<span style="color: #4fc1ff;">tagName</span>;</p> <p> <span style="color: #6a9955;">//inratênthẻcủapchínhlàp</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">write</span>(<span style="color: #9cdcfe;">tag_name</span>);</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <h3 id="4-4-thao-tac-voi-dom-su-dung-thuoc-tinh-innerhtml"> 4.4. Thao tác với DOM sử dụng thuộc tính innerHTML</h3> <br> <span style="font-size:18px;">Thuộc tính <strong>innerHTML</strong>(bên trong HTML) trả về mã HTML <strong>bên trong phần tử</strong> hiện tại.<br> <br> Đoạn mã HTML này là chuỗi kí tự chứa tất cả phần tử bên trong, bao gồm các node phần tử và node văn bản.<br> <br> Ví dụ:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"messages1"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">value</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"message"</span>).<span style="color: #9cdcfe;">innerHTML</span>;</p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"messages1"</span>).<span style="color: #9cdcfe;">innerHTML</span>=<span style="color: #9cdcfe;">value</span>;</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Đoạn mã này đơn giản là lấy nội dung trong phần tử này và gán nó vào phần tử khác.</span><br> <br> <h3 id="4-5-thao-tac-voi-dom-su-dung-thuoc-tinh-outerhtml"> 4.5. Thao tác với DOM sử dụng thuộc tính outerHTML</h3> <br> <span style="font-size:18px;">Trả về mã HTML của phần tử hiện tại. Có thể hiểu là outerHTML = tagName + innerHTML<br> <br> Ví dụ, đây là tất cả mà outerHTML có thể lấy được.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>ChàomừngcácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><br> </p> <br> <span style="font-size:18px;">Ví dụ: Thay thế phần tử h2 thành h3</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h2</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"message"</span><span style="color: #808080;">></span>XinchàocácbạnđếnvớilậptrìnhJavaScriptcănbản!<span style="color: #808080;"></</span><span style="color: #569cd6;">h2</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">myFunction</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>ThayđổiHeader<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">myFunction</span>(){</p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"message"</span>).<span style="color: #9cdcfe;">outerHTML</span>=</p> <p> <span style="color: #ce9178;">"<h3id='message_change'>HelloJS</h3>"</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Như vậy, JavaScript sẽ tìm và thay thế toàn bộ h2 thành nội dung mà chúng ta gán cho nó.<br> <br> Có nghĩa là sau khi bất vào nút Thay đổi Header thì mã HTML sẽ trở thành như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h3</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">'message_change'</span><span style="color: #808080;">></span>HelloJS<span style="color: #808080;"></</span><span style="color: #569cd6;">h3</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">myFunction</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>ThayđổiHeader<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">myFunction</span>(){</p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"message"</span>).<span style="color: #9cdcfe;">outerHTML</span>=</p> <p> <span style="color: #ce9178;">"<h3id='message_change'>HelloJS</h3>"</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <h3 id="4-6-thao-tac-voi-dom-su-dung-thuoc-tinh-attributes"> 4.6. Thao tác với DOM sử dụng thuộc tính attributes</h3> <br> <span style="font-size:18px;">Thuộc tính này sẽ trả về tập các thuộc tính của phần tử bạn nhắm đến mà nó nó như: id, name, type, title, href, .</span><br> <br> <span style="font-size:18px;">Ví dụ: Đầu tiên ta có HTML như sau.</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;"></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">input</span><span style="color: #9cdcfe;">type</span>=<span style="color: #ce9178;">"button"</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"btn"</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">myFunction</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #9cdcfe;">value</span>=<span style="color: #ce9178;">"nhấnđểxem"</span><span style="color: #808080;">/></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">p</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"text"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">p</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ, ta có hàm như sau:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p> <p> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">myFunction</span>(){</p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"btn"</span>).<span style="color: #4fc1ff;">attributes</span>[<span style="color: #b5cea8;">3</span>].<span style="color: #4fc1ff;">name</span>;</p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"text"</span>).<span style="color: #9cdcfe;">innerHTML</span>=<span style="color: #9cdcfe;">x</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Cũng như mảng, thuộc tính này bắt đầu đếm từ 0 ở đây mình muốn xem tên thuộc tính thứ 4 thì sẽ gọi attributes[3] như vậy kết quả trả về là value</span><br> <br> <h3 id="4-7-thao-tac-voi-dom-su-dung-thuoc-tinh-style"> 4.7. Thao tác với DOM sử dụng thuộc tính style</h3> <br> <span style="font-size:18px;">Thuộc tính style được sử dụng để thiết lập CSS cho phần tử được nhắm đến.</span><br> <br> <span style="font-size:18px;">Ví dụ:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h2</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"myH1"</span><span style="color: #808080;">></span>Thayđổimàucủaheader<span style="color: #808080;"></</span><span style="color: #569cd6;">h2</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">myFunction</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>Nhấnnútnàyđểchuyểnsangmàuđỏ<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span></p><div style="width:100%; margin:20px auto; display:block"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8587332220"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div></p> <p> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">myFunction</span>(){</p> <p> <span style="color: #6a9955;">//ThayđổimàucủathẻH1</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"myH1"</span>).<span style="color: #4fc1ff;">style</span>.<span style="color: #9cdcfe;">color</span>=<span style="color: #ce9178;">"red"</span>;</p> <p> }</p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">script</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Trong đó:</span><br> <br> <ul> <li> <span style="font-size:18px;">Tên thuộc tính CSS trong trường hợp này là color để điều chỉnh màu sắc của chữ.</span></li> </ul> <br> <span style="font-size:18px;">Nếu tên thuộc tính có từ 2 từ trở lên: Ví dụ trong CSS bạn biết background-color thì khi thiết lập style qua thuộc tính style này bạn sẽ cần viết là backgroundColor</span><br> <br> <span style="font-size:18px;">Lưu ý: Từ<strong>từ đầu tiên viết thường</strong>, các từ tiếp theo viết HOA chữ cái đầu tiên, không có dấu gạch ngang như trong CSS.<br> <br> Ví dụ.<br> <br> Trong CSS ta viết như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #9cdcfe;">background-color</span>:<span style="color: #ce9178;">gray</span>;<br> </p> <br> <span style="font-size:18px;">Nhưng khi thiết lập qua DOM với thuộc tính style thì ta cần ghi như sau:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"myH1"</span>).<span style="color: #4fc1ff;">style</span>.<span style="color: #9cdcfe;">backgroundColor</span>=<span style="color: #ce9178;">"red"</span>;<br> </p> <br> <span style="font-size:18px;">Ví dụ thiết lập viền cho phần tử (thuộc tính CSS có nhiều giá trị):</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"myH1"</span>).<span style="color: #4fc1ff;">style</span>.<span style="color: #9cdcfe;">border</span>=<span style="color: #ce9178;">"1pxsolidblue"</span>;<br> </p> <br> <span style="font-size:18px;">Khi thực hiện thành công, style sẽ được thêm vào theo <strong>kiểu inline</strong>trên trình duyệt như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">h2</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"myH1"</span><span style="color: #9cdcfe;">style</span>=<span style="color: #ce9178;">"</span><span style="color: #ce9178;">border:1pxsolidblue</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>Thayđổimàucủaheader<span style="color: #808080;"></</span><span style="color: #569cd6;">h2</span><span style="color: #808080;">></span><br> </p> <br> <span style="font-size:18px;">Đó, với DOM, bạn có thể thiết lập CSS cho phần tử mà không cần mở đến file CSS.</span><br> <br> <h3 id="4-8-mot-so-thuoc-tinh-quan-he"> 4.8. Một số thuộc tính quan hệ</h3> <br> <span style="font-size:18px;">Trong cây DOM, có rất nhiều các node có quan hệ với nhau như node cha, node anh chị em, node đầu tiên trong nhóm, node cuối cùng trong nhóm...<br> <br> Tóm lại, các mối quan hệ như thế này đều có các thuộc tính tương ứng để cho phép bạn sử dụng.</span><br> <br> <ul> <li> <span style="font-size:18px;">parentNode(node cha): Trỏ đến node cha của một node. Nếu một node không có node cha (document) thì parentNode sẽ nhận giá trị là null.</span></li> </ul> <br> <span style="font-size:18px;">Ví dụ ta có HTML:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">ul</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"khoaHoc"</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcJava<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"active"</span><span style="color: #808080;">></span>HọcJavaScript<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcPHP<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>HọcPyton<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>NIIT-ICTHàNội<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">ul</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"ketQua"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ, ta chọn đến node cha của thẻ li có id là active như thế này:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Nhắmđếnphầntửchacủaphầntửid=active</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">x</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"active"</span>).<span style="color: #4fc1ff;">parentNode</span>;</p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">x</span>.<span style="color: #4fc1ff;">nodeName</span>);<span style="color: #6a9955;">//Kếtquả:UL</span><br> </p> </p> <br> <span style="font-size:18px;">Đối với các thuộc tính quan hệ khác thì cũng tương tự.</span><br> <br> <ul> <li> <span style="font-size:18px;">childNodes(các node con): Trỏ đến một đối tượng tương tự với mảng, chứa những node con của một node. Chỉ là tương tự với mảng thôi nha. </span></li> </ul> <br> <span style="font-size:18px;">Ví dụ, trong trường hợp trên, ta lấy các phần tử li của thẻ ul</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lấycácnodeconcủaphầntửul</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">y</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"khoaHoc"</span>).<span style="color: #4fc1ff;">childNodes</span>;</p> <br> <p> <span style="color: #6a9955;">//Kiểmtraxemlấyđượcbaonhiêunode</span></p> <p> <span style="color: #9cdcfe;">console</span>.<span style="color: #dcdcaa;">log</span>(<span style="color: #9cdcfe;">y</span>.<span style="color: #9cdcfe;">length</span>);<span style="color: #6a9955;">//Kếtquả:11</span><br> </p> </p> <br> <span style="font-size:18px;">> Lưu ý:Trong DOM, tất cả các phần của tài liệu, chẳng hạn như phần tử, thuộc tính, văn bản, v.v đều tính là node<br> <br> Do đó, tính cả các thẻ li, id, text ở trong thẻ ul trên ta có 11 node.</span><br> <br> <ul> <li> <span style="font-size:18px;">firstChild(node con đầu tiên): Trỏ đến node con đầu tiên của một node trong childNodes.</span></li> </ul> <br> <span style="font-size:18px;">Ví dụ ta có HTML:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">ul</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"khoaHoc"</span><span style="color: #808080;">><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>A<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>B<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>C<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></</span><span style="color: #569cd6;">ul</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">div</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"ketQua"</span><span style="color: #808080;">></</span><span style="color: #569cd6;">div</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Lấy phần tử đầu tiên trong ul</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #6a9955;">//Lấynộidungcủathẻliđầutiên</span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">list</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"khoaHoc"</span>).<span style="color: #4fc1ff;">firstChild</span>.<span style="color: #9cdcfe;">innerHTML</span>;</p> <br> <p> <span style="color: #6a9955;">//Gánnộidunglấyđượcvàothẻdiv</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"ketQua"</span>).<span style="color: #9cdcfe;">innerHTML</span>=<span style="color: #9cdcfe;">list</span>;<br> </p> </p> <br> <span style="font-size:18px;">> <span style="background-color:#ffff00;">Lưu ý</span>: Nếu có khoảng trống ở trước phần tử đầu tiên (dấu cách, xuống dòng, tab...) thì kết quả trả về là undefined. Do đó bạn thấy mình phải đặt HTML như thế kia.<br> <br> Vẫn còn rất nhiều các phần tử quan hệ như thế này. Bạn có thể đọc kỹ thêm <span style="font-size:24px;"><strong>tại đây</strong></span>.<br> <br> Bên dưới đây mình có giải thích thêm một chút về một số node hay được sử dụng.</span><br> <br> <ul> <li> <span style="font-size:18px;">lastChild(node con cuối cùng): Trỏ đến node con cuối cùng của một node trong childNodes.</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">nextSibling(node anh em liền kề sau): Trỏ đến node liền kề phía sau của nó (có cùng một parentNode).</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">previousSibling(node anh em liền kề trước): Trỏ đến node liền kề phía trước (có cùng một parentNode).</span></li> </ul> <br> <br> <span style="font-size:18px;">Mỗi</span><span style="font-size: 18px;">node</span><span style="font-size:18px;">trên cây DOM đều có 6 thuộc tính quan hệ để giúp bạn truy xuất gián tiếp theo vị trí của</span><span style="font-size: 18px;">node</span><span style="font-size:18px;">:</span><br> <br> <ul> <li> <span style="font-size:18px;">Node.parentNode:tham chiếu đến node cha của node hiện tại, và node cha này là duy nhất cho mỗi node. Do đó, nếu bạn cần tìm nguồn gốc sâu xa của 1 node, bạn phải nối thuộc tính nhiều lần, ví dụNode.parentNode.parentNode.</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">Node.childNodes:tham chiếu đến các node con trực tiếp của node hiện tại, và kết quả là 1 mảng các đối tượng. Lưu ý rằng, các node con không bị phân biệt bởi loại node, nên kết quả mảng trả về có thể bao gồm nhiều loại node khác nhau.</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">Node.firstChild:tham chiếu đến node con đầu tiên của node hiện tại, và tương đương với việc gọiNode.childNodes[0].</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">Node.lastChild: tham chiếu đến node con cuối cùng của node hiện tại, tương đương với việc gọiNode.childNodes[Element.childNodes.length-1]</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">Node.nextSibling: tham chiếu đến node anh em nằm liền kề sau với node hiện tại.</span></li> </ul> <br> <ul> <li> <span style="font-size:18px;">Node.previousSibling: tham chiếu đến node anh em nằm liền kề trước với node hiện tại. </span></li> </ul> <br> <h3 id="4-9-mot-so-phuong-thuc-pho-bien-de-thao-tac-voi-dom-khac"> 4.9. Một số phương thức phổ biến để thao tác với DOM khác</h3> <br> <span style="font-size:18px;">Như bạn đã biết, thông qua JavaScript chúng ta đã lấy được các phần tử HTML, thay đổi thuộc tính, thêm thuộc tính cho nó.<br> <br> Ngoài ra bạn cũng có thể:</span><br> <br> <ul> <li> <span style="font-size:18px;">ceateElement(tagName): Tạo một node mới</span></li> </ul> <ul> <li> <span style="font-size:18px;">createTextNode(text): Tạo một text Node mới</span></li> </ul> <ul> <li> <span style="font-size:18px;">appendChild(node): Thêm một node con vào node hiện tại</span></li> </ul> <br> <span style="font-size:18px;">Dưới đây là ví dụ thực hiện cho cả 3 phương thức trên.<br> <br> HTML:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">ul</span><span style="color: #9cdcfe;">id</span>=<span style="color: #ce9178;">"khoaHoc"</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>JavaScript<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>JavaFullStack<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span>PHPFullStack<span style="color: #808080;"></</span><span style="color: #569cd6;">li</span><span style="color: #808080;">></span></p> <p> <span style="color: #808080;"></</span><span style="color: #569cd6;">ul</span><span style="color: #808080;">></span></p> <br> <p> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">themKhoaHoc</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>ThêmKhóahọc<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span><br> </p> </p> <br> <span style="font-size:18px;">Bây giờ ta sẽ tạo một hàm để thêm một khóa học mới:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">themKhoaHoc</span>(){</p> <p> <span style="color: #6a9955;">//Tạothêmmộtđốitượngli</span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">node</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">createElement</span>(<span style="color: #ce9178;">"li"</span>);</p> <p> <span style="color: #6a9955;">//Tạomộttextnode</span></p> <p> <span style="color: #569cd6;">var</span><span style="color: #9cdcfe;">textnode</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">createTextNode</span>(<span style="color: #ce9178;">"FullStackDEV"</span>);</p> <p> <span style="color: #6a9955;">//Thêmtextnodevàonodelivừatạo</span></p> <p> <span style="color: #9cdcfe;">node</span>.<span style="color: #dcdcaa;">appendChild</span>(<span style="color: #9cdcfe;">textnode</span>);</p> <p> <span style="color: #6a9955;">//Thêmphầntửvừatạovàocuốiul</span></p> <p> <span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"khoaHoc"</span>).<span style="color: #dcdcaa;">appendChild</span>(<span style="color: #9cdcfe;">node</span>);</p> <p> }<br> </p> </p> <br> <span style="font-size:18px;">Bạn thử chạy trên trình duyệt xem. Kết quả như thế nào?<br> <br> Có thể thêm node thì cũng có thể <strong>xóa node</strong> với phương thức </span><span style="font-size:18px;">removeChild()</span><br> <br> <span style="font-size:18px;">Đầu tiên, ta thêm một button nữa:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <br> <span style="color: #808080;"><</span><span style="color: #569cd6;">button</span><span style="color: #9cdcfe;">onclick</span>=<span style="color: #ce9178;">"</span><span style="color: #dcdcaa;">xoaKhoaHoc</span><span style="color: #ce9178;">()</span><span style="color: #ce9178;">"</span><span style="color: #808080;">></span>XóaKhóahọc<span style="color: #808080;"></</span><span style="color: #569cd6;">button</span><span style="color: #808080;">></span><br> </p> <br> <span style="font-size:18px;">Sau đó ta tạo một hàm xóa node đầu tiên trong ul:</span><br> <br> <p style="color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: nowrap;"> <p> <br> <span style="color: #569cd6;">function</span><span style="color: #dcdcaa;">xoaKhoaHoc</span>(){</p> <p> <span style="color: #6a9955;">//Chọnđếndanhsáchkhóahọc</span></p> <p> <span style="color: #569cd6;">let</span><span style="color: #9cdcfe;">kh</span>=<span style="color: #9cdcfe;">document</span>.<span style="color: #dcdcaa;">getElementById</span>(<span style="color: #ce9178;">"khoaHoc"</span>);</p> <br> <p> <span style="color: #6a9955;">//Xóaphầntửconđầutiên</span></p> <p> <span style="color: #9cdcfe;">kh</span>.<span style="color: #dcdcaa;">removeChild</span>(<span style="color: #9cdcfe;">kh</span>.<span style="color: #4fc1ff;">childNodes</span>[<span style="color: #b5cea8;">0</span>]);</p> <p> }<br> </p> </p> <br> <span style="font-size:18px;">Khi bấm vào nút Xóa khóa học thì nó sẽ xóa thẻ li đầu tiên trong ul, và cứ thế.<br> <br> Nhân tiện, tham khảo một số khóa học Lập trình tại NIIT - ICT Hà Nội để học lập trình web nhanh hơn:</span><br> <br> <ul> <li> <span style="font-size:18px;"><span style="font-size:24px;"><strong>KHÓA HỌC LẬP TRÌNHJAVA WEB</strong></span>(~4.5Tháng)</span></li> </ul> <ul> <li> <span style="font-size:18px;"><span style="font-size:24px;"><strong>KHÓA HỌC LẬP TRÌNHPHP WEB</strong></span> (~4.5Tháng)</span></li> </ul> <ul> <li> <span style="font-size:18px;"><span style="font-size:24px;"><strong>KHÓA HỌC LẬP TRÌNH VIÊN</strong></span> (Full Stack - 12 tháng - Dành cho người muốn chuyển ngành hoặc học sinh mới tốt nghiệp THPT</span></li> </ul> <ul> <li> <span style="font-size:24px;"><strong>KHÓA HỌC FRONT END</strong></span> (3 tháng) dành cho các bạn yêu thích Front end</li> </ul> <br> </p> </p> <p class="section" id="t5"> <span class="name bold blue"><h2 id="tong-ket">Tổng kết</h2></span> <p class="noidung"> <br> <span style="font-size:18px;">Như vậy là bạn vừa học xong một số phương thức <strong>thao tác với DOM bằng JavaScript</strong>. Bạn biết <strong>DOM là gì</strong>, các nhắm chọn đến phần tử bạn muốn bằng <strong>DOM Selector </strong>và vận dụng các <strong>thuộc tính</strong>, <strong>phương thức</strong> để <strong>lấy thông tin</strong>, <strong>thêm</strong>, <strong>xửa</strong>, <strong>xóa </strong>....<br> <br> Ở phần sau mình sẽ giới thiệu về sự kiện và xử lý sự kiện với DOM trong JavaScript nhé. Hẹn gặp lại ở bài học tiếp theo.</span><br> <br> </p> </p> </p> </p></div> <div class="readmore_content_exists"><button id="readmore_content"><span class="arrow"><span></span></span>Đọc tiếp</button></div> </td></tr></table> <script async src="/dist/js/lazyhtml.min.js" crossorigin="anonymous"></script> <div class="lazyhtml" data-lazyhtml> <script type="text/lazyhtml"> <div class="youtubeVideo"><h3>Video liên quan</h3> <iframe width="560" height="315" src="https://www.youtube.com/embed/QkNVLVzOboA?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe> </div> </script> </div> <div class="mt-3"> <div class="tags"> <a href="https://thattruyen.com/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="https://thattruyen.com/tags/Là gì" class="tag-link">Là gì</a> </div> </div> <div class="post-tools"> <button data-postid="outerhtml-la-gi" class="btn btn-answerModalBox"><img class="mr-1" alt="Outerhtml là gì" src="/dist/images/svg/messages_16.svg">Reply</button> <button data-postid="outerhtml-la-gi" data-vote="up" class="btn btn-doVote"><img class="mr-1" alt="Outerhtml là gì" src="/dist/images/svg/face-smile_16.svg">3</button> <button data-postid="outerhtml-la-gi" data-vote="down" class="btn btn-doVote"><img class="mr-1" alt="Outerhtml là gì" src="/dist/images/svg/poo_16.svg">0</button> <button class="btn"><img class="mr-1" alt="Outerhtml là gì" src="/dist/images/svg/facebook_16.svg"> Chia sẻ</button> </div> </div> </div> </div> <div id="answers_outerhtml-la-gi" class="answers"> </div> <div class="entryFooter"> <div class="footerLinkAds"><div style="width:100%; margin:0 auto;"> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8199996671"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="footerRelated"><div class="postRelatedWidget"> <h2>Bài Viết Liên Quan</h2> <div class="questions-snippet layoutNews border-top border-top-gray"> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-van-ta-chu-cho-trong-nha-em-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/Y302bok61Is/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLBGihqAn_gfVDfG3kSULJ-1A_13EQ" alt="Bài văn tả chú chó trong nhà em năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-van-ta-chu-cho-trong-nha-em-nam-2024">Bài văn tả chú chó trong nhà em năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Xây Đựng" class="tag-link">Xây Đựng</a> <a href="/tags/Nhà" class="tag-link">Nhà</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-van-ke-ve-le-hoi-ngay-hoi-lop-3-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/bkksytt65K4/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYWiBbKGUwDw==&rs=AOn4CLDyqRLh8nYvp7Gs8lMZ-RLzGp8JUQ" alt="Bài văn kể về lễ hội ngày hội lớp 3 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-van-ke-ve-le-hoi-ngay-hoi-lop-3-nam-2024">Bài văn kể về lễ hội ngày hội lớp 3 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bo-san-pham-cham-soc-da-chong-lao-hoa-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/rpovZm8qJUw/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBkGuVBJVEJLSceKK9hn1Gn-fVssA" alt="Bộ sản phẩm chăm sóc da chống lão hóa năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bo-san-pham-cham-soc-da-chong-lao-hoa-nam-2024">Bộ sản phẩm chăm sóc da chống lão hóa năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/van-bao-nhieu-phet-hoc-sinh-trung-binh-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/n1fgezfjNOM/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCcneF56LySWN4zyMq69nOyKOIgUw" alt="Văn bao nhiêu phết học sinh trung bình năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/van-bao-nhieu-phet-hoc-sinh-trung-binh-nam-2024">Văn bao nhiêu phết học sinh trung bình năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Bao nhiêu" class="tag-link">Bao nhiêu</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/mot-so-xet-nghiem-hoa-sinh-ve-benh-than-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/yNazw1J_XUE/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYEyBLKH8wDw==&rs=AOn4CLA1gqGJkkRNAhAZ1AmklUfNF5uu9w" alt="Một số xét nghiệm hóa sinh về bệnh thận năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/mot-so-xet-nghiem-hoa-sinh-ve-benh-than-nam-2024">Một số xét nghiệm hóa sinh về bệnh thận năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cho-be-an-pho-mai-nhu-the-nao-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/X77EKcXd7PE/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCCQGhN3ZOhF2h1Lx3Y1_1RrHHp2g" alt="Cho bé ăn phô mai như thế nào năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cho-be-an-pho-mai-nhu-the-nao-nam-2024">Cho bé ăn phô mai như thế nào năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Thế nào" class="tag-link">Thế nào</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/de-on-thi-thpt-quoc-gia-2023-mon-van-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/n1fgezfjNOM/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCcneF56LySWN4zyMq69nOyKOIgUw" alt="Đề ôn thi thpt quốc gia 2023 môn văn năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/de-on-thi-thpt-quoc-gia-2023-mon-van-nam-2024">Đề ôn thi thpt quốc gia 2023 môn văn năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cach-lap-hoa-don-dien-tu-thay-the-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/QQzo9AkBMUQ/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLCmkpANTfo-cmSlmpBIncIAN1FZiQ" alt="Cách lập hóa đơn điện tử thay thế năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cach-lap-hoa-don-dien-tu-thay-the-nam-2024">Cách lập hóa đơn điện tử thay thế năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Mẹo Hay" class="tag-link">Mẹo Hay</a> <a href="/tags/Cách" class="tag-link">Cách</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/violympic-toan-lop-2-vong-1-nam-2023-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/LeQNTMZQkwA/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4AfwJgALQBYoCDAgAEAEYSCBlKCcwDw==&rs=AOn4CLAMknPdaVMEEEXPoUpYEVdpgL83jA" alt="Violympic toán lớp 2 vòng 1 năm 2023 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/violympic-toan-lop-2-vong-1-nam-2023-nam-2024">Violympic toán lớp 2 vòng 1 năm 2023 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/violympic.vn đăng nhập" class="tag-link">violympic.vn đăng nhập</a> <a href="/tags/Violympic lớp 1" class="tag-link">Violympic lớp 1</a> <a href="/tags/Violympic Tiếng Việt" class="tag-link">Violympic Tiếng Việt</a> <a href="/tags/Thi Violympic" class="tag-link">Thi Violympic</a> <a href="/tags/violympic.vn đăng ký" class="tag-link">violympic.vn đăng ký</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/top-ttuye-n-gioi-ng-vo-i-arslan-senki-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/E9rqVkGsazs/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLC4U1kuoAdDRJzjXQOgsoET8WQ4Mg" alt="Top ttuyê n gioi ng vơ i arslan senki năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/top-ttuye-n-gioi-ng-vo-i-arslan-senki-nam-2024">Top ttuyê n gioi ng vơ i arslan senki năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Top List" class="tag-link">Top List</a> <a href="/tags/Top" class="tag-link">Top</a> </div> </div> </div> </div> <div class="max-width:840px"> <ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-fb-44+c1-1p-ns" data-ad-client="ca-pub-4987931798153631" data-ad-slot="7655066491"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/top-10-nha-tao-mau-toc-the-gioi-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/DTx_1Z5Mwus/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Ab4IgALACIoCDAgAEAEYZSBRKD4wDw==&rs=AOn4CLDg6Kj2HEQ7htaOsJRtk7yvcjOSOA" alt="Top 10 nhà tạo mẫu tóc thế giới năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/top-10-nha-tao-mau-toc-the-gioi-nam-2024">Top 10 nhà tạo mẫu tóc thế giới năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Top List" class="tag-link">Top List</a> <a href="/tags/Top" class="tag-link">Top</a> <a href="/tags/Xây Đựng" class="tag-link">Xây Đựng</a> <a href="/tags/Nhà" class="tag-link">Nhà</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-gia-tri-tuyet-doi-lop-7-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/-gAwPEHZK60/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBFNTeaeCaiXVWkU6jpxvuzoGU8nQ" alt="Bài tập giá trị tuyệt đối lớp 7 năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-gia-tri-tuyet-doi-lop-7-nam-2024">Bài tập giá trị tuyệt đối lớp 7 năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> <a href="/tags/Cryto" class="tag-link">Cryto</a> <a href="/tags/Giá " class="tag-link">Giá </a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-viet-don-xin-viec-bang-tieng-anh-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/t9xvZVrtpHM/hqdefault.jpg?sqp=-oaymwE9COADEI4CSFryq4qpAy8IARUAAAAAGAElAADIQj0AgKJDeAHwAQH4Af4OgAK4CIoCDAgAEAEYYyBjKGMwDw==&rs=AOn4CLBz9QM8d9ywvQ09w2boF7A7wZu-iQ" alt="Bài tập viết đơn xin việc bằng tiếng anh năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-viet-don-xin-viec-bang-tieng-anh-nam-2024">Bài tập viết đơn xin việc bằng tiếng anh năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/co-me-nao-cat-moi-nho-chua-a-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/yVJgw1IlS_Q/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBgFKJnbMmn71ioWG_8ekitjhTUmw" alt="Có mẹ nào cắt môi nhỏ chưa ạ năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/co-me-nao-cat-moi-nho-chua-a-nam-2024">Có mẹ nào cắt môi nhỏ chưa ạ năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/co-nen-cho-con-hoc-toan-tu-duy-mathnasium-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/ZaVRrM68NX8/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYTSBeKGUwDw==&rs=AOn4CLDK0UuReoWYl3TRFTbgylNPAQcw-w" alt="Có nên cho con học toán tư duy mathnasium năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/co-nen-cho-con-hoc-toan-tu-duy-mathnasium-nam-2024">Có nên cho con học toán tư duy mathnasium năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Hỏi Đáp" class="tag-link">Hỏi Đáp</a> <a href="/tags/Có nên" class="tag-link">Có nên</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/bai-tap-tieng-anh-8-bui-van-vinh-pdf-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/cYFaVzA0vbA/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLAmRaMYc1crzzxmWzeZ2j4Gy1HJ2Q" alt="Bài tập tiếng anh 8 bùi văn vinh pdf năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/bai-tap-tieng-anh-8-bui-van-vinh-pdf-nam-2024">Bài tập tiếng anh 8 bùi văn vinh pdf năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khỏe Đẹp" class="tag-link">Khỏe Đẹp</a> <a href="/tags/Bài tập" class="tag-link">Bài tập</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Tiếng anh" class="tag-link">Tiếng anh</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/17-le-van-phan-thanh-pho-phan-thiet-binh-thuan-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/5jYJ5MvexSs/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLBl3tcTgwreiXqnusM1H8oBkqo-pA" alt="17 lê văn phấn thành phố phan thiết bình thuận năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/17-le-van-phan-thanh-pho-phan-thiet-binh-thuan-nam-2024">17 lê văn phấn thành phố phan thiết bình thuận năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/dap-an-de-toan-122-thpt-quoc-gia-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/Z7vnSyDUsaE/hqdefault.jpg?sqp=-oaymwEjCOADEI4CSFryq4qpAxUIARUAAAAAGAElAADIQj0AgKJDeAE=&rs=AOn4CLB5Rcls75Ug97fyaEl_WPqMEvW-_g" alt="Đáp án đề toán 122 thpt quốc gia năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/dap-an-de-toan-122-thpt-quoc-gia-nam-2024">Đáp án đề toán 122 thpt quốc gia năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/cach-can-bang-phuong-trinh-hoa-hoc-co-x-y-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/ZsPhww23ovk/hq720.jpg?sqp=-oaymwEXCNAFEJQDSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDLjud6kGkkWYHdn6GUQzlBqZYSDg" alt="Cách cân bằng phương trình hóa học có x y năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/cach-can-bang-phuong-trinh-hoa-hoc-co-x-y-nam-2024">Cách cân bằng phương trình hóa học có x y năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Mẹo Hay" class="tag-link">Mẹo Hay</a> <a href="/tags/Cách" class="tag-link">Cách</a> <a href="/tags/Học Tốt" class="tag-link">Học Tốt</a> <a href="/tags/Học" class="tag-link">Học</a> <a href="/tags/Phương trình" class="tag-link">Phương trình</a> </div> </div> </div> </div> <div class="media media-card rounded-0 shadow-none mb-0 bg-transparent py-4 px-0 border-bottom border-bottom-gray"> <div class="media-image"> <a href="/mat-trang-quay-quanh-trai-dat-theo-chieu-nao-nam-2024"><img src="/dist/images/waiting.svg" width="200px" height="100px" data-orgimg="https://i.ytimg.com/vi/KXGtUsWmr7o/hq720.jpg?sqp=-oaymwExCNAFEJQDSFryq4qpAyMIARUAAIhCGAHwAQH4Af4JgALQBYoCDAgAEAEYXiBeKF4wDw==&rs=AOn4CLDajRln4YRK1zQmYfDzYFGsdguuRg" alt="Mặt trăng quay quanh trái đất theo chiều nào năm 2024"></a> </div> <div class="media-body"> <h5 class="mb-2 fw-medium"><a href="/mat-trang-quay-quanh-trai-dat-theo-chieu-nao-nam-2024">Mặt trăng quay quanh trái đất theo chiều nào năm 2024</a></h5> <p class="mb-2 truncate lh-20 fs-15"></p> <div class="media media-card questionTags user-media px-0 border-bottom-0 pb-0"> <div class="tags"> <a href="/tags/mẹo hay" class="tag-link">mẹo hay</a> <a href="/tags/Khoa Học" class="tag-link">Khoa Học</a> <a href="/tags/Trái đất" class="tag-link">Trái đất</a> </div> </div> </div> </div> </div> </div></div> </div> </div> </div> </div> <div class="postContentRight"> <div class="sidebar"> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-13 pb-3 text-center">Quảng Cáo</h4> <div class="mb-4 mx-auto" style="text-align:center"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-4987931798153631" data-ad-slot="8742637402" data-ad-format="auto" data-full-width-responsive="true"> </ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Có thể bạn quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/internal-hdd-soft-error-fixed-by-retries-sua-loi-nam-2024">Internal hdd soft error fixed by retries sửa lỗi năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/BurntLayout" class="author">BurntLayout</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/dong-dau-treo-nhu-the-nao-la-dung-nam-2024">Đóng dấu treo như thế nào là đúng năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/AmusingMovie" class="author">AmusingMovie</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/loai-binh-sua-nao-tot-cho-tre-so-sinh-nam-2024">Loại bình sữa nào tốt cho trẻ sơ sinh năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/GingerPenguin" class="author">GingerPenguin</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/cach-tinh-diem-trung-binh-mon-thcs-trong-excel-nam-2024">Cách tính điểm trung bình môn thcs trong excel năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/HydroelectricWoodward" class="author">HydroelectricWoodward</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/chieu-thi-va-khuyen-mai-khac-nhau-nhu-the-nao-nam-2024">Chiệu thị và khuyến mãi khác nhau như thế nào năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/SketchyNormalcy" class="author">SketchyNormalcy</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/https-trainghiemsovn-top-ung-dung-giup-ban-tan-dung-wi-fi-tren-iphone-nam-2024">Https trainghiemso.vn top-ung-dung-giup-ban-tan-dung-wi-fi-tren-iphone năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/SeriousJuror" class="author">SeriousJuror</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/duong-nguyen-van-nguyen-phuong-tan-dinh-quan-1-nam-2024">Đường nguyễn văn nguyễn phường tân định quận 1 năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/UnwarrantedSemiconductor" class="author">UnwarrantedSemiconductor</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/14-nguyen-van-giai-quan-1-tp-ho-chi-minh-nam-2024">14 nguyễn văn giai quận 1 tp hồ chí minh năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/JustifiableLoathing" class="author">JustifiableLoathing</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/hinh-thuc-so-ke-toan-nhat-ky-chung-nam-2024">Hình thức sổ kế toán nhật ký chung năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/PsychicConsist" class="author">PsychicConsist</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/casino-se-giup-thuc-day-tang-truong-nhu-the-nao-nam-2024">Casino sẽ giúp thúc đẩy tăng trưởng như thế nào năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/BotanicalAccreditation" class="author">BotanicalAccreditation</a> </small> </div> </div> </div> </div> </div> <div class="card card-item cardTopList"> <div class="card-body"> <h3 class="fs-17 pb-3">Toplist được quan tâm</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="topListNum">#1</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-7-download-sach-noi-kinh-doanh-2023">Top 7 download sách nói kinh doanh 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#2</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-8-ba-bau-uong-nuoc-ep-ca-rot-tot-khong-2023">Top 8 bà bầu uống nước ép cà rốt tốt không 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#3</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-1-cong-cu-ke-hoach-hoa-doi-voi-quan-ly-nha-nuoc-ve-thuong-mai-2023">Top 1 công cụ kế hoạch hoá đối với quản lý nhà nước về thương mại 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#4</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-8-phrasal-verb-unit-4-lop-9-2023">Top 8 phrasal verb unit 4 lớp 9 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#5</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-7-ung-dung-ky-nang-giao-tiep-su-pham-2023">Top 7 ứng dung kỹ năng giao tiếp sư phạm 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#6</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-6-5-chu-tieu-bong-lai-la-con-cua-ai-2023">Top 6 5 chú tiểu bồng lai la con của ai 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#7</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-10-khi-chang-nhin-thang-vao-mat-ban-2023">Top 10 khi chàng nhìn thẳng vào mắt bạn 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#8</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-4-do-an-tot-nghiep-thiet-ke-do-hoa-van-lang-2023">Top 4 đồ an tốt nghiệp thiết kế đồ họa văn lang 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="topListNum">#9</div> <div class="media-body"> <h5><a href="https://thattruyen.com/toplist-top-4-7-nu-cuoi-xuan-mua-5-truc-tiep-2023">Top 4 7 nụ cười xuân mùa 5 trực tiếp 2023</a></h5> <small class="meta text-right">7 tháng trước</small> </div> </div> </div> </div> </div> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto"> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-" data-ad-slot="" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="card card-item"> <div class="card-body"> <h3 class="fs-17 pb-3">Xem Nhiều</h3> <div class="divider"><span></span></div> <div class="sidebar-questions pt-3"> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/de-thi-toan-lop-4-hoc-ki-1-nam-2024">De thi toán lớp 4 học kì 1 năm 2024</a></h5> <small class="meta"> <span class="pr-1">2 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/ExperimentalDenomination" class="author">ExperimentalDenomination</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/loi-offline-mode-not-available-gta-5-steam-nam-2024">Lỗi offline mode not available gta 5 steam năm 2024</a></h5> <small class="meta"> <span class="pr-1">4 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/SeveredPolling" class="author">SeveredPolling</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/hoa-giai-phong-thuy-phong-ngu-tren-bep-nam-2024">Hóa giải phong thủy phòng ngủ trên bếp năm 2024</a></h5> <small class="meta"> <span class="pr-1">3 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/ConstantShaving" class="author">ConstantShaving</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/lam-the-nao-de-khoa-facebook-tren-dien-thoai-nam-2024">Làm thế nào để khóa facebook trên điện thoại năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/SubservientDepression" class="author">SubservientDepression</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/dap-an-de-toan-122-thpt-quoc-gia-nam-2024">Đáp án đề toán 122 thpt quốc gia năm 2024</a></h5> <small class="meta"> <span class="pr-1">7 giờ trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/IrrepressibleSalvation" class="author">IrrepressibleSalvation</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/toan-lop-8-hinh-hoc-on-tap-chuong-2-nam-2024">Toán lớp 8 hình học ôn tập chương 2 năm 2024</a></h5> <small class="meta"> <span class="pr-1">11 giờ trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/PublicizedLowry" class="author">PublicizedLowry</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/loi-khong-luu-duoc-file-hosts-win-10-nam-2024">Lỗi không lưu được file hosts win 10 năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/CondescendingSenator" class="author">CondescendingSenator</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/bai-mau-bao-cao-thuc-tap-tot-nghiep-ke-toan-nam-2024">Bài mẫu báo cáo thực tập tốt nghiệp kế toán năm 2024</a></h5> <small class="meta"> <span class="pr-1">6 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/WhiteEmbodiment" class="author">WhiteEmbodiment</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/khac-phuc-loi-tat-man-hinh-khi-goi-dien-nam-2024">Khắc phục lỗi tắt màn hình khi gọi điện năm 2024</a></h5> <small class="meta"> <span class="pr-1">6 ngày trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/FatherlyHorror" class="author">FatherlyHorror</a> </small> </div> </div> <div class="media media-card media--card media--card-2"> <div class="media-body"> <h5><a href="https://thattruyen.com/bang-ma-loi-may-giat-samsung-cua-tren-nam-2024">Bảng mã lỗi máy giặt samsung cửa trên năm 2024</a></h5> <small class="meta"> <span class="pr-1">1 tuần trước</span> <span class="pr-1">. bởi</span> <a href="https://thattruyen.com/author/SplitKangaroo" class="author">SplitKangaroo</a> </small> </div> </div> </div> </div> </div> <div class="ad-card"> <h4 class="text-gray text-uppercase fs-14 pb-3 pb-3 text-center">Quảng cáo</h4> <div class="mb-4 mx-auto" style=" text-align: center"> <div id='div-gpt-ad-1657246837997-0' style='min-width: 300px; min-height: 600px;'> <script> googletag.cmd.push(function() { googletag.display('div-gpt-ad-1657246837997-0'); }); </script> </div> </div> </div> </div> </div> </div> </div> </section>  <script>var questionId ='outerhtml-la-gi'</script> <script>var postTime ='2022-02-21T11:20:06.467Z'</script> <script>var siteDomain ='thattruyen.com'</script> <script type="text/javascript" src="https://thattruyen.com/dist/js/pages/comment.js"></script>  <section class="footer-area pt-80px bg-dark position-relative"> <span class="vertical-bar-shape vertical-bar-shape-1"></span> <span class="vertical-bar-shape vertical-bar-shape-2"></span> <span class="vertical-bar-shape vertical-bar-shape-3"></span> <span class="vertical-bar-shape vertical-bar-shape-4"></span> <div class="container"> <div class="row"> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Chúng tôi</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/about.html">Giới thiệu</a></li> <li><a href="/contact.html">Liên hệ</a></li> <li><a href="/contact.html">Tuyển dụng</a></li> <li><a href="/contact.html">Quảng cáo</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Điều khoản</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/privacy-statement.html">Điều khoản hoạt động</a></li> <li><a href="/terms-and-conditions.html">Điều kiện tham gia</a></li> <li><a href="/privacy-statement.html">Quy định cookie</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Trợ giúp</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="/contact.html">Hướng dẫn</a></li> <li><a href="/contact.html">Loại bỏ câu hỏi</a></li> <li><a href="/contact.html">Liên hệ</a></li> </ul> </div> </div> <div class="col-lg-3 responsive-column-half"> <div class="footer-item"> <h3 class="fs-18 fw-bold pb-2 text-white">Mạng xã hội</h3> <ul class="generic-list-item generic-list-item-hover-underline pt-3 generic-list-item-white"> <li><a href="#"><i class="fab fa-facebook-f mr-1"></i> Facebook</a></li> <li><a href="#"><i class="fab fa-twitter mr-1"></i> Twitter</a></li> <li><a href="#"><i class="fab fa-linkedin mr-1"></i> LinkedIn</a></li> <li><a href="#"><i class="fab fa-instagram mr-1"></i> Instagram</a></li> </ul> </div> </div> </div> </div> <hr class="border-top-gray my-5"> <div class="container"> <div class="row align-items-center pb-4 copyright-wrap"> <div class="col-6"> <a href="//www.dmca.com/Protection/Status.aspx?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" title="DMCA.com Protection Status" class="dmca-badge"> <img src ="https://images.dmca.com/Badges/dmca_protected_sml_120am.png?ID=33e5dca6-f8c5-4c6f-b8e6-a247229d2953" width="123px" height="21px" alt="DMCA.com Protection Status" /></a> <script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js"> </script> </div> <div class="col-6"> <div class="copyright-desc text-right fs-14"> <div>Bản quyền © 2021 <a href="https://thattruyen.com">thattruyen.com</a> Inc.</div> </div> </div> </div> </div> </section> <script> $( document ).ready(function() { setTimeout(showMoreButton, 3000); function showMoreButton(){ let minheight = 1000; minheight = parseInt($("#entryContent").innerHeight())/3; $("#entryContent").css('min-height', minheight).css('max-height', minheight).css('overflow', 'hidden'); $("#readmore_content").click(function(){ $("#entryContent").css('min-height', '').css('max-height', '').css('overflow', ''); $(".readmore_content_exists").css('display', 'none'); }) } }); </script>   <div id="back-to-top" data-toggle="tooltip" data-placement="top" title="Lên đầu trang"> <img alt="" src="/dist/images/svg/arrow-up_20.svg"> </div>  <script src="https://thattruyen.com/dist/js/bootstrap.bundle.min.js"></script> <script src="https://thattruyen.com/dist/js/moment.js"></script> <script src="https://thattruyen.com/dist/js/read-more.min.js"></script> <script src="https://thattruyen.com/dist/js/main.js?v=6"></script>  <script type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "jxuz46z39u"); </script> </body> </html> <script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="09724df04d19f5c88089208f-|49" defer></script>