Nếu bạn đang nghe nhạc trên một ứng dụng và muốn tạm dừng hoặc bỏ qua một bài hát, bạn phải thực hiện điều đó thông qua ứng dụng.
Quá trình này tương tự như cách thức hoạt động của Mô hình Đối tượng Tài liệu hoặc DOM. Ở đây, ứng dụng âm nhạc đại diện cho DOM vì nó đóng vai trò là phương tiện để thực hiện các thay đổi đối với âm nhạc.
Trong hướng dẫn này, bạn sẽ tìm hiểu DOM là gì và nó hoạt động như thế nào trong thực tế.
DOM là gì?
DOM là một API Web cho phép các nhà phát triển sử dụng logic lập trình để thực hiện các thay đổi đối với mã HTML của họ. Đó là một cách đáng tin cậy để thực hiện các thay đổi biến trang web tĩnh thành trang web động.
Đây là một chủ đề quan trọng trong phát triển web vì DOM đóng vai trò là nơi sử dụng JavaScript ban đầu trong trình duyệt.
Mã HTML không được coi là một phần của DOM cho đến khi được trình duyệt phân tích cú pháp. Để xem điều gì xảy ra với mã HTML của bạn khi quá trình phân tích cú pháp này diễn ra, hãy sao chép mã của bạn từ <body> và dán vào đây (trong hộp có tiêu đề ‘Đánh dấu để kiểm tra’ sau dấu ba chấm).
Chúng ta đang xây dựng cái gì?
Trong bài viết này, chúng ta sẽ tìm hiểu những phần quan trọng nhất và thường được sử dụng nhất của DOM bằng cách xây dựng dự án đơn giản này:
Kiểm tra nó trên CodePen tại đây.
Chức năng dự án
Như bạn có thể thấy trong bản demo dự án ở trên, đây là những chức năng chúng tôi sẽ triển khai:
- Thay đổi màu sắc năng động: Khi nhấp vào một màu, màu của hình ảnh ô tô, nút addToCart và thẻ tất cả sẽ thay đổi để khớp với màu đã chọn.
- Bấm công tắc: Nhấp vào nút addToCart sẽ hiển thị nút thành công và ngược lại.
điều kiện tiên quyết
- kiến thức cơ bản về HTML và CSS.
- kiến thức cơ bản về JavaScript
- một IDE (trình soạn thảo văn bản)
- một trình duyệt web
Lưu ý: Vì mục tiêu của bài viết là tìm hiểu về JavaScript và DOM nên chúng tôi sẽ không nhấn mạnh nhiều vào mã HTML và CSS. Trước tiên, chúng ta sẽ lướt nhanh qua để bạn có thể thiết lập ứng dụng. Sau đó, chúng ta sẽ đi sâu vào tìm hiểu về DOM.
Mã HTML:
trong chúng tôi index.html tệp, chúng tôi sẽ tạo cấu trúc cơ bản của dự án bao gồm liên kết tệp CSS, Phông chữ tuyệt vời và Phông chữ của Google – tất cả trong <head> nhãn. Trong vòng chúng tôi <body> thẻ, chúng tôi sẽ tạo thẻ sản phẩm và liên kết thẻ JavaScript của chúng tôi ở cuối <body> nhãn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Practicalized DOM</title>
</head>
<body>
<div class="product-card">
<div class="product-image">
<!-- <img src="./img/gray-benz.jpg" alt="cars" /> -->
</div>
<div class="product-description">
<h3 class="tag">CAR</h3>
<h1 class="product-title">Mercedez Benz c300 2022</h1>
<p class="product-details">
<span class="mileage">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-car"></i
></span>
Mileage: 4,000 miles
</span>
<span class="fuel">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-gas-pump"></i
></span>
Fuel: 25mpg
</span>
<span class="safety">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-shield"></i></span
>Safety:
<span class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</span>
</span>
</p>
<p>Pick a color:</p>
<div class="colors-price">
<div class="colors">
<span class="red"></span>
<span class="gray"></span>
<span class="black"></span>
</div>
<div class="pricing">
<h2 class="new-price">$134,450</h2>
<h4 class="old-price"><s>$140,500</s></h4>
</div>
</div>
<button id="button">
<span style="font-size: 1em; color: white">
<i class="fa-solid fa-cart-shopping"></i>
</span>
<span class="button-text">Add to Cart</span>
</button>
<button class="feedback">
<span id="white-button"
>🥳 Woohoo, You're about to own a benz 🎊</span
>
</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>Mã CSS:
trong chúng tôi style.css tệp, trước hết chúng ta sẽ đặt các kiểu chung như sau:
* {
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow-y: hidden;
background-color: antiquewhite;
}
Tiếp theo, chúng tôi sẽ tạo kiểu cho sản phẩm của mình, bắt đầu với thẻ, hình ảnh, mô tả và chi tiết.
/* product tag */
.tag {
font-size: 0.9rem;
background-color: black;
border-radius: 5px;
width: 4rem;
display: flex;
justify-content: center;
color: #fff;
}
/* product*/
.product-title {
font-size: 2rem;
font-weight: 700;
}
.product-card {
background: #fff;
display: grid;
/* align-items: center; */
grid-template-rows: 55% 45%;
height: 80%;
width: 30%;
box-shadow: 10px 10px 25px 0px #3c3c3c;
}
.product-image {
/* border: 2px solid black; */
background-image: url("./img/black-benz.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 40px 10px;
width: 28rem;
height: 66%;
}
.product-description {
background-color: #62c256;
color: #fff;
padding-left: 20px;
margin-top: -67px;
}
.product-details {
display: flex;
flex-direction: column;
margin-top: -20px;
}
.product-image img {
width: 28rem;
}
.stars {
color: yellow;
font-size: 1em;
}Sau đó, chúng ta sẽ tạo kiểu cho các màu của mình: giá của chúng, các màu theo nhóm và các màu riêng lẻ.
/* colors */
.colors-price {
display: flex;
align-items: center;
width: 70%;
justify-content: space-between;
margin-top: -15px;
}
.colors {
display: flex;
width: 6rem;
justify-content: space-between;
cursor: pointer;
}
.red {
background: red;
width: 25px;
height: 25px;
border-radius: 50%;
}
.gray {
background: gray;
width: 25px;
height: 25px;
border-radius: 50%;
}
.black {
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
}
.pricing {
display: flex;
width: 12rem;
justify-content: space-between;
align-items: center;
}
.old-price {
font-weight: 100;
}
Cuối cùng, chúng ta sẽ tạo kiểu cho các nút của mình bằng mã này:
/* buttons */
button {
cursor: pointer;
}
#button {
background-color: #000;
padding: 10px 25px;
border: none;
border-radius: 5px;
}
button white-button {
background-color: #fff;
}
.button-text {
color: #fff;
margin-left: 5px;
}
.feedback {
display: none;
padding: 10px 25px;
border: none;
border-radius: 5px;
}Triển khai DOM
Mọi thứ trong DOM thuộc một trong hai loại sau: chọn phần tử và thao tác phần tử. Sau khi tạo các tệp HTML và CSS của chúng tôi, chúng tôi đi vào app.js file để thực hiện như sau:
- Lựa chọn: Chúng tôi tham chiếu tất cả các phần tử mà chúng tôi muốn tạo động từ mã HTML của mình và gán cho chúng các biến trong tệp JavaScript của chúng tôi.
- Vận dụng: Sau khi đã chọn và liên kết các biến, chúng ta tạo các hàm khác nhau chịu trách nhiệm cho các thao tác và sau đó liên kết với các biến.
Cách chọn phần tử trong DOM
Để có quyền truy cập vào các phần tử HTML mà bạn muốn thao tác, bạn cần làm cho JavaScript biết rằng các phần tử đó tồn tại. Đây là những gì thường được gọi là các yếu tố “lựa chọn” – về cơ bản là liên kết chúng.
Trong DOM, không có cách nào để định vị và tham chiếu một phần tử để thao tác. Thay vào đó, nó sẽ phụ thuộc vào bộ chọn mà bạn đã sử dụng trong thẻ của phần tử.
Bạn làm điều này bằng cách gán phần tử cho một biến. Nó có định dạng sau. Hãy nhớ rằng tất cả các bộ chọn DOM được đặt trước đối tượng tài liệu và một dấu chấm:
const example = document.[DOMselector]Trong tệp JavaScript của chúng tôi, chúng tôi phải chọn tất cả các yếu tố mà chúng tôi muốn thao tác, chẳng hạn như nút, màu sắc, thẻ hình ảnh và thẻ.
Chúng ta sẽ sử dụng càng nhiều bộ chọn DOM càng tốt, vì vậy hãy tìm hiểu thêm về chúng.
Cách sử dụng querySelector
querySelector là một phương thức chấp nhận bộ chọn CSS chính xác trong một chuỗi và trả về một phần tử. Bạn có thể sử dụng nó để chọn màu đỏ và đen cũng như thẻ hình ảnh, sử dụng tên lớp của chúng.
Nếu bạn muốn sử dụng phương pháp này để chọn và trả về nhiều phần tử, bạn có thể sử dụng QuerySelectorAll thay thế.
const redColor = document.querySelector(".red");Đoạn mã trên liên kết khoảng với lớp “đỏ” <span class="red"></span> từ mã HTML của chúng tôi sang biến redColor trong JavaScript của chúng tôi.
const blackColor = document.querySelector(".black");
Đoạn mã trên liên kết khoảng với lớp “đen” <span class="black"></span> từ mã HTML của chúng tôi sang biến màu đenColor trong JavaScript của chúng tôi.
const imageCard = document.querySelector(".product-image");Đoạn mã trên liên kết div với lớp “product-image” <div class="product-image"> từ mã HTML của chúng tôi đến biến imageCard trong JavaScript của chúng tôi.
const feedbackBtn = document.querySelector(".feedback");Đoạn mã trên liên kết nút với lớp “phản hồi” <button class="feedback"> từ mã HTML của chúng tôi đến biến feedbackBtn trong JavaScript của chúng tôi.
Cách sử dụng getElementsByClassName
Bạn có thể sử dụng bộ chọn này để chọn màu xám. Nó rất giống với querySelector. Điểm khác biệt duy nhất là phương thức này chỉ nhận tên của lớp, không có dấu chấm (.) đứng trước.
const grayColor = document.getElementsByClassName("gray");Đoạn mã trên liên kết khoảng với lớp “màu xám” <span class="gray"></span> từ mã HTML của chúng tôi sang biến greyColor trong JavaScript của chúng tôi.
Cách sử dụng getElementById
Bạn có thể sử dụng bộ chọn này để chọn nút giỏ hàng. Nó rất giống với getElementsByClassName. Điểm khác biệt duy nhất là vì chúng tôi sử dụng ID để thể hiện tính duy nhất nên ID này chỉ được sử dụng trên một phần tử. Phương pháp này đọc getElement, không có chữ s.
const cartButton = document.getElementById("button");Đoạn mã trên liên kết nút với “nút” id <button id="button"> từ mã HTML của chúng tôi đến biến cartButton trong JavaScript của chúng tôi.
Cách sử dụng GetElementsByTagName
Các thuộc tính không phải là cách duy nhất để chọn một phần tử. Bạn cũng có thể sử dụng tên thẻ. Nếu bạn đã sử dụng thẻ mà bạn đang nhắm mục tiêu nhiều lần thì thẻ sẽ trả về một danh sách các phần tử. Sử dụng lập chỉ mục để chọn đúng.
const itemTag = document.getElementsByTagName("h3")[0];Đoạn mã trên liên kết h3 chứa thẻ sản phẩm của chúng tôi <h3 class="tag"> từ mã HTML của chúng tôi đến biến itemTag trong JavaScript của chúng tôi.
Trong số tất cả những thứ này, querySelector và querySelectorAll có lẽ là phổ biến nhất vì mức độ chung chung và ít hạn chế của chúng.
Cách thao tác các phần tử trong DOM
Thao tác là mục đích chính của DOM. Đó là mọi thứ xảy ra sau khi bạn tham khảo và chọn (các) phần tử mà bạn muốn làm việc. Điều này dẫn đến sự thay đổi trạng thái của phần tử, từ tĩnh sang động.
Hai khái niệm mà bạn cần biết để hiểu thao tác DOM là sự kiện và người xử lý.
Sự kiện là gì?
Hãy sử dụng cùng một loại âm nhạc tương tự từ trước đó. Trên ứng dụng âm nhạc, bạn phải thực hiện một hành động [click or swipe] trước khi các chức năng hoạt động.
Trong DOM, hành động này được gọi là một sự kiện. Có các sự kiện như nhấp chuột, cuộn, di chuột qua, thay đổi, v.v.
Trong DOM, các phản hồi được gắn với từng sự kiện. Điều này có nghĩa là cần phải theo dõi sự kiện để đưa ra phản hồi. Đây được biết đến như một người nghe sự kiện. Người nghe sự kiện thường ở dạng một addEventListener phương thức nhận hai đối số (sự kiện, trình xử lý sự kiện).
Giải phẫu của một sự kiện
Các sự kiện DOM thường chứa một phần tử, trình xử lý sự kiện của nó và một hàm.
thành phần.[eventListenerMethod(event, eventHandler)What are Event Handlers?
Event handlers are the responses that are triggered when our event listener methods read an event. Without event handlers, there would be no way to alert our code that an event has occurred.
All the modifications that happen within the DOM such as styling, appending, removing, and so on rely on event handlers. They are the functions found in the second argument of an addEventListener method. They are always alert to run as soon as the event (first argument) happens.
redColor.addEventListener("click", function () {
cartButton.style.backgroundColor = "red";
itemTag.style.backgroundColor = "red";
imageCard.style.backgroundImage="url("./img/red-benz.webp")";
});In the code above, the function after the ‘click’ event, is the event handler. This means that everything within that function will be implemented as soon as the red color is clicked.
How to Implement Events and Event Handlers
In this project, we’re going to use events and event handlers for about 5 implementations. We’ll go through each one now.
First, we’ll use them to make the red color functional. Once a user clicks the red color, the cart button and item tag are assigned styles in the form of a red background color. The image card also gets assigned a red background image.
We do this by taking the variable redColor and adding an event listener of ‘click’. This means we want our code to be alerted when the red color is clicked. In return, the event handler function is in place to run immediately.
redColor.addEventListener("click", function () {
cartButton.style.backgroundColor = "red";
itemTag.style.backgroundColor = "red";
imageCard.style.backgroundImage="url("./img/red-benz.webp")";
});
Then we’ll make the gray color functional. When a user clicks the gray color, the cart button and item tag are assigned styles in the form of a gray background color. The image card is also assigned a gray background image.
We do this by taking the variable grayColor and adding an event listener of ‘click’. This means we want our code to be alerted when the gray color is clicked. In return, the event handler function is in place to run immediately.
grayColor[0].addEventListener("click", function () { cartButton.style.backgroundColor = "grey"; itemTag.style.backgroundColor = "grey"; imageCard.style.backgroundImage="url("./img/gray-benz.jpg ")"; });
Tiếp theo chúng ta sẽ thực hiện màu đen chức năng. Khi người dùng nhấp vào màu đen, nút giỏ hàng và thẻ mặt hàng được gán kiểu ở dạng màu nền đen. Thẻ hình ảnh cũng được chỉ định một hình nền màu đen.
Chúng tôi làm điều này bằng cách lấy biến blackColor và thêm trình xử lý sự kiện của ‘nhấp chuột’. Điều này có nghĩa là chúng tôi muốn mã của mình được cảnh báo khi nhấp vào màu đen. Đổi lại, trình xử lý sự kiện function là tại chỗ để chạy ngay lập tức.
blackColor.addEventListener("click", function () {
cartButton.style.backgroundColor = "black";
itemTag.style.backgroundColor = "black";
imageCard.style.backgroundImage="url("./img/black-benz.jpg")";
});
Chúng ta đã xem xét một cách tiếp cận trình xử lý sự kiện, đó là tạo hàm trong phương thức addEventListener.
Một cách tiếp cận khác là tạo một hàm trước khi chuyển tên của hàm làm đối số trong phương thức addEventListener.
Cách triển khai nút giỏ hàng
Chúng ta bắt đầu bằng cách tạo một hàm có tên là giỏ hàng. Chức năng giỏ hàng ẩn nút giỏ hàng và hiển thị nút phản hồi. Sau đó, tên hàm giỏ hàng được chuyển đến phương thức trình xử lý sự kiện làm đối số thứ hai.
const cart = () => {
cartButton.style.display = "none";
feedbackBtn.style.display = "block";
};
cartButton.addEventListener("click", cart);
Cách triển khai nút phản hồi
Đầu tiên chúng ta tạo một hàm có tên là phản hồi. Chức năng phản hồi ẩn nút phản hồi và hiển thị nút giỏ hàng. Phản hồi tên hàm sau đó được chuyển đến phương thức trình xử lý sự kiện làm đối số thứ hai.
const feedback = () => {
cartButton.style.display = "block";
feedbackBtn.style.display = "none";
};
feedbackBtn.addEventListener("click", feedback);
Mã dự án đầy đủ
Đây là dự án chúng ta đã cùng nhau xây dựng trong bài viết này:
Đây là mã HTML đầy đủ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
<title>Practicalized DOM</title>
</head>
<body>
<div class="product-card">
<div class="product-image">
<!-- <img src="./img/gray-benz.jpg" alt="cars" /> -->
</div>
<div class="product-description">
<h3 class="tag">CAR</h3>
<h1 class="product-title">Mercedez Benz c300 2022</h1>
<p class="product-details">
<span class="mileage">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-car"></i
></span>
Mileage: 4,000 miles
</span>
<span class="fuel">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-gas-pump"></i
></span>
Fuel: 25mpg
</span>
<span class="safety">
<span style="font-size: 1em; color: black"
><i class="fa-solid fa-shield"></i></span
>Safety:
<span class="stars">
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
<i class="fa-solid fa-star"></i>
</span>
</span>
</p>
<p>Pick a color:</p>
<div class="colors-price">
<div class="colors">
<span class="red"></span>
<span class="gray"></span>
<span class="black"></span>
</div>
<div class="pricing">
<h2 class="new-price">$134,450</h2>
<h4 class="old-price"><s>$140,500</s></h4>
</div>
</div>
<button id="button">
<span style="font-size: 1em; color: white">
<i class="fa-solid fa-cart-shopping"></i>
</span>
<span class="button-text">Add to Cart</span>
</button>
<button class="feedback">
<span id="white-button"
>🥳 Woohoo, You're about to own a benz 🎊</span
>
</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
Đây là CSS:
* {
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow-y: hidden;
background-color: antiquewhite;
}
/* product tag */
.tag {
font-size: 0.9rem;
background-color: black;
border-radius: 5px;
width: 4rem;
display: flex;
justify-content: center;
color: #fff;
}
/* product*/
.product-title {
font-size: 2rem;
font-weight: 700;
}
.product-card {
background: #fff;
display: grid;
/* align-items: center; */
grid-template-rows: 55% 45%;
height: 80%;
width: 30%;
box-shadow: 10px 10px 25px 0px #3c3c3c;
}
.product-image {
/* border: 2px solid black; */
background-image: url("./img/black-benz.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 40px 10px;
width: 28rem;
height: 66%;
}
.product-description {
background-color: #62c256;
color: #fff;
padding-left: 20px;
margin-top: -67px;
}
.product-details {
display: flex;
flex-direction: column;
margin-top: -20px;
}
.product-image img {
width: 28rem;
}
.stars {
color: yellow;
font-size: 1em;
}
/* colors */
.colors-price {
display: flex;
align-items: center;
width: 70%;
justify-content: space-between;
margin-top: -15px;
}
.colors {
display: flex;
width: 6rem;
justify-content: space-between;
cursor: pointer;
}
.red {
background: red;
width: 25px;
height: 25px;
border-radius: 50%;
}
.gray {
background: gray;
width: 25px;
height: 25px;
border-radius: 50%;
}
.black {
background: black;
width: 25px;
height: 25px;
border-radius: 50%;
}
.pricing {
display: flex;
width: 12rem;
justify-content: space-between;
align-items: center;
}
.old-price {
font-weight: 100;
}
/* buttons */
button {
cursor: pointer;
}
#button {
background-color: #000;
padding: 10px 25px;
border: none;
border-radius: 5px;
}
button white-button {
background-color: #fff;
}
.button-text {
color: #fff;
margin-left: 5px;
}
.feedback {
display: none;
padding: 10px 25px;
border: none;
border-radius: 5px;
}
Đây là mã JavaScript:
// 1. Change color of car and addToCart button color when a color is selected
// - Selecting Elements
const redColor = document.querySelector(".red");
const grayColor = document.getElementsByClassName("gray");
const blackColor = document.querySelector(".black");
const cartButton = document.getElementById("button");
const itemTag = document.getElementsByTagName("h3")[0];
const imageCard = document.querySelector(".product-image");
const feedbackBtn = document.querySelector(".feedback");
// Modifying Elements
// - Add Event Listeners
// - Red Color
redColor.addEventListener("click", function () {
cartButton.style.backgroundColor = "red";
itemTag.style.backgroundColor = "red";
imageCard.style.backgroundImage="url("./img/red-benz.webp")";
});
// - Gray Color
grayColor[0].addEventListener("click", function () {
cartButton.style.backgroundColor = "gray";
itemTag.style.backgroundColor = "gray";
imageCard.style.backgroundImage="url("./img/gray-benz.jpg")";
});
// - Black Color
blackColor.addEventListener("click", function () {
cartButton.style.backgroundColor = "black";
itemTag.style.backgroundColor = "black";
imageCard.style.backgroundImage="url("./img/black-benz.jpg")";
});
// Button Click Implementation
// - Cart Button
const cart = () => {
cartButton.style.display = "none";
feedbackBtn.style.display = "block";
};
cartButton.addEventListener("click", cart);
// - Feedback Button
const feedback = () => {
cartButton.style.display = "block";
feedbackBtn.style.display = "none";
};
feedbackBtn.addEventListener("click", feedback);
DOM là một phần thiết yếu của quá trình phát triển web hiện đại vì nó giúp các nhà phát triển chuyển đổi các trang web và ứng dụng web từ tĩnh sang động.
Là người mới bắt đầu, có thể khá khó khăn để bạn hiểu rõ về DOM và tất cả những gì nó đòi hỏi. Dành thời gian để xây dựng một vài dự án đơn giản như thế này sẽ giúp bạn củng cố các khái niệm.
Cảm ơn đã đọc 👋🏾. Tôi hy vọng bạn thấy nó hữu ích.
