----
2.3.5 Thêm và gỡ bỏ phần tử
Ở các phần trước đã biết cách tham chiếu tới nút, thao tác
trên phần nội dung, và thuộc tính của nút. Tuy nhiên, tất cả đều được thực hiện
trên các nút có sẵn. Phần này sẽ giới thiệu cách để tạo ra nút, gắn nút vào cây
DOM, cũng như gỡ bỏ các nút khỏi cây.
Tạo phần tử mới
Để tạo phần tử mới, sử dụng phương thức createElement(). Tên
phần tử cần tạo chính là tham số của hàm. Ví dụ,
var newDiv = document.createElement(‘div’);
Lưu ý, mặc dù phần tử đã được tạo
ra nhưng nó chưa xuất hiện trên trang web, mà nó đang tồn tại dưới dạng một biến
của JavaScript. Chỉ khi nào thực hiện động tác gắn vào cây DOM thì nó mới xuất
hiện trên trang web. Hiểu nôm na, phần tử đang là một vùng nhớ, có nội dung, được
đặt tên, nhưng chưa được liên kết vào một nút nào đó trong cây DOM.
Tạo nút văn bản
Như đã biết, trong cây DOM, phần nội dung văn bản bên trong một
phần tử HTML được gọi là nút Text. Để tạo nút văn bản (nút Text), sử dụng
phương thức createTextNode(). Vậy có thể hiểu createElement là tạo phần tử cha,
createTextNode() là tạo phần tử con, là nội dung của phần tử cha. Ví dụ,
var ourText = document.createTextNode(‘This is our text’);
Lưu ý: nút văn bản cũng đang tồn tại trong JavaScript, chứ
chưa xuất hiện trong trang web.
Phương thức appendChild()
Phương thức appendChild() dùng để gắn các nút được tạo trong
JavaScript vào cây DOM, hay nói cách khác là cho nút đó xuất hiện lên trang
web.
Tham số của phương thức appendChild() chính là nút cần gắn
vào cây DOM. Bạn sẽ đứng ở nút đã tồn tại trong cây DOM để gọi phương thức
appendChild(), và nút bạn đang đứng chính là nút cha.
Cú pháp là,
nut-cha.appenChild( nut-con );
Ví dụ,
Trang web đang gồm một div có id=“nut-cha”,
<div id="nut-cha"></div>
Giờ sẽ tạo phần tử p,
biến newParagraph sẽ tham chiếu tới
phần tử p này,
var newParagraph = document.createElement('p');
Và tạo một nút để chứa phần văn bản sẽ chèn vào phần tử p, biến content sẽ tham chiếu tới nút văn bản này,
var content = document.createTextNode('Xin chào các bạn');
Thực hiện gắn nút content
vào nút newParagraph, nghĩa là chèn nội
dung vào phần tử p,
newParagraph.appendChild(content);
Tham chiếu tới div có id=“nut-cha”, và gắn nút newParagraph
vào, nghĩa là chèn phần tử p vào làm con của phần tử div,
var nut_cha = document.getElementById('nut-cha');
nut_cha.appendChild( newParagraph );
Xem trang web kết quả sẽ thấy có dòng chữ “Xin chào các bạn”.
Phương thức
insertBefore()
Phương thức insertBefore() được sử dụng để gắn một nút vào
trước một nút khác. Một cách hình ảnh, trên cây DOM, nút được gắn vào sẽ nằm ở
phía trái (cùng cấp) của một nút đã có sẵn. Hay nói cách khác phương thức
insertBefore() sẽ chèn một phần tử vào trước một phần tử khác trong tài liệu
HTML, hai phần tử này sẽ là “anh em” với nhau. Phương thức này cũng cần tham
chiếu tới phần tử cha của hai phần tử “anh em”.
Ví dụ,
<div id="nut-cha">
<p
id="doan1">Nội dung đoạn văn bản 1</p>
</div>
Tạo hai biến để tham chiếu tới hai phần tử div và p,
var nutCha = document.getElementById('nut-cha');
var nutP = document.getElementById('doan1');
Tạo phần tử h1, nội dung cho h1, gắn nội dung cho h1,
var tieuDe = document.createElement('h1');
var noiDungTieuDe = document.createTextNode('Tiêu đề mức một');
tieuDe.appendChild( noiDungTieuDe );
Trong phần tử div, chèn h1 vào trước p,
nutCha.insertBefore( tieuDe, nutP );
Phương thức
replaceChild()
Phương thức replaceChild() được sử dụng để thay thế một nút
bằng một nút khác. Phương thức này cần hai tham số, là hai nút sẽ được thay thế
cho nhau. Ngoài ra, cũng cần tham chiếu tới nút cha của hai nút sẽ được thay thế.
Ví dụ, sẽ thực hiện thay thế phần tử p bằng phần tử img,
<div id="nut-cha">
<p
id="doan1">Nội dung đoạn văn bản 1</p>
</div>
Tạo hai biến để tham chiếu tới hai phần tử div và p,
var nutCha = document.getElementById('nut-cha');
var nutP = document.getElementById('doan1');
Tạo phần tử img,
var newImg = document.createElement('img');
Thiết lập thuộc tính src cho img,
newImg.setAttribute('src', 'anh.jpg');
Thay thế phần tử p bằng phần tử img,
nutCha.replaceChild(newImg, nutP);
Phương thức
removeChild()
Phương thức removeChild() được sử dụng để gỡ bỏ một nút hoặc
cả một nhánh ra khỏi cây DOM. Để ý là nút không chỉ là các phần tử, mà nút cũng
có thể là nội dung bên trong phần tử (ví dụ TextNode). Phương thức này sử dụng
một tham số, đó là nút sẽ bị gỡ bỏ. Ngoài ra cũng cần tham chiếu tới nút cha của
nút sẽ bị gỡ bỏ.
Ví dụ,
<div id="nut-cha">
<p
id="doan1">Nội dung đoạn văn bản 1</p>
<img
src="anh.jpg" alt="">
</div>
Đoạn mã sau sẽ gỡ bỏ phần tử p,
var nutCha = document.getElementById('nut-cha');
var nutP = document.getElementById('doan1');
nutCha.removeChild(nutP);
2.4 Một số bài tập về JavaScript
Phần này sẽ phân tích và thực hiện một số bài tập đơn giản để
củng cố kĩ năng làm việc với JavaScript.
2.4.1
Tạo bảng bằng JavaScript
Lab 2.4.a
[Mô tả chương trình]
– Tạo một giao diện cho người dùng nhập vào số hàng và số cột
của bảng cần tạo
– Sử dụng JavaScript để tạo và xuất bảng ra màn hình, giá trị
trong mỗi ô chính là chỉ số [hàngcột]
[Giao diện chương trình]
[HTML]
<h1>Tạo bảng bằng JavaScript</h1>
<ul>
<li>
<label>Nhập số hàng: </label>
<input
type="text" id="row" value="">
</li>
<li>
<label>Nhập
số cột: </label>
<input
type="text" id="col" value="">
</li>
<li>
<label></label>
<button onclick="createTable()" ;>Tạo
bảng</button>
</li>
</ul>
[CSS]
ul {
list-style-type: none;
}
label{
display:
inline-block;
width:
100px;
}
li {
margin:
10px 0;
}
[JavaScript]
function createTable() {
var
rowNumber = document.getElementById('row').value;
var
colNumber = document.getElementById('col').value;
// tạo
node (element) <table>
var table
= document.createElement('table');
// tạo
đường viền cho table
table.setAttribute('border', '1');
// căn
trái, bên trên cho table
table.style = 'margin-left: 100px; margin-top: 10px';
// tạo
node <tbody>
var tbody
= document.createElement('tbody');
// tạo
hàng và cột
for (i =
0; i < rowNumber; i++) {
var
row = document.createElement('tr');
for
(j = 0; j < colNumber; j++) {
var col =
document.createElement('td');
// tạo nội dung cho các ô của bảng
col.innerHTML = i + '' + j;
// gắn ô vừa tạo vào hàng
row.appendChild(col);
}
//
gắn hàng vừa tạo vào <tbody>
tbody.appendChild(row);
}
// gắn
<tbody> vào làm con của <table>
table.appendChild(tbody);
// gắn
table vào làm con của <body>
document.body.appendChild(table);
}
-----------
Cập nhật [7/10/2018]
-----------
Xem thêm: Học làm web (65) - JS căn bản (7)