DOM Document
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.
NỘI DUNG BÀI VIẾT
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <h4 id='h-4'> DOM Document</h4> <script type="text/javascript"> var x = document.getElementById('h-4'); console.log(x); </script> </body> </html> |
Trong ví dụ trên:
- Mình đặt id cho thẻ
h4là “h-4” - Dùng biến
xđể chứa phần tửh4sau khi sử dụngdocument.getElementById('h-4')để truy xuất phần tử - Dùng phương thức
console.log(x)để kiểm tra đã truy xuất được phần tửh4hay 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 ID và TagName 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <h4 id='h-4'> DOM Document</h4> <h4>getElementsTagName()</h4> <h4>Standard Body</h4> <script type="text/javascript"> var x = document.getElementsByTagName('h4'); console.log(x); alert(x[2].innerHTML); </script> </body> </html> |
Trong ví dụ trên:
- Mình sẽ truy xuất thẻ
h4 - Dùng biến
xđể chứa phần tửh4sau khi sử dụngdocument.getElementsByTagName('h4')để truy xuất phần tử - Dùng phương thức
console.log(x)để kiểm tra đã truy xuất được tất cả thẻh4hay chưa. - 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ừh4thứ 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 content | Thay đổi nội dung bên trong của phần tử HTML |
| element.attribute = new value | Thay đổ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 style | Thay đổi style của phần tử HTML |
element.innerHTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <h4 id='h-4'> DOM Document</h4> <script type="text/javascript"> x = document.getElementById('h-4'); x.innerHTML = 'Em cua ngay hom wa'; </script> </body> </html> |
Mình đã thay đổi nội dung thẻ h4 thành “Em cua ngay hom wa”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <h4 id='h-4'> DOM Document</h4> <script type="text/javascript"> x = document.getElementById('h-4'); x.innerHTML = '<button>Click me</button'> </script> </body> </html> |
Mình đã thay đổi nội dung thẻ h4 thành một thẻ button có tên là Click me.
element.attribute
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <a href="https://google.com">Google</a> <script type="text/javascript"> x = document.getElementsByTagName('a'); x[0].href = 'http://youtube.com'; </script> </body> </html> |
Mình đã thay đổi attribute href của thẻ a thành ‘https://youtube.com’.
element.setAttribute(attribute,value)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <a href="https://google.com">Google</a> <script type="text/javascript"> x = document.getElementsByTagName('a'); x[0].setAttribute('href','https://facebook.com'); </script> </body> </html> |
Mình đã thay đổi attribute href của thẻ a thành ‘https://facebook.com’.
element.style.property
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>DOM Document</title> </head> <body> <a href="https://google.com">Google</a> <script type="text/javascript"> x = document.getElementsByTagName('a'); x[0].style.color = 'red'; </script> </body> </html> |
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.
