#1 Tìm hiểu Javascript DOM Methods cho Web Developers

Để trở thành một web developer bạn phải thường xuyên thao tác với DOM, và khả năng thao tác DOM thành thạo là hai yếu tố quan trọng nhất. Đơn giản là vì DOM cho bạn sức mạnh thay đổi mọi thứ của trang web, khi mà mọi nội dung đều có thể được thêm bớt xóa sửa để mang lại trải nghiệm và nội dung tốt nhất.

DOM là tên gọi tắt của (Document Object Model – tạm dịch Mô hình Đối tượng Tài liệu), là một chuẩn được định nghĩa bởi W3C dùng để truy xuất và thao tác trên các tài liệu có cấu trúc dạng HTML hay XML bằng các ngôn ngữ lập trình thông dịch như Javascript, PHP, Python.

Ở trong phần 1 ở series Javascript DOM Methods này, mình sẽ điểm qua 6 phương thức thao tác với DOM cơ bản nhất. Hãy cùng điểm qua các phương thức này:

Mục lục

1. getElementById()
2. getElementsByClassName()
3. getElementsByTagName()
4. getElementsByName()
5. querySelector() 
6. querySelectorAll() 

1. getElementById()

getElementById(id) sẽ tham chiếu đến 1 nút duy nhất có thuộc tính id giống với id cần tìm. Vì id mang tính duy nhất nên bạn có thể nhanh chóng truy cập vào các phần tử cụ thể.

Syntax

var element = document.getElementById(id);

Với id là chuỗi duy nhất và phân biệt chữ hoa chữ thường.

Code Example

Ví dụ, ta tìm element của id='demo' và đổi Hello, Hiu Dev Blog thành Hello World.

<p id="demo">Hello, Hiu Dev Blog</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

Kết quả

See the Pen js dom methods - demo 1 - getElementById(id) by Hiu Dev (@hiudev) on CodePen.

Phương thức này là một trong những phương thức phổ biến nhất trong HTML DOM và được sử dụng hầu như mỗi khi bạn muốn thao tác hoặc lấy thông tin từ một thành phần trong document của bạn.

Trả về null nếu id được chỉ định không tồn tại.

Một id phải là duy nhất trong một trang. Tuy nhiên, nếu tồn tại nhiều hơn một phần tử với id được chỉ định, bạn có thể dùng phương thức getEuityById() trả về phần tử đầu tiên trong mã nguồn.

2. getElementsByClassName()

Phương thức getElementsByClassName() trả về một tập hợp tất cả các phần tử trong document với tên class được chỉ định.

Syntax

document.getElementsByClassName(classname)

className: Tên lớp _ cũng dùng để truy suất trực tiếp như id, nhưng một tên lớp có thể sử dụng cho nhiều phần tử

Code Example

Ví dụ sau tìm element trong class='example' và đổi thành Hello World.

<div class="example">Phần div đầu tiên chứa class="example".</div>

<div class="example">Phần div thứ 2 chứa class="example".</div>

<button onclick="myFunction()">Try it</button>


<script>
function myFunction() {
  var x = document.getElementsByClassName("example");
  x[0].innerHTML = "Hello World!";
}
</script>

Kết quả

See the Pen js dom methods - demo 2 - getElementsByClassName(className) by Hiu Dev (@hiudev) on CodePen.

3. getElementsByTagName()

Tham chiếu đến tất cả các nút thuộc tính tagName giống với tên thẻ cần tìm.

Syntax

document.getElementsByTagName(tagname)

Bạn có thể dùng parametervalue "*" để trả về tất cả các thành phần.

Code Example

Ví dụ, ta muốn tìm đồ uống (Coffee, Tea, Milk) thứ 2 trong list:

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>


<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
function myFunction() {
  var x = document.getElementsByTagName("LI");
  document.getElementById("demo").innerHTML = x[1].innerHTML;
}
</script>

Kết quả

See the Pen js dom methods - demo 3 - getElementsByTagName(name) by Hiu Dev (@hiudev) on CodePen.

4. getElementsByName()

getElementByName(name) dùng để tham chiếu đến tất cả các nút có thuộc tính name cần tìm.

Syntax

document.getElementsByName(name)

Lưu ý: Trong HTML5, Rất nhiều thẻ có thuộc tính name đã bị thay thế bằng thuộc tính id, do vậy khi sử dụng cần lưu ý sử dụng thuộc tính document.getElementById() trong các trường hợp thích hợp. Cũng lưu ý sử dụng hai phương thức getElementsByClassName() và getElementsByTagName() trong một số trường hợp.

Code Example 

Ví dụ sau dùng để tìm element có name là up và kiểm tra tagname:

<input type="text" name="down">

<button type="hidden" name="up">button</button>

<br/>

<script>
  var up_names = document.getElementsByName("up");
  document.writeln(up_names[0].tagName);
</script>

Kết quả

See the Pen CodePen Home js dom methods - demo 4 - getElementsByName(name) by Hiu Dev (@hiudev) on CodePen.

5. querySelector() 

Phương thức này để trả về thành phần đầu tiên phù hợp với bộ lọc CSS chúng ta truyền vào. Nếu không tìm thấy sẽ trả về null.

Syntax

document.querySelector(CSS selectors)

CSS selector là một hoặc nhiều các bộ lọc CSS.

Code Preview

Ví dụ sau tìm class='example' và tô màu nền thành đỏ:

<p class="example">Hello, Hiu Dev Blog</p> 

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.querySelector(".example").style.backgroundColor = "red";
}
</script>

Kết quả

See the Pen js dom methods - demo 5 - querySelector(selectors) by Hiu Dev (@hiudev) on CodePen.

6. querySelectorAll() 

Trả về tất cả các thành phần phù hợp với bộ lọc. Đầu ra của phương thức này sẽ là một đối tượng NodeList hoặc là một đối tượng empty.

Syntax

document.querySelectorAll(CSS selectors)

CSS selector cũng là một hoặc nhiều các bộ lọc CSS.

Code Example

Cũng giống với ví trên, ta tìm tất các class="example" để đổi background thành đỏ:

<p class="example">Hello, Hiu Dev Blog</p> 

<p class="example">Let's code together!</p>

<button onclick="myFunction()">Try it
</button>

<script>
function myFunction() {
  var x, i;
  x = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    x[i].style.backgroundColor = "red";
  }
  
}
  
</script>

Kết quả

See the Pen js dom methods - demo 6 - querySelectorAll() by Hiu Dev (@hiudev) on CodePen.

Lời kết

Vì là phần đầu trong chuỗi series Javascript DOM Methods nên mình chỉ điểm qua các lệnh cơ bản nhất, nhưng lại thông dụng và gặp nhiều nhất.

Các bạn có xem tất cả các ví dụ ở phần 1 và các phần sắp tới tại đây:

https://codepen.io/collection/DwPRVO

Hãy cùng chờ đón phần 2 với các lệnh nâng cao hơn, nhưng cũng không kém phần thông dụng.

Hi vọng bài viết này sẽ giúp bạn đôi chút trong qua trình thao tác với DOM. Vẫn còn rất nhiều điều hay ho. Hãy tìm hiểu thêm cho bản thân nữa nhé!

Cảm ơn bạn đã theo dõi bài viết.

By Hiếu Quốc