JavaScript - DOM Phương thức

Chào mừng các bạn, những nhà lập trình đang trên đà trở thành cao thủ! Hôm nay, chúng ta sẽ nhảy vào thế giới đầy thú vị của JavaScript và Document Object Model (DOM). Là giáo viên máy tính gần gũi của bạn, tôi sẽ hướng dẫn bạn qua hành trình này với rất nhiều ví dụ và giải thích. Vậy, hãy lấy đồ uống yêu thích của bạn, ngồi thoải mái, và hãy bắt đầu cuộc phiêu lưu của chúng ta!

DOM là gì?

Trước khi chúng ta nhảy vào các phương thức, hãy nhanh chóng hiểu qua DOM là gì. Hãy tưởng tượng một trang web như một cây gia đình. DOM giống như cây gia đình đó, đại diện cho cấu trúc tài liệu HTML của bạn. Nó cho phép JavaScript tương tác và manipulates nội dung, cấu trúc và phong cách của một trang web.

Bây giờ, hãy khám phá một số phương thức DOM mạnh mẽ sẽ giúp bạn trở thành một pháp sư JavaScript!

Phương thức JavaScript document.getElementById()

Phương thức getElementById() giống như một thợ săn kho báu trong tài liệu HTML của bạn. Nó tìm kiếm một phần tử với một ID cụ thể và mang nó lại cho bạn. Hãy xem nó trong hành động:

<div id="myAwesomeDiv">Hello, I'm an awesome div!</div>

<script>
let myDiv = document.getElementById("myAwesomeDiv");
console.log(myDiv.innerHTML);
</script>

Trong ví dụ này, chúng ta đang bảo JavaScript, "Nào, tìm phần tử có ID 'myAwesomeDiv' và lưu trữ nó trong biến 'myDiv'." Sau đó, chúng ta in nội dung của nó vào console.

Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, I'm an awesome div!" trong console của bạn. Đó giống như phép thuật, nhưng tốt hơn vì bạn hiểu cách nó hoạt động!

Ví dụ Thực tế: Thay đổi Nội dung

Hãy làm cho mọi thứ tương tác hơn:

<h1 id="greeting">Hello, World!</h1>
<button onclick="changeGreeting()">Thay đổi Lời Chào</button>

<script>
function changeGreeting() {
let greetingElement = document.getElementById("greeting");
greetingElement.innerHTML = "Hello, JavaScript Ninja!";
}
</script>

Ở đây, chúng ta có một nút mà khi nhấp vào, sẽ thay đổi văn bản của phần tử h1. Đó giống như cho trang web của bạn một cuộc thay đổi tính cách chỉ với một vài dòng mã!

Phương thức JavaScript document.addEventListener()

Bây giờ, hãy nói về addEventListener(). Phương thức này giống như việc đặt một camera an ninh cho các phần tử của bạn. Nó theo dõi các sự kiện cụ thể và sau đó làm điều gì đó khi sự kiện đó xảy ra.

<button id="myButton">Nhấp vào tôi!</button>

<script>
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
alert("Button clicked! You're awesome!");
});
</script>

Trong ví dụ này, chúng ta bảo nút của chúng ta, "Nào, khi ai đó nhấp vào bạn, hiển thị thông báo này." Đó giống như dạy trang web của bạn phản hồi với các hành động của người dùng!

Ví dụ Thực tế: Bật/Tắt Chế Độ Tối

Hãy tạo một chế độ tối đơn giản:

<button id="darkModeToggle">Bật/Tắt Chế Độ Tối</button>

<script>
let darkModeToggle = document.getElementById("darkModeToggle");
darkModeToggle.addEventListener("click", function() {
document.body.style.backgroundColor = document.body.style.backgroundColor === "black" ? "white" : "black";
document.body.style.color = document.body.style.color === "white" ? "black" : "white";
});
</script>

Đoạn mã này lắng nghe các lần nhấp vào nút của chúng ta và chuyển đổi màu nền và màu chữ của toàn bộ trang. Đó giống như cho người dùng của bạn một công tắc ánh sáng riêng cho trang web của bạn!

Phương thức JavaScript document.write()

Phương thức document.write() giống như một线路 trực tiếp đến tài liệu HTML của bạn. Nó cho phép bạn viết nội dung trực tiếp vào đầu ra HTML. Tuy nhiên, hãy cẩn thận! Sử dụng phương thức này sau khi trang đã tải sẽ ghi đè tất cả nội dung hiện tại.

<script>
document.write("<h2>Hello from JavaScript!</h2>");
</script>

Điều này sẽ thêm một phần tử h2 mới vào trang của bạn với văn bản "Hello from JavaScript!". Đó giống như có một bút ma thuật viết trực tiếp trên trang web của bạn!

Ví dụ Thực tế: Tạo Nội Dung Dynamic

Hãy tạo một ví dụ đơn giản tạo ra một danh sách dựa trên đầu vào của người dùng:

<input type="number" id="listLength" placeholder="Nhập độ dài danh sách">
<button onclick="generateList()">Tạo Danh Sách</button>

<script>
function generateList() {
let length = document.getElementById("listLength").value;
document.write("<ul>");
for (let i = 1; i <= length; i++) {
document.write("<li>Item " + i + "</li>");
}
document.write("</ul>");
}
</script>

Đoạn mã này tạo ra một danh sách không có thứ tự dựa trên số người dùng nhập vào. Nhớ rằng, điều này sẽ ghi đè toàn bộ nội dung trang của bạn, vì vậy hãy sử dụng nó một cách khôn ngoan!

Danh sách các Phương thức DOM

Có rất nhiều phương thức DOM khác để khám phá. Dưới đây là bảng một số phương thức thường được sử dụng:

Phương thức	Mô tả
getElementById()	Trả về phần tử có ID được chỉ định
getElementsByClassName()	Trả về một bộ sưu tập các phần tử có tên class được chỉ định
getElementsByTagName()	Trả về một bộ sưu tập các phần tử có tên thẻ được chỉ định
querySelector()	Trả về phần tử đầu tiên khớp với bộ chọn CSS
querySelectorAll()	Trả về tất cả các phần tử khớp với bộ chọn CSS
createElement()	Tạo một phần tử node mới
appendChild()	Thêm một node con mới vào phần tử như node con cuối cùng
removeChild()	Loại bỏ một node con khỏi phần tử
replaceChild()	Thay thế một node con trong phần tử
setAttribute()	Đặt hoặc thay đổi thuộc tính được chỉ định, với giá trị được chỉ định

Mỗi phương thức này mở ra những khả năng mới cho việc manipulates trang web của bạn. Đó giống như có một cây đa năng cho phát triển web!

Cuối cùng, các phương thức DOM là những công cụ mạnh mẽ cho phép bạn tương tác và manipulates các trang web một cách dynamic. Chúng là bí quyết làm cho các trang web tương tác và phản hồi. Khi bạn tiếp tục hành trình trong phát triển web, bạn sẽ thấy mình sử dụng các phương thức này ngày càng nhiều.

Nhớ rằng, thực hành làm nên hoàn hảo. Hãy thử các phương thức này, thử nghiệm với chúng, và đừng sợ mắc lỗi. Đó là cách chúng ta đều học và phát triển thành các nhà phát triển. Chúc may mắn, các ninja JavaScript tương lai!

Credits: Image by storyset