----
2.3 Sử dụng JavaScript
Tới đây đã có những khái niệm căn bản về ngôn ngữ lập trình
JavaScript. Phần này sẽ sử dụng JavaScript vào việc làm web. Bằng việc sử dụng
JavaScript trên đối tượng DOM, người lập trình có thể thao tác, chỉnh sửa các
phần tử, thuộc tính và nội dung của trang web.
2.3.1
DOM là gì?
DOM là viết tắt của Document Object Model (Mô hình đối tượng
tài liệu). DOM là một chuẩn của W3C, dùng để biểu diễn tài liệu HTML, XML; cho
phép người lập trình có thể truy cập và xử lý nội dung của tài liệu HTML, XML bằng
ngôn ngữ lập trình, ví dụ ngôn ngữ JavaScript. DOM gồm ba loại là Core DOM, XML
DOM và HTML DOM. Trong phần này chỉ quan tâm tới HTML DOM, để tiện trình bày, gọi
tắt là DOM.
Như đã biết, sau khi trình duyệt nhận được tài liệu HTML, nó
sẽ thực hiện phân tích mã HTML để tạo ra cây DOM (DOM tree).
Ở dạng DOM, mỗi phần tử (element) của tài liệu HTML đều được
xem là một đối tượng, có thuộc tính và phương thức. Do đó, người lập trình có
thể lấy, thay đổi, thêm, xóa các phần tử của tài liệu HTML. Mỗi phần tử được biểu
diễn bằng một nút (node) trong cây DOM.
Tài liệu HTML sẽ được chuyển thành một trong các loại nút
sau:
– Document: là nút gốc, đại diện cho toàn bộ tài liệu HTML
– Element: tất cả các phần tử của HTML đều thuộc loại nút
này
– Text: phần nội dung văn bản trong tài liệu HTML thuộc loại
nút này
– Attribute: thuộc tính của các phần tử trong tài liệu HTML
thuộc loại nút này
– Comment: các chú thích trong tài liệu HTML thuộc loại nút
này
Dưới đây là hình minh họa, kết quả chuyển từ tài liệu HTML
sang cây DOM.
Có thể xem DOM như một giao diện lập trình (một API) của một
trang HTML.
2.3.2 Truy cập tới các nút của cây DOM
Để tiện minh họa, các đoạn mã JavaScript sẽ thực hiện trên đoạn
mã HTML sau:
[HTML]
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>testing</title>
<script>
</script>
</head>
<body>
<div
id="header">
<h1>Trang
web của tôi</h1>
</div>
<div
id="content">
<p>Xin
chào</p>
<p
id="doan1" class="mau-do">Đoạn 1</p>
<p
id="doan2" class="mau-do">Đoạn 2</p>
</div>
<div
id="footer">
<p>copyright
©</p>
</div>
</body>
</html>
Phương thức
getElementsByTagName()
Sử dụng phương thức getElementsByTagName()
để lấy tham chiếu tới các phần tử theo tên, qua tham chiếu này có thể truy cập
tới phần tử. Do các phần tử trong HTML thường xuất hiện nhiều lần trong một tài
liệu, nên kết quả trả về của phương thức này là một danh sách các tham chiếu. Ví
dụ, đoạn mã sau sẽ lấy mọi tham chiếu của phần tử có tên là p, lưu vào biến paragraphs, rồi dựa vào tham chiếu, xuất phần văn bản nằm trong mỗi
phần tử ra cửa sổ thông báo (alert). Đặt đoạn mã này ngay trước thẻ
</body>,
<script>
var
paragraphs = document.getElementsByTagName('p');
for
(var i = 0; i < paragraphs.length; i++) {
alert(paragraphs[i].innerHTML);
}
</script>
Phương thức innerHTML()
ở đoạn mã trên dùng để lấy phần nội dung nằm trong một phần tử.
Phương thức
getElementById()
Phương thức getElementById()
dùng để lấy tham chiếu tới một phần tử dựa vào giá trị thuộc tính id của phần tử. Ví dụ, đoạn mã sau sẽ lấy
tham chiếu tới phần tử p có giá trị id là doan1, xuất nội dung của phần tử ra cửa sổ thông báo:
var paragraph = document.getElementById('doan1');
alert(paragraph.innerHTML);
Nếu để ý, sẽ thấy chữ Element trong phương thức
getElementById() là số ít chứ không phải số nhiều như trong phương thức
getElementsByTagName().
Phương thức getElementsByClassName()
Phương thức getElementsByClass()
dùng để lấy tham chiếu tới nhiều phần tử dựa vào giá trị thuộc tính class của phần tử. Ví dụ, đoạn mã sau sẽ
lấy tham chiếu tới các phần tử p có
giá trị class là mau-do, xuất nội dung của các phần tử ra cửa sổ thông báo:
var paragraphs = document.getElementsByClassName('mau-do');
for
(var i = 0; i < paragraphs.length; i++) {
alert(paragraphs[i].innerHTML);
}
Phương thức
querySelectorAll()
Phương thức querySelectorAll()
dùng để lấy tham chiếu tới các phần tử dựa vào bộ chọn CSS (CSS-style
selector). Ví dụ, đoạn mã sau sẽ lấy tham chiếu tới các phần tử p là con của phần tử div có id là content:
var paragraphs =
document.querySelectorAll('#content p');
for
(var i = 0; i < paragraphs.length; i++) {
alert(paragraphs[i].innerHTML);
}
Nếu để ý sẽ thấy, bộ chọn CSS cũng có thể là tên phần tử,
class, và id, do vậy phương thức querySelectorAll() có thể sử dụng để thay thế
cho các phương thức getElementsByTagName(),
getElementById(),getElementsByClass().
Ví dụ, hai đoạn mã sau là tương đương về chức năng:
var paragraphs = document.querySelectorAll('.mau-do');
for
(var i = 0; i < paragraphs.length; i++) {
alert(paragraphs[i].innerHTML);
}
Và
var paragraphs = document.getElementsByClassName('mau-do');
for
(var i = 0; i < paragraphs.length; i++) {
alert(paragraphs[i].innerHTML);
}
2.3.3 Truy cập tới thuộc tính
Ngoài việc tham chiếu tới các phần tử DOM, JavaScript còn
cho phép tham chiếu tới và lấy về giá trị của thuộc tính, sử dụng phương thức
getAttribute(), với tham số là tên của thuộc tính.
Ví dụ,
[HTML]
<p id="doan1" class="mau-do">Đoạn
1</p>
Đoạn mã sau sẽ lấy tham chiếu tới phần tử p, lưu vào biến para, sau đó lấy giá trị của thuộc tính class và xuất ra màn hình:
var para = document.getElementById('doan1');
alert(para.getAttribute('class'));
Kết quả xuất ra màn hình là: “mau-do”.
2.3.4 Thao tác trên các nút
Sau khi truy cập được tới các nút, lập trình viên có thể thực
hiện một số thao tác trên đó, ngoài ra cũng có thể thao tác trên thuộc tính hoặc
nội dung của nút.
Thiết lập giá trị cho
thuộc tính
Để thiết lập giá trị cho thuộc tính, sử dụng phương thức
setAttribute(), phương thức này cần hai tham số. Một là tên thuộc tính, hai là
giá trị của thuộc tính.
Ví dụ,
[HTML]
<p id="doan1" class="mau-do">Đoạn
1</p>
Đoạn mã sau sẽ sửa lại giá trị của class từ “mau-do” thành “mau-xanh”,
var para = document.getElementById('doan1');
para.setAttribute('class',
'mau-xanh');
[Kết quả]
<p id="doan1"
class="mau-xanh">Đoạn 1</p>
Ví dụ một số tình huống có thể dùng tới phương thức
setAttribute(),
– Cập nhật lại trạng thái chọn (checked) cho phần tử radio,
checkbox khi người dùng tương tác trên các phần tử khác
– Tìm phần tử link, sau đó thay đổi giá trị thuộc tính href,
để thay đổi toàn bộ phần định dạng CSS của trang web
– Cập nhật giá trị title dựa theo trạng thái của phần tử
Thay thế nội dung của
một phần tử
Để thiết lập phần nội dung của một phần tử, sử dụng phương
thức innerHTML(). Nội dung của một phần
tử có thể là văn bản hoặc phần tử khác.
Ví dụ,
[HTML]
<div id="header">
<h1>Trang
web của tôi</h1>
</div>
Đoạn mã sau sẽ chèn <h2>Phần
giới thiệu</h2> vào phần nội dung của phần tử div có id=“header”, nội
dung vừa được chèn sẽ thay thế toàn bộ nội dung trước đó của phần tử,
var headerDiv =
document.getElementById('header');
header.innerHTML
= '<h2>Phần giới thiệu</h2>';
Thao tác với thuộc
tính style
Có thể lấy, thêm, thay đổi hoặc gỡ bỏ phần định dạng CSS của
một phần tử bằng thuộc tính style. Việc thêm hoặc thay đổi nội dung CSS cũng giống
như việc định dạng cho phần tử bằng cách style theo kiểu inline.
Ví dụ,
[HTML]
<p id="doan1" class="mau-do">Đoạn
1</p>
Đoạn mã sau sẽ thêm thuộc tính CSS để nội dung của phần tử p sẽ có chữ màu đỏ và nền màu xanh,
var doan1 = document.getElementById('doan1');
doan1.style.color = 'red';
doan1.style.backgroundColor = 'green';
Lưu ý, tên các thuộc tính khi viết ở dạng CSS sẽ sử dụng dấu
gạch ngang (-) để nối các thuộc tính có hai từ trở lên (ví dụ:
background-color), tuy nhiên, trong JavaScript và DOM thì sẽ được chuyển sang dạng
camelCase (ví dụ backgroundColor).
Đoạn mã sau sẽ thực hiện lấy giá trị của CSS bằng thuộc tính
style,
var kq = doan1.style.color;
alert(kq);
Có thể viết rút gọn như sau:
document.getElementById('doan1').style.color = 'red';
document.getElementById('doan1').style.backgroundColor = 'green';
alert(document.getElementById('doan1').style.color);
Lab 2.3.a
-----------
Cập nhật [27/9/2018]
-----------
Xem thêm: Học làm web (64) - JS căn bản (6)