DOM Document

0
385
avascript la gi, hoc javascript co kho khong
This entry is part 22 of 35 in the series Tự học lập trình Javascript

Mình sẽ cho bạn thấy được sức mạnh của DOM Document ở bài viết này :v. Trong bài viết trước mình đã nêu ra 3 cách truy xuất phần tử HTML, mình nghĩ là phải làm rõ chúng ra trong bài viết này. Okê bắt đầu đọc hiểu nào :D.

dom document

DOM Document

Mình không biết bạn sẽ làm gì cơ mà, nếu bạn muốn truy cập vào một phần tử HTML nào đó. Thì bạn sẽ phải dùng đến thằng này, chính là thằng mình mà mình đang nói ở đây.

Truy xuất các phần tử

Truy xuất các phần tử của tài liệu là một trong những thao tác cơ bản khi sử dụng DOM trong lập trình với JavaScript. Tại sao phải truy xuất phần tử, bởi vì bạn cần làm điều đó.Tí nữa sẽ giải quyết sau :D.

Truy xuất phần tử bằng ID

Phương thức getElementById() là một trong những phương thức cơ bản của DOM, truy xuất các phần tử xác định của một tài liệu HTML và trả về tham chiếu đến phần tử đó. Phần tử phải có thuộc tính id để được truy xuất bằng phương thức này.

Trong ví dụ trên:

  1. Mình đặt id cho thẻ h4  là “h-4”
  2. Dùng biến x để chứa phần tử h4 sau khi sử dụng document.getElementById('h-4') để truy xuất phần tử
  3. Dùng phương thức console.log(x) để kiểm tra đã truy xuất được phần tử h4 hay chưa.

Lưu ý: Khi truy xuất phần tử thì nên đặt nó vào một cái biến để dễ sử dụng

Truy xuất bằng tên thẻ HTML

Phương thức getElementById() rất hữu dụng khi bạn chỉ cần truy xuất một hoặc vài phần tử. Tuy nhiên, nếu bạn muốn truy xuất nhiều phần tử cùng lúc thì dùng phương thức getElementsByTagName() sẽ tốt hơn nhiều. Phương thức getElementsByTagName() trả về một mảng hoặc danh sách tất cả các phần tử có tên thẻ trùng với tên thẻ trong tham số.

Điểm khác biệt của IDTagName là ở chữ s sau getElement thằng có thằng không, s là số nhiều đúng k. Có nghĩa là thằng TagName sẽ trả về một đống phần tử còn Id thì duy nhất thôi nhé. Khi truy xuất bằng TagName chúng ta cần duyệt mảng để lấy phần tử ngon nhất.

Trong ví dụ trên:

  1. Mình sẽ truy xuất thẻ h4
  2. Dùng biến x để chứa phần tử h4 sau khi sử dụng document.getElementsByTagName('h4') để truy xuất phần tử
  3. Dùng phương thức console.log(x) để kiểm tra đã truy xuất được tất cả thẻ h4 hay chưa.
  4. Dùng phương thức alert(x[2].innerHTML) để thông báo ra màn hình nội dung của phần từ h4 thứ 3.

Thay đổi các thành phần HTML

Đây là câu trả lời tại sao phải truy xuất phần tử .

Phương thức Mô tả
element.innerHTML =  new html contentThay đổi nội dung bên trong của phần tử HTML
element.attribute = new valueThay đổi thuộc tính của phần tử HTML
element.setAttribute(attribute, value)Thay đổi thuộc tính của phần tử HTML
element.style.property = new styleThay đổi style của phần tử HTML

element.innerHTML 

Mình đã thay đổi nội dung thẻ h4  thành “Em cua ngay hom wa”

Mình đã thay đổi nội dung thẻ h4  thành một thẻ button có tên là Click me.

element.attribute

Mình đã thay đổi attribute href của thẻ a thành ‘https://youtube.com’.

element.setAttribute(attribute,value)

Mình đã thay đổi attribute href của thẻ a thành ‘https://facebook.com’.

element.style.property

Mình đã thay đổi  style color của thẻ a  thành màu “red”.

Bây giờ đã hiểu DOM Document là gì rồi phải không. Mình viết đến đây thôi, mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.

Series Navigation<< HTML DOM là gì ?Sự kiện (Event) trong Javascript >>
avatar
  Subscribe  
Notify of