[BÀI 13] PHƯƠNG THỨC THƯỜNG GẶP TRONG DOM
DOM cung cấp cho chúng ta rất nhiều phương thức để thao tác trên đối tượng. Sau đây chúng ta đi tìm hiểu một số các phương thức thường dùng. Ph ươ ng th ứ c getElementById(id) Truy xuất đến một phần tử thông qua id của nó. Ví dụ: ...
DOM cung cấp cho chúng ta rất nhiều phương thức để thao tác trên đối tượng. Sau đây chúng ta đi tìm hiểu một số các phương thức thường dùng.
Phương thức getElementById(id)
Truy xuất đến một phần tử thông qua id của nó.
Ví dụ:
|
1 2 3 4 5 6 |
<body> <script type="text/javascript"> var Devpro = document.getElementById('content'); </script> <p id="content">Devpro - 147 Mai Dich,Cau Giay,HN!!!</p> </body> |
=> Truy xuất tới id ở thẻ <p> với nội dung “Devpro 147 Mai Dich, Cau Giay, HN” rồi hiển thị lên màn hình.
Phương thức getElementsByName(name)
Trả về một tập hợp các đối tượng với tên xác định (lấy phần tử theo tên, chính là thuộc tính name trong thẻ).
Ví dụ:
|
1 2 3 4 5 6 7 8 |
<body> <script type="text/javascript"> var Devpro = document.getElementsByName("content"); </script> <p name="content">Dev</p> <p name="content">Pro</p> <p name="content">Company</p> </body> |
=> Với 3 thẻ <p> có cùng thuộc tính name là “content” khi phương thức getElementsByName(“content”) truy xuất đến và trả về 3 đối tượng có cùng thuộc tính là “content” và hiển thị chúng ta ngoài màn hình.
Phương thức getElementsByTagName()
Trả về một tập hợp các đối tượng với tên thẻ xác định (lấy phần tử theo tên thẻ HTML).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<body> <script type="text/javascript"> function myFunction() { var x = document.getElementsByTagName("a"); document.getElementById("demo").innerHTML = x[0].innerHTML; } </script> <button onclick="myFunction()">Click Here</button> <br> <a href="http://devpro.edu.vn/">DevPro</a><br> <a href="http://mp3.zing.vn/">Mp3</a><br> <a href="http://www.24h.com.vn/">24H</a> <p id="demo"></p> </body> |
=> Truy xuất đến tên thẻ <a> trong HTML rồi hiển thị kết quả ra màn hình, ngoài thẻ <a> còn có các thẻ như <p>, <div>, <li> mà chúng ta cũng có thể sử dụng khi phương thức getElementsByTagName gọi đến.
Phương thức createElement()
Khởi tạo Node (đối tượng) mà không liên quan đến các thẻ HTML đã được hiển thị từ trước đó. Chỉ cần dùng phường thức createElement() với tên thẻ HTML cần tạo là được.
|
1 2 3 4 5 6 7 8 9 10 11 |
<body> <p>Click Button</p> <input type="button" value="Click Here" onclick="myFunction()"> <script> function myFunction() { var p = document.createElement("p"); p.innerHTML ="DevPro - 147 Mai Dich"; document.body.appendChild(p); } </script> </body> |
=> Ở đây ta sử dụng thẻ <p> để phương thức createElement() tạo ra thành phần trong thẻ appendChild(node) dùng để thêm 1 nút con vào nút hiện tại. innerHTML lấy hoặc thay đổi nội dung trong thẻ HTML.
