HOME › học javascript - lập trình javascript cơ bản>>13. dom trong javascript

Tạo Node mới trong JavaScript

23 tháng 6 ,2022

Hướng dẫn cách tạo một Node mới trong JavaScript. Bạn sẽ học được 5 phương pháp tạo DOM Node tương ứng với 5 kiểu Node thường sử dụng trong JavaScript sau bài học này.

Chúng ta có 5 phương pháp tạo DOM Node tương ứng với 5 kiểu Node thường sử dụng trong JavaScript như sau:

Phương thức createElement: Tạo Element Node
Phương thức createTextNode: Tạo Text Node
Phương thức createAttribute : Tạo Attribute Node
Phương thức createComment: Tạo Comment Node
Phương thức createDocumentFragment: Tạo DocumentFragment Node

createElement trong JavaScript

createElement trong JavaScript là một phương thức của Document Object, có tác dụng tạo một Element Node mới trong JavaScript.

Cú pháp sử dụng createElement trong JavaScript để tạo một Element mới như sau:

document.createElement(localname)

Trong đó localname là tên thẻ của Element Node cần tạo. Phương thức này sẽ trả về kết quả là một Element Object chứa Element đã tạo, và chúng ta có thể thực hiện các thao tác với Element thông qua Element Object này.

Lưu ý là Element Node này chỉ được tạo ra chứ chưa được thêm vào cây DOM ban đầu. Để thêm Element vừa tạo vào DOM, chúng ta cần sử dụng thêm một số phương pháp thêm Node vào DOM.

Xem thêm: Thêm Node con vào Node chỉ định trong JavaScript

Ví dụ, chúng ta có thể tạo một Element với thẻ div, và xuất ra các giá trị tên Node, kiểu và giá trị Node của nó như sau:

let element = document.createElement('div');

console.log(element.nodeName);
//> DIV
console.log(element.nodeType);
//> 1
console.log(element.nodeValue);
//> null

createTextNode trong JavaScript

createTextNode trong JavaScript là một phương thức của Document Object, có tác dụng tạo một TextNode mới trong JavaScript.

Cú pháp sử dụng createTextNode trong JavaScript để tạo một TextNode mới như sau:

document.createTextNode(data)

Trong đó data là nội dung text của TextNode Node cần tạo. Phương thức này sẽ trả về kết quả là một Text Object chứa TextNode đã tạo, và chúng ta có thể thực hiện các thao tác với TextNode thông qua Text Object này.

Lưu ý là TextNode này chỉ được tạo ra chứ chưa được thêm vào cây DOM ban đầu. Để thêm TextNode vừa tạo vào DOM, chúng ta cần sử dụng thêm một số phương pháp thêm Node vào DOM.

Xem thêm: Thêm Node con vào Node chỉ định trong JavaScript

Ví dụ, chúng ta có thể tạo một TextNode với nội dung text là Xin chào, và xuất ra các giá trị tên Node, kiểu và giá trị Node của nó như sau:

let txtnode = document.createTextNode('Xin chào');

console.log(txtnode.nodeName);
//> #text
console.log(txtnode.nodeType);
//> 3
console.log(txtnode.nodeValue);
//> Xin chào

createAttribute trong JavaScript

createAttribute trong JavaScript là một phương thức của Document Object, có tác dụng tạo một AttributeNode mới trong JavaScript.

Cú pháp sử dụng createAttribute trong JavaScript để tạo một AttributeNode mới như sau:

document.createAttribute (localname)

Trong đó localname là tên thuộc tính của AttributeNode Node cần tạo. Phương thức này sẽ trả về kết quả là một Attr Object chứa AttributeNode đã tạo, và chúng ta có thể thiết lập giá trị thuộc tính của AttributeNode thông qua Attr Object này.

Ví dụ, chúng ta có thể tạo một AttributeNode với tên thuộc tính là id, và giá trị thuộc tính là sample như sau:

let attrnode = document.createAttribute('id');
attrnode.value = 'sample';

console.log(attrnode.nodeName);
//> id
console.log(attrnode.nodeType);
//> 2
console.log(attrnode.nodeValue);
//> sample

Lưu ý là AttributeNode này chỉ được tạo ra chứ chưa được thêm vào cây DOM ban đầu. Để thêm AttributeNode vừa tạo vào DOM, chúng ta cần sử dụng tới phương thức setAttributeNode của Element Object, với cú pháp như sau:

element.setAttributeNode(attrnode)

Trong đó attrnode là AttributeNode được tạo bởi phương thức createAttribute ở trên.
Ví dụ:

let element = document.createElement('div');
let attrnode = document.createAttribute('id');
attrnode.value = 'main';

element.setAttributeNode(attrnode);

createComment trong JavaScript

createComment trong JavaScript là một phương thức của Document Object, có tác dụng tạo một CommentNode mới trong JavaScript.

Cú pháp sử dụng createComment trong JavaScript để tạo một CommentNode mới như sau:

document.createComment(data)

Trong đó data là nội dung comment của CommentNode Node cần tạo. Phương thức này sẽ trả về kết quả là một Comment Object chứa CommentNode đã tạo, và chúng ta có thể thực hiện các thao tác với CommentNode thông qua Comment Object này.

Lưu ý là CommentNode này chỉ được tạo ra chứ chưa được thêm vào cây DOM ban đầu. Để thêm CommentNode vừa tạo vào DOM, chúng ta cần sử dụng thêm một số phương pháp thêm Node vào DOM.

Xem thêm: Thêm Node con vào Node chỉ định trong JavaScript

Ví dụ, chúng ta có thể tạo một CommentNode với nội dung comment là Tạo bởi Kiyoshi, và xuất ra các giá trị tên Node, kiểu và giá trị Node của nó như sau:

let commentnode = document.createComment('Tạo bởi Kiyoshi');

console.log(commentnode.nodeName);
//> #comment
console.log(commentnode.nodeType);
//> 8
console.log(commentnode.nodeValue);
//> Tạo bởi Kiyoshi

createDocumentFragment trong JavaScript

createDocumentFragment trong JavaScript là một phương thức của Document Object, có tác dụng tạo một DocumentFragment mới trong JavaScript.

Ở đây DocumentFragment hay còn goi là phân đoạn tài liệu, là một loại Document không chứa Document cha, trong nó chứa tập hợp các Node nhỏ, và bằng cách khai báo các Node nhỏ vào DocumentFragment rồi thêm DocumentFragment này vào DOM, chúng ta có thể tiết kiệm công sức so với việc thêm từng Node nhỏ vào DOM.

Cú pháp sử dụng createDocumentFragment trong JavaScript để tạo một DocumentFragment mới như sau:

document.createDocumentFragment()

Phương thức này sẽ trả về kết quả là một DocumentFragment Object chứa DocumentFragment đã tạo, và chúng ta có thể thực hiện các thao tác với DocumentFragment thông qua DocumentFragment Object này.

Ví dụ, chúng ta có thể tạo một DocumentFragment, và xuất ra các giá trị tên Node, kiểu và giá trị Node của nó như sau:

let fragment  = document.createDocumentFragment();

console.log(fragment.nodeName);
//> #document-fragment
console.log(fragment.nodeType);
//> 11
console.log(fragment.nodeValue);
//> null

Xem thêm: Thêm Node con vào Node chỉ định trong JavaScript

Tổng kết

Trên đây Kiyoshi đã hướng dẫn bạn cách tạo Node mới trong JavaScript rồi. Để nắm rõ nội dung bài học hơn, bạn hãy thực hành viết lại các ví dụ của ngày hôm nay nhé.

Và hãy cùng tìm hiểu những kiến thức sâu hơn về JavaScript trong các bài học tiếp theo.