Video học lập trình mỗi ngày

DOM là gì trong HTML? DOM HTML trong Javascript được sử dụng và lập trình như thế nào? Hầu như những người đọc bài viết này, tôi dám chắc là họ đã từng kinh qua nhiều thư viện Javascript, là biết nên sử dụng DOM khi nào? Và tại sao lại cần tìm hiểu về DOM.

Yêu cầu người đọc

Để hiểu một cách hiệu quả DOM và cách nó liên quan đến hoạt động với web như thế nào thì điệu kiện

- Hiểu về HTML và CSS - Hiểu cơ bản về JavaScript syntax và code structure.

DOM là gì?

DOM là gì trong HTML - Khi bạn lướt một website thì những hình ảnh sinh động đập vào mắt của bạn một cách sinh động, đã bào giờ bạn tử hỏi làm thế nào để được như vậy không? Tất cả các hình ảnh động đó được thực hiện bằng cách thao tác với DOM. DOM được giải thích như sau:

DOM được viết tắt từ (Document Object Model), là một cách thể hiện giao diện bởi HTML và XML được trình duyệt đọc qua. Nó cho phép ngôn ngữ (JavaScript) thao tác, cấu trúc và định kiểu trang web của bạn. Sau khi trình duyệt đọc tài liệu HTML của bạn, nó sẽ tạo một cấu trúc được gọi là DOM và xác định lại để chúng ta những developer có thể truy cập được.

Lợi thế mà DOM mạng lại cho những developer đó là nếu hiểu được cách sự dụng DOM bạn sẽ có khả năng biến đổi giao diện mà không cần reload lại page. Chỉ cần bạn sáng tạo, mọi thứ được di chuyển một cách chuyên nghiệp, kéo , thả, xoá. Nói chung là bạn dùng đến đâu mà thôi.

Chính vì lý do đó, hôm nay trong bài post này, tôi và devjs lướt qua, cách lập trình vời DOM như thế nào? và có sợ hãi khi làm việc với DOM hay không?

Selecting elements - sử dụng querySelector

Cú pháp sử dụng querySelector

document.querySelector(/* your selector */)

Với cú pháp trên bạn có thể sử dụng bất kỳ để tìm selector như dưới đây:

#Single element

document.querySelector('.foo')            // class selector
document.querySelector('#foo')            // id selector
document.querySelector('div')             // tag selector
document.querySelector('[name="foo"]')    // attribute selector
document.querySelector('div + p > span')  

Notes: Khi sử dụng querySelector không tìm thấy một elements nào thì return null

Trên đó là một thủ thuật khi chúng ta đi tìm Single element, vậy nếu tìm multiple elements thì sao ?

#Multiple elements

Ví dụ là muốn tìm tất cả element tag p thì:

document.querySelectorAll('p')  // selects all 
elements

Notes: Khi sử dụng querySelectorAll thì return về một NodeList nếu không tìm thấy thì đó là NodeList rỗng.

Với một NodeList nó giống nhưng một Array-like objects  chính vì lẽ đó bạn có thể dùng forEach nhưng áp dụng với map(), reduce(), fitler()  thì không?

Nếu bạn muốn sử dụng chúng như một array thì có thể xem qua bài viết Array-like objects 

#Relative searches

Một thủ thật đơn giản, bạn không nhất thiết phải tìm tag p trên tất cả document, bạn có thể giới hạn tìm kiếm với cách dưới đây:

const div = document.querySelector('#container');
div.querySelectorAll('p')  // finds all 
tags in #container only

Đoạn code trên cho phép là chỉ tìm kiếm tag p trong element #container mà thôi. Nhưng nó quá dài dòng cho việc tìm kiếm, cho nên có một tips đơn giản như sau

const $ = document.querySelector.bind(document);
$('#container');
const $$ = document.querySelectorAll.bind(document);
$$('p');

Giờ đây bạn có thể sử dụng thoải mái với bất kỳ đâu.

Adding elements trong HTML

Trước kia muốn add <a href="/home" class="active">Home</a> thì tôi và bất kỳ bạn nào đang đọc bài viết này thì sẽ làm cách này:

const link = document.createElement('a');
link.setAttribute('href', '/home');
link.className = 'active';
link.textContent = 'Home';
document.body.appendChild(link);

Thấy thôi cũng đủ mệt rồi, đó là ví dụ ít vậy thôi, chứ nếu mà nhiều nữa thì sao? Chính vì lẽ đó jQuery lại được sử dụng rỗng rãi với cú pháp sau:

$('body').append('<a href="/home" class="active">Home</a>');

Nhưng với bạn nào như tôi thì giờ đây có một cách đơn giản rất nhiều đó là sử dụng insertAdjacentHTML và cho kết quả tương đương:

document.body.insertAdjacentHTML('beforeend', '<a href="/home" class="active">Home</a>');

insertAdjacentHTML là một method cho phép bạn insert một element bất cứ ở đâu với 4 vị trí sau:

beforebegin: Trước element

afterbegin: Trong element nhưng đầu tiên

beforeend: Trong element nhưng ở cuối

afterend: Sau element

Ví dụ

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Di chuyển một elements trong HTML insertAdjacentElement cũng có thể sử dụng để di chuyển một element đi đâu bạn muốn như ví dụ dưới đây:

<div class="first">
  <h1>Title</h1>
</div>
<div class="second">
  <h2>Subtitle</h2>
</div>
 

Ví dụ tôi muốn di chuyển h2 sau h1 thì có thể sử dụng và làm sau đây;

const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');
h1.insertAdjacentElement('afterend', h2);

Kết quả:

<div class="first">
  <h1>Title</h1>
  <h2>Subtitle</h2>
</div>
<div class="second">
  
</div>

Replacing elements trong HTML sử dụng DOM

Tiếp theo, giờ các bạn cũng đã hiểu rồi nên tôi sẽ khong giải thích kỹ như những ví dụ trước nữa, tôi sẽ làm luôn đấy, muốn thay thế một element thì bạn chỉ cần sử dụng replaceWith như cấu trúc dưới đây:

someElement.replaceWith(otherElement);

Ví dụ:

<div class="first">
  <h1>Title</h1>
</div>
<div class="second">
  <h2>Subtitle</h2>
</div>
const h1 = document.querySelector('h1');
const h2 = document.querySelector('h2');
h1.replaceWith(h2);
// result:
<div class="first">
  <h2>Subtitle</h2>
</div>
<div class="second">
  
</div>

Xoá một elements trong HTML sử dụng DOM

Trước đây để xoá một element có thể nói là rất cực luôn, rất chán và ghét:

const container = document.querySelector('#container');
container.parentNode.removeChild(container);

Giờ đây chỉ cần gọi remove() là có thể làm được điều ta muốn:

const container = document.querySelector('#container');
container.remove();  // hasta la vista, baby

Cách tạo element từ raw HTML

Nói nhanh :

const createElement = domString => new DOMParser().parseFromString(domString, 'text/html').body.firstChild;
const a = createElement('Home');

Check element trong HTML

<p class="foo">Hello world</p>
const p = document.querySelector('p');
p.matches('p');     // true
p.matches('.foo');  // true
p.matches('.bar');  // false, does not have class "bar"

Kết luận

Chỉ một bài viết devjs đã có thể sử dụng DOM như một pro trong lập trình DOM. Nếu bạn cảm thấy nó thú vị thì bạn nên đọc thêm về nó ở link dưới bài viết này. DOM API hãy nhớ rằng một API cực kỳ mạnh mẽ và linh hoạt, mặc dù hơi dài dòng. DOM là kiến thức cần thiết cho mọi developer JavaScript vì bạn có thể sử dụng nó mỗi ngày. Đừng sợ DOM, hãy cố găng sử dụng chúng, nó sẽ giúp bạn cải thiện lập trình mỗi ngày.

Push origin:  Using the DOM like a Pro