27 Nov

Các phương thức trong DOM-Nodes 5.00/5 (100.00%) 1 vote

Tiếp tục với chuỗi kiến thức Javascript, Hôm nay hocthietkewweb.net sẽ giới thiệu đến các bạn Các phương thức trong DOM-Nodes.Trong HTML DOM, tất cả mọi thứ đều là node: tài liệu HTML hiện thời là document node, tất cả phần tử HTML bên trong tài liệu là element nodes, tất cả thuộc tính là attribute nodes, các đoạn văn bên trong phần tử HTML là text nodes, ghi chú là comment nodes.

 


Các phương thức về nodes khá nhiều, bạn có thể tham khảo thêm tạihttp://www.w3schools.com/jsref/dom_obj_all.asp. Tuy nhiên trong giới hạn bài này, chúng ta sẽ làm quen với một số phương thức đơn giản, thường dùng.

createElement

Phương thức này dùng để tạo một phần tử HTML mới.
Cú pháp

1
document.createElement('tên phần tử HTML');

createTextNode

Phương thức này dùng để tạo một chuỗi văn bản mới.
Cú pháp

1
document.createTextNode("chuỗi muốn nhập");

appendChild

Mỗi phần tử HTML có thể đứng độc lập hoặc có nhiều phần tử con bên trong nó. Phương thứcappendChild dùng để thêm một phần tử con vào bên trong một phần tử sẵn có trong tài liệu HTML.
Cú pháp

1
element.appendChild();

B1: Tạo file bai14.html, nhập đoạn code sau

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
34
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bài 14 - Nodes</title>
</head>
<body>
<ul id="list">
    <li>Phần tử thứ nhất</li>
    <li>Phần tử thứ hai</li>
    <li>Phần tử thứ ba</li>
    <li>Phần tử thứ tư</li>
</ul>
<button onClick="addNewLi()">Thêm phần tử li mới</button>
<script type="text/javascript" language="javascript">
//Chèn phần tử li mới vào list trên
function addNewLi()
{
    //Tạo phần tử li mới
    var newLi = document.createElement('li');
    
    //Tạo text node "Phần tử li mới"
    var newTextNode = document.createTextNode("Phần tử li mới");
    //Chèn chuỗi "Phần tử li mới" vào phần tử li vừa tạo
    newLi.appendChild(newTextNode);
    
    //Thực hiện chèn
    document.getElementById('list').appendChild(newLi);
}
</script>
</body>
</html>

B2: Mở file với trình duyệt

vietobject-javascript-dom-methods4

vietobject-javascript-dom-methods5

Nguồn: vietobject.com