Học làm web (63) - JS căn bản (5)

Tiếp theo của: Học làm web (62) - JS căn bản (4)
----

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 &copy;</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ị iddoan1, 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ị classmau-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ử dividcontent:

 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);
                        }


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: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (64) - JS căn bản (6)