PHẦN CƠ BẢN
VÒNG LẶP
DATA TYPES
EVENTS
DOM
BOM
OBJECT
BỔ SUNG
THỰC HÀNH
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

DOM Nodes trong Javascript

Trong series này chúng ta đã học về DOM khá nhiều rồi như: DOM Element, DOM HTML, DOM CSS nhưng có lẽ bạn vẫn chưa hiểu bản chất của các đối tượng trả về khi sử dụng DOM Element để truy vấn đó chính là DOM Nodes.

Vậy trong bài này chúng ta sẽ tìm hiểu khái niệm DOM Nodes là gì thông qua các ví dụ và bạn sẽ học luôn một số phương thức thường được sử dụng trong DOM Nodes.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

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 objectobject đó ta gọi là DOM Nodes.

Ví dụ:

var node = document.getElementById("some-id");

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.

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.

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:

document.getElementsByTagName('body')[0].appendChild(p);

Và đây là toàn bộ code cho ví dụ này:

XEM DEMO

<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>

Ok bây giờ chúng ta qua các phần tiếp theo để tìm hiểu thêm một số phương thức hay sử dụng trong DOM Nodes nhé.

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.

Ví dụ: XEM DEMO

<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ụ: XEM DEMO

<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_insert là node bạn muốn thêm vào
  • node_child là node con mà bạn muốn thêm vào đằng trước nó.

Ví dụ: XEM DEMO

<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ụ: XEM DEMO

<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ụ: XEM DEMO

<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.

Ngoài các phương thức mình liệt kê trên thì còn khá nhiều phương thức nên bạn có thể sử dụng Google để tìm kiếm trong quá trình học và làm việc của mình. Bản thân mình cũng vậy thôi không tài nào nhớ hết được nhung phải biết từ khóa để tìm kiếm.

Cùng chuyên mục:

Cách gộp hai object javascript lại với nhau

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Cách dùng innerHTML trong Javascript

Cách dùng insertBefore trong javascript

Cách dùng insertBefore trong javascript

Cách dùng insertAfter trong Javascript

Cách dùng insertAfter trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentNode trong Javascript

Cách dùng parentElement trong Javascript

Cách dùng parentElement trong Javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng các phần tử trong mảng javascript

Tính tổng hai số bằng Javascript (cộng hai số)

Tính tổng hai số bằng Javascript (cộng hai số)

Cách gán giá trị cho thẻ input trong javascript

Cách gán giá trị cho thẻ input trong javascript

Để gán giá trị cho thẻ input thì ta có hai cách, thứ nhất là…

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên âm trong javascript

Cách kiểm tra số nguyên dương trong javascript

Cách kiểm tra số nguyên dương trong javascript

Hàm closure trong javascript

Hàm closure trong javascript

Closure là một khái niệm không phải ai cũng ..

Biểu thức chính quy RegEx trong Javascript

Biểu thức chính quy RegEx trong Javascript

Bài này chúng ta sẽ tìm hiểu đến chuỗi và cách sử dụng biểu thức…

Cách dùng Import / Export Module trong javascript

Cách dùng Import / Export Module trong javascript

Khi bạn xây dựng một ứng dụng nhỏ thì việc đặt

Cơ chế hoạt động của hoisting trong Javascript

Cơ chế hoạt động của hoisting trong Javascript

Hoisting là vấn đề liên quan đến cách khai báo biến trong Javascript. Nó liên…

Cấp độ private / protected của class trong Javascript

Cấp độ private / protected của class trong Javascript

Top