1. Các lớp node Dom trong JavaScript

Các nút DOM khác nhau có thể có các thuộc tính khác nhau. Ví dụ: một nút phần tử tương ứng với thẻ <a> có các thuộc tính liên quan đến liên kết và nút tương ứng với <input> có các thuộc tính liên quan đến đầu vào,… Các nút văn bản không giống như các nút phần tử. Nhưng cũng có những thuộc tính và phương thức chung giữa tất cả chúng, bởi vì tất cả các lớp của các nút DOM tạo thành một hệ thống phân cấp duy nhất.

Trong HTML DOM mọi thành phần đều được xem là một node , được biểu diễn trên một cấu trúc dạng cây gọi là DOM tree, trong đó có 3 loại quan trọng :

  • Document node : là tài liệu HTML, được thể hiện bởi thẻ <html>
  • Element node : đại diệu cho một phần tử HTML ( <head></head> , <title></title> , <a></a> , <p> …)
  • Text node : là các đoạn kí tự, đoạn text trong HTML ( ví dụ một đoạn văn bản trong một thẻ )
  • Ngoài 3 loại trên còn có các thuộc tính ( attribute node ) và các chú thích ( comment node ).

Vậy thì cơ bản ta chỉ cần hiểu mỗi khi ta lấy một đối tượng nào đó bằng cách sử dụng DOM Element , ta gọi nó là một node . Bây giờ ta sẽ tìm hiểu cách sử dụng và một số phương thức của DOM Node .

2. Thêm mới HTML Elements trong JavaScript

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 . Cách này sẽ bắt buộc ta phải tồn tại một đối tượng HTML hiển thị thì mới khởi tạo thành công. Vậy nếu ta muốn tạo một node mới hoàn toàn, không liên quan tới thẻ HTML đang hiển thị thì phải làm sao? 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.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<div id="div1">
<p id="p1">Tiêu Đề</p>
<p id="p2">Lập Trình Từ Đầu</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("Học JavaScript");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>

</body>
</html>

Trong ví dụ trên:

  • Phương thức createElement() giúp tạo một thẻ HTML, ta truyền vào tên thẻ cần tạo.
  • Phương thức createTextNode() giúp tạo một text node – một nội dung dạng text cho thẻ
  • Phương thức appendChild() có tác dụng thêm vào vị trí cuối cùng của thành phần. Như ví dụ trên node sẽ được thêm vào cuối cùng của thành phần NewP

3. Phương thức insertBefore() trong JavaScript

Với ví dụ ở phần trên ta đã sử dụng appendChild() để thêm phần tử mới làm phần tử con cuối cùng của phần tử gốc. Ta cũng có thể sử dụng phương thức insertBefore() . Nó được dùng để thêm một node vào đằng trước một node con nào đó.

Cú pháp: 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ụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<div id="div1">
<p id="p1">Tiêu Đề</p>
<p id="p2">Lập Trình Từ Đầu</p>
</div>

<script>
const para = document.createElement("p");
const node = document.createTextNode("Học JavaScript");
para.appendChild(node);

const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para,child);
</script>

</body>
</html>

4. Thay thế HTML Elements trong JavaScript

Để thay thế một phần tử thành HTML DOM, ta có thể dùng phương thức replaceChild() thay thế một node con nào đó bằng một node khác mới hoàn toàn.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<div id="div1">
<p id="p1">Tiêu Đề</p>
<p id="p2">Lập Trình Từ Đầu</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("Học JavaScript");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>

5. Xóa HTML Elements trong JavaScript

Phương thức remove() dùng để xóa một node con ra khỏi node hiện tại

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<div>
<p id="p1">Tiêu đề</p>
<p id="p2">Lập Trình Từ Đầu</p>
</div>

<button onclick="myFunction()">Xóa Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

Nếu phương thức remove() không hoạt động được ở các trình duyệt cũ, ta có thể sử dụng removeChild() để thay thế. Và với phương thức này ta phải tìm node cha để xóa nó.

Ví dụ:

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<div id="div1">
<p id="p1">Tiêu đề</p>
<p id="p2">Lập Trình Từ Đầu</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

</body>
</html>