JavaScript và HTML

Articles

JavaScript và HTML

Bài viết này giải thích về JavaScript và HTML.

YouTube Video

Đối tượng `window` trong JavaScript

Đối tượng window trong JavaScript là đối tượng toàn cục trong môi trường trình duyệt, cung cấp các hàm và thông tin liên quan đến trang web và cửa sổ trình duyệt. Vì window là phạm vi toàn cục của trình duyệt, tất cả mã JavaScript chạy trong trình duyệt trở thành một phần của đối tượng window. Đối tượng window đóng vai trò quan trọng trong việc chạy JavaScript trong môi trường trình duyệt, cung cấp nhiều API và thuộc tính.

Các tính năng chính của đối tượng `window`

Thuộc tính

 1// Get and display the document's title
 2console.log(window.document.title);
 3
 4// Get and display the current URL
 5console.log(window.location.href);
 6
 7// Go back to the previous page
 8window.history.back();
 9
10// Display the browser's user agent
11console.log(window.navigator.userAgent);
12
13// Display the width and height of the viewport
14console.log(`Width: ${window.innerWidth}, Height: ${window.innerHeight}`);

window.document: Truy cập tài liệu HTML hiện tại.
window.location: Quản lý URL hiện tại và điều hướng trình duyệt.
window.history: Truy cập thông tin lịch sử của trình duyệt và cho phép điều hướng tới lui.
window.navigator: Cung cấp thông tin về trình duyệt và thiết bị.
window.innerWidth / window.innerHeight: Lấy chiều rộng và chiều cao của vùng hiển thị.

Phương thức

 1// Show an alert
 2window.alert('Hello, this is an alert!');
 3
 4// Show a confirmation dialog
 5if (window.confirm('Are you sure you want to proceed?')) {
 6    console.log('User clicked OK');
 7} else {
 8    console.log('User clicked Cancel');
 9}
10
11// Show a prompt dialog
12const userInput = window.prompt('Please enter your name:');
13console.log(`Hello, ${userInput}!`);
14
15// Open a new tab
16window.open('https://www.example.com', '_blank');
17
18// Display a message after 3 seconds
19window.setTimeout(() => {
20    console.log('This message appears after 3 seconds!');
21}, 3000);
22
23// Display a message every second
24const intervalId = window.setInterval(() => {
25    console.log('This message appears every second!');
26}, 1000);
27
28// Clear the interval after 5 seconds
29setTimeout(() => {
30    clearInterval(intervalId);
31    console.log('Interval cleared.');
32}, 5000);

window.alert(): Hiển thị một hộp thoại cảnh báo.
window.confirm(): Hiển thị một hộp thoại yêu cầu xác nhận từ người dùng và trả về kết quả OK hoặc Hủy.
window.prompt(): Hiển thị một hộp thoại yêu cầu nhập và lấy giá trị người dùng đã nhập.
window.open(): Mở một cửa sổ hoặc tab mới.
window.setTimeout() / window.setInterval(): Đặt hẹn giờ để thực thi một hàm sau một khoảng thời gian nhất định hoặc theo khoảng thời gian định kỳ.

Xử lý sự kiện

 1// Display a message when the page is fully loaded
 2window.onload = () => {
 3    console.log('Page is fully loaded!');
 4};
 5
 6// Display a message when the window is resized
 7window.onresize = () => {
 8    console.log('Window resized! New size:', window.innerWidth, 'x', window.innerHeight);
 9};
10
11// Display a message when the page is being scrolled
12window.onscroll = () => {
13    console.log('Page is being scrolled!');
14};

window.onload: Một sự kiện được thực thi khi trang đã tải hoàn toàn.
window.onresize: Một sự kiện được thực thi khi kích thước cửa sổ thay đổi.
window.onscroll: Một sự kiện kích hoạt khi người dùng cuộn trang.

Vai trò như một Biến Toàn cầu

1var myVar = 10;
2console.log(window.myVar); // 10

Đối tượng window chứa các biến và hàm toàn cục. Nói cách khác, các biến và hàm đã được khai báo tự động trở thành thuộc tính của window.

Thao tác DOM trong JavaScript

Thao tác DOM (Document Object Model) của JavaScript được sử dụng để tương tác động với các phần tử trên trang web. DOM đại diện cho cấu trúc của tài liệu HTML dưới dạng một cây, có thể được thay đổi bằng JavaScript để chỉnh sửa cấu trúc và kiểm soát việc hiển thị của trang.

Các khái niệm cơ bản về DOM

DOM xử lý HTML của một trang web như các đối tượng, cho phép truy cập và chỉnh sửa các phần tử và thuộc tính. Sử dụng đối tượng document để truy cập vào tài liệu HTML.

 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <title>Example of DOM Manipulation</title>
 5  </head>
 6  <body>
 7    <div id="content">Hello, World!</div>
 8    <button id="changeText">Change Text</button>
 9  </body>
10</html>

Lấy các phần tử DOM

JavaScript có nhiều phương thức để truy cập vào các phần tử trong DOM.

document.getElementById(): Lấy một phần tử dựa trên thuộc tính id
document.getElementsByClassName(): Lấy các phần tử theo tên lớp (HTMLCollection)
document.getElementsByTagName(): Lấy các phần tử theo tên thẻ (HTMLCollection)
document.querySelector(): Lấy phần tử đầu tiên khớp với bộ chọn CSS
document.querySelectorAll(): Lấy tất cả các phần tử khớp với bộ chọn CSS (NodeList)

Ví dụ: `getElementById` và `querySelector`

1const content = document.getElementById('content');
2console.log(content.textContent); // "Hello, World!"
3
4const button = document.querySelector('#changeText');

Thao tác DOM

Nhiều thao tác có thể được thực hiện trên các phần tử đã lấy được.

Thay đổi Văn bản

Để thay đổi văn bản của một phần tử, sử dụng textContent hoặc innerHTML.

textContent: Lấy hoặc thay đổi nội dung văn bản của một phần tử. Các thẻ HTML không được diễn giải.
innerHTML: Lấy hoặc thay đổi nội dung HTML của một phần tử. Các chuỗi chứa thẻ HTML cũng được xử lý.

1content.textContent = 'Hello, world!';  // Change the text
2button.innerHTML = '<strong>Click to change</strong>';  // Change including HTML

Thay đổi Thuộc tính

Sử dụng setAttribute() và getAttribute() để thay đổi thuộc tính phần tử.

1button.setAttribute('disabled', 'true');  // Disable the button
2const id = content.getAttribute('id');  // Get the "content"

Thay đổi CSS

Sử dụng thuộc tính style để thay đổi các kiểu CSS.

1content.style.color = 'red';  // Change the text color to red
2content.style.fontSize = '20px';  // Change the font size

Thao tác với Lớp

Sử dụng classList để thêm hoặc xóa lớp từ một phần tử.

add(): Thêm một lớp
remove(): Xóa một lớp
toggle(): Thêm hoặc xóa một lớp dựa trên sự tồn tại của nó
contains(): Kiểm tra xem một lớp có tồn tại hay không

1content.classList.add('highlight');  // Add a class
2button.classList.toggle('active');   // Toggle a class

Tạo và Xóa Phần tử DOM

Tạo Phần tử Mới

Sử dụng document.createElement() để tạo một phần tử mới và thêm nó vào DOM.

1const newDiv = document.createElement('div');  // Create a new div element
2newDiv.textContent = 'This is a new element';
3document.body.appendChild(newDiv);  // Append to the body element

Xóa các phần tử

Sử dụng phương pháp remove() để xóa một phần tử.

1newDiv.remove();  // Remove the created element

Thêm Sự kiện

Là một phần của việc thao tác DOM, bạn có thể thêm bộ xử lý sự kiện để phản hồi các tương tác của người dùng. Sử dụng addEventListener() để xử lý sự kiện như nhấp chuột và tương tác bàn phím.

1button.addEventListener('click', () => {
2    content.textContent = 'The text has been changed';
3});

Trong ví dụ này, nhấp vào một nút sẽ thay đổi văn bản của phần tử #content.

Duyệt Cây DOM

Bạn có thể duyệt DOM để truy cập các phần tử cha hoặc anh chị em.

parentNode: Truy cập nút cha
childNodes: Truy cập các nút con (của tất cả các loại)
firstChild / lastChild: Phần tử con đầu tiên/cuối cùng
nextSibling / previousSibling: Phần tử anh chị em tiếp theo/trước đó

1const parent = content.parentNode;  // Get the parent element
2const firstChild = parent.firstChild;  // Get the first child element
3console.log(firstChild);

Ví dụ: Thêm một Mục mới vào Danh sách

Đây là một ví dụ về cách thêm một mục mới vào danh sách.

 1<ul id="list">
 2  <li>Item 1</li>
 3  <li>Item 2</li>
 4</ul>
 5<button id="addItem">Add Item</button>
 6
 7<script>
 8    const list = document.getElementById('list');
 9    const addItemButton = document.getElementById('addItem');
10
11    addItemButton.addEventListener('click', () => {
12        const newItem = document.createElement('li');
13        newItem.textContent = 'New Item';
14        list.appendChild(newItem);
15    });
16</script>

Trong đoạn mã này, khi nhấn vào nút "Add Item", một phần tử <li> mới sẽ được thêm vào danh sách.

Tóm tắt

Việc thao tác DOM JavaScript cho phép bạn lấy, thay đổi, tạo mới và xóa các phần tử trong tài liệu HTML.
Bạn có thể lấy các phần tử bằng cách sử dụng các phương thức như getElementById() và querySelector().
Dùng textContent hoặc innerHTML để thay đổi văn bản và HTML, và setAttribute() để thao tác với thuộc tính.
Dùng createElement() để tạo mới các phần tử và remove() để xóa chúng.
Bạn có thể tạo các trang web tương tác phản hồi hành động của người dùng thông qua việc xử lý sự kiện.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Các hàm generator trong JavaScript

JavaScript và HTML

YouTube Video

Đối tượng window trong JavaScript

Các tính năng chính của đối tượng window

Thuộc tính

Phương thức

Xử lý sự kiện

Vai trò như một Biến Toàn cầu

Thao tác DOM trong JavaScript

Các khái niệm cơ bản về DOM

Lấy các phần tử DOM

Ví dụ: getElementById và querySelector

Thao tác DOM

Thay đổi Văn bản

Thay đổi Thuộc tính

Thay đổi CSS

Thao tác với Lớp

Tạo và Xóa Phần tử DOM

Tạo Phần tử Mới

Xóa các phần tử

Thêm Sự kiện

Duyệt Cây DOM

Ví dụ: Thêm một Mục mới vào Danh sách

Tóm tắt

YouTube Video

Đối tượng `window` trong JavaScript

Các tính năng chính của đối tượng `window`

Ví dụ: `getElementById` và `querySelector`