1. DOM Node - document.createElement()
Khi bạn sử dụng DOM Element để truy vấn tới một đối tượng HTML nào đó thì kết quả nó sẽ trả về một object và object đó ta gọi là DOM Nodes.
Ví dụ:
Với cách này bắt buộc phải tồn tại một đối tượng HTML đang hiển thị trên website thì mới khởi tạo thành công. Giả sử nếu bạn muốn tạo một Node mới hoàn toàn v không liên quan tới những thẻ HTML đang hiển thị trên website thì làm thế nào? Rất đơn giản chúng ta sẽ sử dụng phương thức document.createElement() với tham số truyền vào là tên của thẻ HTML cần tạo.
1 | var p = document.createElement("p"); |
Sau khi khởi tạo xong bạn hoàn toàn có thể sử dụng các phương thức, thuộc tính của DOM HTML, DOM CSS.
1 | p.innerHTML = "Học DOM Nodes tại freetuts.net" |
Để thêm Node này vào trang web thì chúng ta sử dụng phương thức appendChild (sẽ học ở bên dưới). Giả sử tôi thêm vào thẻ body thì làm như sau:
1 | document.getElementsByTagName('body')[0].appendChild(p); |
Và đây là toàn bộ code cho ví dụ này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <body> <script language="javascript"> // Tạo mới một thẻ p var p = document.createElement("p"); // Thêm nội dung HTML vào thẻ p p.innerHTML = "Học DOM Nodes tại freetuts.net" // Đưa thẻ P vào trong thẻ body document.getElementsByTagName('body')[0].appendChild(p); </script> </body></html> |
2. DOM Node - document.createTextNode()
Text node là một node đặc biệt, nó không phải là một thẻ HTML thông thường mà chỉ là một chuỗi (string) nên thông thường chúng ta sử dụng nó để thay thế cách gán thông thường node.innerHTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <html> <body> <script language="javascript"> // Tạo mới một thẻ p var p = document.createElement("p"); // Tạo text node var text = document.createTextNode("Học DOM Nodes tại freetuts.net"); // Thêm nội dung HTML vào thẻ p p.appendChild(text); // Đưa thẻ P vào trong thẻ body document.getElementsByTagName('body')[0].appendChild(p); </script> </body></html> |
Trong ví dụ này thay vì sử dụng cách thông thường như ví dụ ở phần 1 thì mình đã thay thế bằng cách sử dụng text node.
3. DOM Node - các phương thức khác
Phương thức appendChild()
Dùng để thêm (bổ sung) vào vị trí cuối cùng của đối tượng một thẻ HTML nào đó.
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html> <body> <div id="TOP"> Xin chào các bạn! </div> <input type="button" value="Append" id="btn-append"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-append"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ h1 var h1 = document.createElement("h1"); // Thêm nội dung HTML vào thẻ h1 h1.innerHTML = "Học DOM Nodes tại freetuts.net" // Đưa thẻ h1 vào trong thẻ div có id=TOP document.getElementById('TOP').appendChild(h1); }); </script> </body></html> |
Phương thức insertBefore()
Được dùng để thêm một Node vào đằng trước một node con nào đó. Phương thức này có hai tham số truyền vào insertBefore(node_insert, node_child), trong đó:
node_insertlà node bạn muốn thêm vàonode_childlà node con mà bạn muốn thêm vào đằng trước nó.
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <html> <body> <div id="content"> <h5>Xin chào các bạn</h5> <h5>chúc vui vẻ khi học bài</h5> </div> <input type="button" value="View" id="btn-view"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-view"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ h1 var h1 = document.createElement("h1"); // Thêm nội dung HTML vào thẻ h1 h1.innerHTML = "Chào mừng bạn đến với freetuts.net" // Lấy thẻ ngoài cùng var element = document.getElementById("content"); // Lấy thẻ cần isertBefore var element_child = document.getElementsByTagName("h5")[1]; // Insert Before element.insertBefore(h1, element_child); }); </script> </body></html> |
Phương thức removeChild()
Được dùng để xóa một node con ra khỏi node hiện tại.
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <html> <body> <div id="content"> <h5>chúc vui vẻ khi học bài</h5> </div> <input type="button" value="Remove" id="btn-remove"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-remove"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Lấy thẻ cần remove var need_remove = document.getElementsByTagName("h5")[0]; // Remove document.getElementById("content").removeChild(need_remove); }); </script> </body></html> |
Phương thức replaceChild()
Dùng để replace (thay thế) một node con nào đó bằng một node khác mới hoàn toàn.
Ví dụ:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <html> <body> <div id="content"> <h5>chúc vui vẻ khi học bài</h5> </div> <input type="button" value="Replace" id="btn-replace"/> <script language="javascript"> // Lấy button var button = document.getElementById("btn-replace"); // Thêm sự kiện click cho button button.addEventListener("click", function(){ // Tạo mới một thẻ var p = document.createElement("h1"); p.innerHTML = "Xin chào!"; // Lấy thẻ cần replace var replace = document.getElementsByTagName("h5")[0]; // Replace document.getElementById("content").replaceChild(p, replace); }); </script> </body></html> |
4. Lời kết
Việc sử dụng thành thạo các phương thức xử lý DOM Node rất quan trọng khi bạn làm việc với các thẻ HTML bằng Javascript. Nếu bạn sử dụng một JS Library như jQuery thì điều này khá đơn giản bởi vì nó đã viết ra những hàm cho chúng ta sử dụng sẵn nên hầu hết các lập trình viên đều không quan tâm đến những kiến thức thuần javascript như thế này.
0 Nhận xét