Lesson 12: DOM, Events

PreviousLesson 11: Phương thức Array, Object NextLesson 13: Git cơ bản, deployment

Last updated 5 months ago

Lesson 12: DOM, Events

Trong nội dung bài học này, sẽ cung cấp các kiến thức sử dụng Javascript để lập trình các chức năng, xử lý giao diện.

Lý thuyết DOM

DOM (Document Object Model) là một tiêu chuẩn do W3C (World Wide Web Consortium) đưa ra, đại diện cho cấu trúc tài liệu HTML hoặc XML dưới dạng cây đối tượng.

Hiểu đơn giản rằng, các nội dung văn bản, cụ thể là các thẻ trong HTML, mỗi thẻ được coi như là một đối tượng, Javascript sẽ dễ dàng thao tác với các thẻ bằng cách truy xuất từ văn bản HTML.

Ví dụ:

Như hình ảnh trên, các thẻ luôn được nằm trong đối tượng document và cứ như vậy, khi các thẻ lồng nhau thì sẽ tạo ra nhiều các cấp hơn giống như mô hình cây. Khái niệm DOM còn được coi là một kỹ thuật nói về việc tương tác với các thẻ trên giao diện từ Javascript.

Cú pháp

Phải kết nối file html và file js

Để truy xuất một phần tử nào đó trong văn bản HTML ta có một số cú pháp như sau:

document.getElementById("value"): Truy xuất phần tử theo id. (Lấy phần tử đầu tiên có id khớp)

const element = document.getElementById('myId');

document.getElementsByClassName("value"): Truy xuất tất cả các phần tử có cùng class.

const elements = document.getElementsByClassName('myClass');

document.getElementsByTagName(): Truy xuất tất cả các phần tử theo tên thẻ.

const paragraphs = document.getElementsByTagName('p');

document.querySelector(): Truy cập phần tử đầu tiên khớp với selector (CSS selector).

const firstDivParent = document.querySelector('div.parent');

document.querySelectorAll(): Truy cập tất cả các phần tử khớp với selector.

const flexItems = document.querySelectorAll('div.flex div.item');

Theo những cú pháp trên, về cú pháp query sẽ giúp dễ nhớ hơn, vì sử dụng cú pháp CSS selector, nhưng tuy nhiên cú pháp nào cũng quan trọng, tuỳ từng thời điểm hoặc bài toán ta sẽ sử dụng cú pháp phù hợp!

Mới bắt đầu tìm hiểu, có thể chỉ cần sử dụng cú pháp query để làm quen trước.

Thao tác với DOM

Khi đã truy xuất thành công được thẻ trên HTML, nhu cầu thao tác, chỉnh sửa nội dung hay các tính chất của thẻ là nhu cầu cơ bản. Ta sẽ có một số tính chất thao tác như sau:

Nội dung thẻ

Trong nội dung của thẻ với văn bản HTML, ta sẽ có 2 hình thái:

Văn bản - tức các dạng văn bản chữ bình thường

Ví dụ:

<p>Hello MindX!</p>

Nội dung HTML - tức các thẻ lồng bên trong thẻ

<ul>
    <li>1. Yêu Tổ Quốc, Yêu Đồng Bào</li>
    <li>2. Học Tập Tốt, Lao Động Tốt</li>
    <li>3. Đoàn Kết Tốt, Kỷ Luật Tốt</li>
    <li>4. Giữ Gìn Vệ Sinh Thật Tốt</li>
    <li>5. Khiêm Tốn, Thật Thà, Dũng Cảm</li>
</ul>

Hai dạng nội dung này, Javascript sẽ phân biệt, đâu là văn bản chữ bình thường, đâu là văn bản nội dung HTML. Để truy xuất được theo 2 dạng, ta sẽ có 2 cú pháp với DOM:

element.innerText - Chỉ lấy ra những nội dung nào là văn bản/chữ

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    
    <script src="./index.js"></script>
</body>

</html>

index.js

const p = document.querySelector('p.text'); // lấy ra thẻ p đầu tiên có class là text
console.log(p.innerText); // Hello MindX

Có thể thấy, kể cả nội dung bên trong thẻ p, có cả thẻ a nhưng đã được bỏ qua, chỉ lấy những nội dung là chữ.

element.innerHTML - Lấy ra toàn bộ nội dung bên trong thẻ, kể cả thẻ

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    <script src="./index.js"></script>
</body>

</html>

index.js

const p = document.querySelector('p.text'); // lấy ra thẻ p đầu tiên có class là text
console.log(p.innerHTML); // <a>Hello</a> MindX

Để thay đổi nội dung bên trong thẻ, ta chỉ cần sử dụng phép gán lại. Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    
    <script src="./index.js"></script>
</body>

</html>

Thay đổi với innerText

const p = document.querySelector('p.text');
p.innerText = "MindX School";

Đối với phép gán cho innerText, tất cả nội dung, kể cả thẻ sẽ không còn

Thay đổi với innerHTML

const p = document.querySelector('p.text');
p.innerHTML = "<span>Liên hệ ngay!</span><button>Liên hệ</button";

Trong phép gán với innerHTML, nếu muốn có thẻ, cần phải viết cú pháp thẻ trong string!

Thuộc tính thẻ

Do Javascript coi các thẻ sau khi DOM là những object, những thuộc tính (attributes) ở trên thẻ, Javascript hoàn toàn có thể thao tác được.

Coi thẻ là object, thuộc tính sẽ đóng vai trò như key trong object

Đối với thuộc tính class, sẽ chuyển thành className do class bị trùng từ khoá trong Javascript

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    <script src="./index.js"></script>
</body>

</html>

index.js

Thay đổi class:

const p = document.querySelector('p.text');
console.log(p.className); // text
p.className = "myText";

Thay đổi css:

Đối với thay đổi CSS, một số thuộc tính của style kết hợp bởi nhiều chữ, ví dụ: background-color, margin-top, ... sẽ được đổi sang dạng camel case bằng cách bỏ dấu gạch ngang - chữ cái đầu tiên sau dấu gạch ngang sẽ viết hoa, ví dụ:

background-color -> backgroundColor
margin-top -> marginTop
v.v

const p = document.querySelector('p.text');
p.style.color = 'red';
p.style.backgroundColor = 'blue'; // background-color -> backgroundColor
p.style.fontWeight = 'bold'; // font-weight -> fontWeight

Ngoài cách trên, ta có thể tư duy theo cách sử dụng logic object:

const p = document.querySelector('p.text');
const newStyleP = {
    color: 'red',
    fontWeight: 'bold',
    backgroundColor: 'blue'
};
for (const key in newStyleP) {
    p.style[key] = newStyleP[key];
}

Đối vơi style, sẽ không thay đổi từ mã nguồn CSS, mà sẽ viết dạng inline css cho thẻ.

Tương tự như vậy cho các thuộc tính khác và còn rất nhiều các cú pháp khác nữa, hãy dành thời gian tìm hiểu để mở rộng kiến thức.

Events

Sự kiện trong lập trình giao diện là một khái niệm nói về những thời điểm mà người dùng thực hiện những tương tác trên màn hình, ví dụ như: click chuột, nhấn phím, di chuột, v.v.

Để cài đặt được các sự kiện, ta sẽ có 2 cách

Truy cập sự kiện

Cú pháp để truy cập tất cả các sự kiện, ta chỉ cần biết tên sự kiện trong Javascript và thêm chữ on ở trước, Ví dụ sự kiện click -> onclick (không theo camel case)

Cú pháp:

element.event

Mỗi một sự kiện, coi như là chức năng, nên cần được biểu diễn bởi một hàm

Ví dụ:

element.onclick

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <button class="say">Say hello</button>
    <script src="./index.js"></script>
</body>

</html>

index.js

const buttonSay = document.querySelector('button.say');
buttonSay.onclick = function () {
    console.log('Hello Mindx'); // in ra Hello MindX khi bấm vào nút
}

Lắng nghe sự kiện

Lắng nghe sự kiện, nghĩa là sẽ theo dõi, nếu được thực hiện sự kiện, thì sẽ thực hiện thêm chức năng gì đó, khác với truy cập, truy cập là gán lại, còn lắng nghe là thực hiện thêm - tức trước đó đã được nạp chức năng gì, vẫn thực hiện chức năng đó và thực hiện thêm chức năng được cài đặt thêm.

const buttonSay = document.querySelector('button.say');
buttonSay.onclick = function () {
    console.log('Hello Mindx'); // in ra Hello MindX khi bấm vào nút
}

Cú pháp:

element.addEventListener(eventName, callback)

const buttonSay = document.querySelector('button.say');
buttonSay.addEventListener('click', function () {
    console.log('New function event');
});

Trên đây là cú pháp về cài đặt sự kiện, về tên của sự kiện và ý nghĩa còn rất nhiều, hãy tìm hiểu thêm để mở rộng kiến thức

Đối tượng Window (Giới thiệu thêm)

window là một đối tượng toàn cục (global object) trong JavaScript, đại diện cho cửa sổ trình duyệt hoặc cửa sổ hiển thị nội dung web. Nó là đối tượng gốc (root object) của tất cả các đối tượng khác trong trình duyệt. Mọi thứ truy cập trên trang web (DOM, BOM, các hàm toàn cục) đều có thể được truy cập thông qua đối tượng window.

Đặc điểm chính của đối tượng `window`:

Đối tượng window được tự động tạo ra khi trang web được tải vào trình duyệt.
Tất cả các biến và hàm toàn cục (khai báo ngoài mọi hàm hoặc đối tượng) đều trở thành thuộc tính và phương thức của đối tượng window.
Lập trình viên có thể không cần gọi tường minh window, vì các thuộc tính và phương thức của window có thể được truy cập trực tiếp. Ví dụ: thay vì gọi window.alert(), ta hoàn toàn có thể chỉ cần gọi alert()

Một số thuộc tính

window.document: Trả về đối tượng DOM đại diện cho tài liệu HTML đang được hiển thị.

console.log(window.document); // Trả về toàn bộ tài liệu HTML

window.location: Trả về đối tượng Location, chứa thông tin về URL hiện tại và cung cấp các phương thức để thay đổi URL.

console.log(window.location.href); // In ra URL hiện tại

Một số phương thức

window.alert(): Hiển thị một hộp thoại trên giao diện

window.alert("This is an alert!");

window.prompt(): Hiển thị một hộp thoại cho phép người dùng nhập thông tin. Trả về giá trị người dùng nhập vào, hoặc null nếu người dùng nhấn Cancel.

const name = window.prompt("Enter your name:");
console.log(name);

window.setTimeout(): Thực thi một đoạn mã hoặc hàm sau một khoảng thời gian trì hoãn.

window.setTimeout(function() {
  console.log("This will run after 3 seconds");
}, 3000); // Thực thi sau 3 giây

window.setInterval(): Thực thi một đoạn mã hoặc hàm liên tục sau mỗi khoảng thời gian cố định.

let count = 0;
window.setInterval(function() {
  console.log("This runs every 2 seconds", ++count);
}, 2000); // Thực thi mỗi 2 giây

window.clearTimeout() và window.clearInterval(): Dừng/huỷ các hành động được thực thi bởi setTimeout() hoặc setInterval().

let timeoutId = window.setTimeout(function() {
  console.log("This won't run");
}, 3000);
window.clearTimeout(timeoutId); // Ngăn không cho hàm setTimeout chạy

Một số sự kiện

Các sự kiện của đối tượng window giúp lập trình viên thiết lắng nghe và phản hồi các thay đổi liên quan đến cửa sổ trình duyệt hoặc trang web, chẳng hạn như khi trang tải xong hoặc khi người dùng thay đổi kích thước cửa sổ...

window.onload: Được gọi khi tài liệu HTML và tất cả tài nguyên (như hình ảnh, script) đã tải xong.

window.onload = function() {
  console.log("Page is fully loaded");
};

window.onresize: Được gọi khi kích thước của cửa sổ trình duyệt thay đổi.

window.onresize = function() {
  console.log("Window resized to: " + window.innerWidth + "x" + window.innerHeight);
};

window.onscroll: Được gọi khi người dùng cuộn trang

window.onscroll = function() {
  console.log("Page scrolled!");
};

Những nội dung trên là những kiến thức căn bản của đối tượng Window, sẽ có lúc cần phải sử dụng, hãy dành thời gian để tìm hiểu và tập luyện.

PreviousLesson 11: Phương thức Array, Object NextLesson 13: Git cơ bản, deployment

Last updated 5 months ago

Trong nội dung bài học này, sẽ cung cấp các kiến thức sử dụng Javascript để lập trình các chức năng, xử lý giao diện.

Lý thuyết DOM

DOM (Document Object Model) là một tiêu chuẩn do W3C (World Wide Web Consortium) đưa ra, đại diện cho cấu trúc tài liệu HTML hoặc XML dưới dạng cây đối tượng.

Ví dụ:

Cú pháp

Phải kết nối file html và file js

Để truy xuất một phần tử nào đó trong văn bản HTML ta có một số cú pháp như sau:

document.getElementById("value"): Truy xuất phần tử theo id. (Lấy phần tử đầu tiên có id khớp)

const element = document.getElementById('myId');

document.getElementsByClassName("value"): Truy xuất tất cả các phần tử có cùng class.

const elements = document.getElementsByClassName('myClass');

document.getElementsByTagName(): Truy xuất tất cả các phần tử theo tên thẻ.

const paragraphs = document.getElementsByTagName('p');

document.querySelector(): Truy cập phần tử đầu tiên khớp với selector (CSS selector).

const firstDivParent = document.querySelector('div.parent');

document.querySelectorAll(): Truy cập tất cả các phần tử khớp với selector.

const flexItems = document.querySelectorAll('div.flex div.item');

Mới bắt đầu tìm hiểu, có thể chỉ cần sử dụng cú pháp query để làm quen trước.

Thao tác với DOM

Nội dung thẻ

Trong nội dung của thẻ với văn bản HTML, ta sẽ có 2 hình thái:

Văn bản - tức các dạng văn bản chữ bình thường

Ví dụ:

<p>Hello MindX!</p>

Nội dung HTML - tức các thẻ lồng bên trong thẻ

<ul>
    <li>1. Yêu Tổ Quốc, Yêu Đồng Bào</li>
    <li>2. Học Tập Tốt, Lao Động Tốt</li>
    <li>3. Đoàn Kết Tốt, Kỷ Luật Tốt</li>
    <li>4. Giữ Gìn Vệ Sinh Thật Tốt</li>
    <li>5. Khiêm Tốn, Thật Thà, Dũng Cảm</li>
</ul>

element.innerText - Chỉ lấy ra những nội dung nào là văn bản/chữ

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    
    <script src="./index.js"></script>
</body>

</html>

index.js

const p = document.querySelector('p.text'); // lấy ra thẻ p đầu tiên có class là text
console.log(p.innerText); // Hello MindX

Có thể thấy, kể cả nội dung bên trong thẻ p, có cả thẻ a nhưng đã được bỏ qua, chỉ lấy những nội dung là chữ.

element.innerHTML - Lấy ra toàn bộ nội dung bên trong thẻ, kể cả thẻ

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    <script src="./index.js"></script>
</body>

</html>

index.js

const p = document.querySelector('p.text'); // lấy ra thẻ p đầu tiên có class là text
console.log(p.innerHTML); // <a>Hello</a> MindX

Để thay đổi nội dung bên trong thẻ, ta chỉ cần sử dụng phép gán lại. Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    
    <script src="./index.js"></script>
</body>

</html>

Thay đổi với innerText

const p = document.querySelector('p.text');
p.innerText = "MindX School";

Đối với phép gán cho innerText, tất cả nội dung, kể cả thẻ sẽ không còn

Thay đổi với innerHTML

const p = document.querySelector('p.text');
p.innerHTML = "<span>Liên hệ ngay!</span><button>Liên hệ</button";

Trong phép gán với innerHTML, nếu muốn có thẻ, cần phải viết cú pháp thẻ trong string!

Thuộc tính thẻ

Do Javascript coi các thẻ sau khi DOM là những object, những thuộc tính (attributes) ở trên thẻ, Javascript hoàn toàn có thể thao tác được.

Coi thẻ là object, thuộc tính sẽ đóng vai trò như key trong object

Đối với thuộc tính class, sẽ chuyển thành className do class bị trùng từ khoá trong Javascript

Ví dụ:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <p class="text"><a>Hello</a> MindX</p>
    <script src="./index.js"></script>
</body>

</html>

index.js

Thay đổi class:

const p = document.querySelector('p.text');
console.log(p.className); // text
p.className = "myText";

Thay đổi css:

background-color -> backgroundColor
margin-top -> marginTop
v.v

const p = document.querySelector('p.text');
p.style.color = 'red';
p.style.backgroundColor = 'blue'; // background-color -> backgroundColor
p.style.fontWeight = 'bold'; // font-weight -> fontWeight

Ngoài cách trên, ta có thể tư duy theo cách sử dụng logic object:

const p = document.querySelector('p.text');
const newStyleP = {
    color: 'red',
    fontWeight: 'bold',
    backgroundColor: 'blue'
};
for (const key in newStyleP) {
    p.style[key] = newStyleP[key];
}

Đối vơi style, sẽ không thay đổi từ mã nguồn CSS, mà sẽ viết dạng inline css cho thẻ.

Tương tự như vậy cho các thuộc tính khác và còn rất nhiều các cú pháp khác nữa, hãy dành thời gian tìm hiểu để mở rộng kiến thức.

Events

Để cài đặt được các sự kiện, ta sẽ có 2 cách

Truy cập sự kiện

Cú pháp:

element.event

Mỗi một sự kiện, coi như là chức năng, nên cần được biểu diễn bởi một hàm

Ví dụ:

element.onclick

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>

<body>
    <button class="say">Say hello</button>
    <script src="./index.js"></script>
</body>

</html>

index.js

const buttonSay = document.querySelector('button.say');
buttonSay.onclick = function () {
    console.log('Hello Mindx'); // in ra Hello MindX khi bấm vào nút
}

Lắng nghe sự kiện

const buttonSay = document.querySelector('button.say');
buttonSay.onclick = function () {
    console.log('Hello Mindx'); // in ra Hello MindX khi bấm vào nút
}

Cú pháp:

element.addEventListener(eventName, callback)

const buttonSay = document.querySelector('button.say');
buttonSay.addEventListener('click', function () {
    console.log('New function event');
});

Trên đây là cú pháp về cài đặt sự kiện, về tên của sự kiện và ý nghĩa còn rất nhiều, hãy tìm hiểu thêm để mở rộng kiến thức

Đối tượng Window (Giới thiệu thêm)

Đặc điểm chính của đối tượng `window`:

Đối tượng window được tự động tạo ra khi trang web được tải vào trình duyệt.
Tất cả các biến và hàm toàn cục (khai báo ngoài mọi hàm hoặc đối tượng) đều trở thành thuộc tính và phương thức của đối tượng window.
Lập trình viên có thể không cần gọi tường minh window, vì các thuộc tính và phương thức của window có thể được truy cập trực tiếp. Ví dụ: thay vì gọi window.alert(), ta hoàn toàn có thể chỉ cần gọi alert()

Một số thuộc tính

window.document: Trả về đối tượng DOM đại diện cho tài liệu HTML đang được hiển thị.

console.log(window.document); // Trả về toàn bộ tài liệu HTML

window.location: Trả về đối tượng Location, chứa thông tin về URL hiện tại và cung cấp các phương thức để thay đổi URL.

console.log(window.location.href); // In ra URL hiện tại

Một số phương thức

window.alert(): Hiển thị một hộp thoại trên giao diện

window.alert("This is an alert!");

window.prompt(): Hiển thị một hộp thoại cho phép người dùng nhập thông tin. Trả về giá trị người dùng nhập vào, hoặc null nếu người dùng nhấn Cancel.

const name = window.prompt("Enter your name:");
console.log(name);

window.setTimeout(): Thực thi một đoạn mã hoặc hàm sau một khoảng thời gian trì hoãn.

window.setTimeout(function() {
  console.log("This will run after 3 seconds");
}, 3000); // Thực thi sau 3 giây

window.setInterval(): Thực thi một đoạn mã hoặc hàm liên tục sau mỗi khoảng thời gian cố định.

let count = 0;
window.setInterval(function() {
  console.log("This runs every 2 seconds", ++count);
}, 2000); // Thực thi mỗi 2 giây

window.clearTimeout() và window.clearInterval(): Dừng/huỷ các hành động được thực thi bởi setTimeout() hoặc setInterval().

let timeoutId = window.setTimeout(function() {
  console.log("This won't run");
}, 3000);
window.clearTimeout(timeoutId); // Ngăn không cho hàm setTimeout chạy

Một số sự kiện

window.onload: Được gọi khi tài liệu HTML và tất cả tài nguyên (như hình ảnh, script) đã tải xong.

window.onload = function() {
  console.log("Page is fully loaded");
};

window.onresize: Được gọi khi kích thước của cửa sổ trình duyệt thay đổi.

window.onresize = function() {
  console.log("Window resized to: " + window.innerWidth + "x" + window.innerHeight);
};

window.onscroll: Được gọi khi người dùng cuộn trang

window.onscroll = function() {
  console.log("Page scrolled!");
};

Những nội dung trên là những kiến thức căn bản của đối tượng Window, sẽ có lúc cần phải sử dụng, hãy dành thời gian để tìm hiểu và tập luyện.

Lý thuyết DOM

Cú pháp

Thao tác với DOM

Nội dung thẻ

Thuộc tính thẻ

Events

Truy cập sự kiện

Lắng nghe sự kiện

Đối tượng Window (Giới thiệu thêm)

Đặc điểm chính của đối tượng window:

Một số thuộc tính

Một số phương thức

Một số sự kiện

Lý thuyết DOM

Cú pháp

Thao tác với DOM

Nội dung thẻ

Thuộc tính thẻ

Events

Truy cập sự kiện

Lắng nghe sự kiện

Đối tượng Window (Giới thiệu thêm)

Đặc điểm chính của đối tượng window:

Một số thuộc tính

Một số phương thức

Một số sự kiện

Đặc điểm chính của đối tượng `window`:

Đặc điểm chính của đối tượng `window`: