JavaScript và HTML
Bài viết này giải thích về JavaScript và HTML.
YouTube Video
javascript-html-dom.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>JavaScript & HTML</title>
6 <style>
7 * {
8 box-sizing: border-box;
9 }
10
11 body {
12 margin: 0;
13 padding: 2em;
14 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
15 background-color: #f7f9fc;
16 color: #333;
17 line-height: 1.6;
18 }
19
20 .container {
21 max-width: 800px;
22 margin: 0 auto;
23 padding: 1em;
24 background-color: #ffffff;
25 border: 1px solid #ccc;
26 border-radius: 10px;
27 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
28 }
29
30 h1, h2 {
31 font-size: 1.5rem;
32 color: #007bff;
33 margin-top: 0.5em;
34 margin-bottom: 0.5em;
35 border-left: 5px solid #007bff;
36 padding-left: 0.6em;
37 background-color: #e9f2ff;
38 }
39
40 button {
41 display: block;
42 margin: 1em auto;
43 padding: 0.75em 1.5em;
44 font-size: 1rem;
45 background-color: #007bff;
46 color: white;
47 border: none;
48 border-radius: 6px;
49 cursor: pointer;
50 transition: background-color 0.3s ease;
51 }
52
53 button:hover {
54 background-color: #0056b3;
55 }
56
57 #output {
58 margin-top: 1em;
59 background-color: #1e1e1e;
60 color: #0f0;
61 padding: 1em;
62 border-radius: 8px;
63 min-height: 200px;
64 font-family: Consolas, monospace;
65 font-size: 0.95rem;
66 overflow-y: auto;
67 white-space: pre-wrap;
68 }
69
70 .highlight {
71 outline: 3px solid #ffc107; /* yellow border */
72 background-color: #fff8e1; /* soft yellow background */
73 transition: background-color 0.3s ease, outline 0.3s ease;
74 }
75
76 .active {
77 background-color: #28a745; /* green background */
78 color: #fff;
79 box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
80 transition: background-color 0.3s ease, box-shadow 0.3s ease;
81 }
82 </style>
83</head>
84<body>
85 <div class="container">
86 <h1>JavaScript Console</h1>
87 <button id="executeBtn">Execute</button>
88 <div id="output"></div>
89 </div>
90
91 <div class="container">
92 <h2>HTML Sample</h2>
93 <div id="content">Hello, World!</div>
94 <button id="changeText">Change Text</button>
95 </div>
96
97 <script>
98 // Override console.log to display messages in the #output element
99 (function () {
100 const originalLog = console.log;
101 console.log = function (...args) {
102 originalLog.apply(console, args);
103 const output = document.getElementById('output');
104 output.textContent += args.map(String).join(' ') + '\n';
105 };
106 })();
107
108 document.getElementById('executeBtn').addEventListener('click', () => {
109 // Prevent multiple loads
110 if (document.getElementById('externalScript')) return;
111
112 const script = document.createElement('script');
113 script.src = 'javascript-html-dom.js';
114 script.id = 'externalScript';
115 //script.onload = () => console.log('javascript-html-dom.js loaded and executed.');
116 //script.onerror = () => console.log('Failed to load javascript-html-dom.js.');
117 document.body.appendChild(script);
118 });
119 </script>
120</body>
121</html>Đố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(`Title: ${window.document.title}`);
3
4// Get and display the current URL
5console.log(`URL: ${window.location.href}`);
6
7// Go back to the previous page
8// Note: this will navigate back in history, so be careful when running it
9console.log("Navigating back to the previous page...");
10window.history.back();
11
12// Display the browser's user agent
13console.log(`User Agent: ${window.navigator.userAgent}`);
14
15// Display the width and height of the viewport
16console.log(`Viewport Width: ${window.innerWidth}`);
17console.log(`Viewport 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: Sự kiện này được kích hoạt khi trang đã tải xong hoàn toàn.window.onresize: Sự kiện này được kích hoạt khi cửa sổ được thay đổi kích thước.window.onscroll: Sự kiện này được 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
windowchứ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ủawindow.
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.
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ử theo thuộc tínhidcủa nó.document.getElementsByClassName(): Lấy các phần tử theo tên lớp. Trả về mộtHTMLCollection.HTMLCollectionlà một tập hợp động, phản ánh các thay đổi trong DOM theo thời gian thực.document.getElementsByTagName(): Lấy các phần tử theo tên thẻ. Trả về mộtHTMLCollection.document.querySelector(): Sử dụng bộ chọn CSS để lấy phần tử khớp đầu tiên.document.querySelectorAll(): Sử dụng bộ chọn CSS để lấy tất cả các phần tử khớp. Trả về mộtNodeList.NodeListlà một tập hợp tĩnh, giữ trạng thái tại thời điểm truy xuất và không phản ánh các thay đổi sau đó trong DOM.
Ví dụ: getElementById và querySelector
1<div id="content">Hello, World!</div>
2<button id="changeText">Change Text</button>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"
3console.log(id);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 tùy thuộc vào lớp đó đã tồn tại hay chưa.contains(): Kiểm tra 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. Bạn có thể truy cập tất cả loại nút, không chỉ các nút phần tử như thẻ HTML mà còn cả nút văn bản và nút chú thích.firstChild/lastChild: Truy cập phần tử con đầu tiên và cuối cùng.nextSibling/previousSibling: Truy cập các phần tử anh chị em kế tiếp hoặc 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// Get the container element where the HTML will be inserted
2const content = document.getElementById('content');
3
4// Create the <ul> element with id="list"
5const list = document.createElement('ul');
6list.id = 'list';
7
8// Add initial list items
9const item1 = document.createElement('li');
10item1.textContent = 'Item 1';
11list.appendChild(item1);
12
13const item2 = document.createElement('li');
14item2.textContent = 'Item 2';
15list.appendChild(item2);
16
17// Create the <button> element with id="addItem"
18const addItemButton = document.createElement('button');
19addItemButton.id = 'addItem';
20addItemButton.textContent = 'Add Item';
21
22// Append the list and button to the content container
23content.appendChild(list);
24content.appendChild(addItemButton);
25
26// Add event listener to the button
27addItemButton.addEventListener('click', () => {
28 const newItem = document.createElement('li');
29 newItem.textContent = 'New Item';
30 list.appendChild(newItem);
31});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
textContenthoặcinnerHTMLđể 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.