JavaScript - DOM Elements: A Beginner's Guide

Xin chào các nhà pháp sư JavaScript tương lai! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của DOM Elements. Là một ai đó đã dạy lập trình trong nhiều năm, tôi có thể告诉 bạn rằng việc hiểu Document Object Model (DOM) giống như mở một két két kho báu của các khả năng phát triển web. Vậy, chúng ta cùng nhảy vào nhé!

The DOM Elements

Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. DOM giống như bản vẽ của trang web của bạn, và DOM elements là các thành phần cá nhân - những viên gạch, cửa sổ và cửa. Mỗi phần của trang web của bạn, từ tiêu đề đến đoạn văn đến hình ảnh, đều là một DOM element.

Hãy bắt đầu với một ví dụ đơn giản:

<div id="myDiv">
<h1>Welcome to My Webpage</h1>
<p>This is a paragraph.</p>
</div>

Trong ví dụ này, chúng ta có ba DOM elements:

1. Một <div> element
2. Một <h1> element
3. Một <p> element

Mỗi element này có thể được thao tác bằng JavaScript, và đó là nơi xảy ra phép màu thực sự!

Accessing DOM Elements

Bây giờ chúng ta đã biết DOM elements là gì, hãy học cách truy cập chúng. Điều này giống như tìm đúng đồ chơi trong hộp đồ chơi - bạn cần biết nơi để tìm!

1. getElementById()

Phương pháp này giống như gọi tên chó của bạn - nó trực tiếp và cụ thể.

let myDiv = document.getElementById('myDiv');
console.log(myDiv);

Mã này tìm phần tử có ID 'myDiv' và lưu trữ nó trong biến myDiv.

2. getElementsByClassName()

Nếu bạn có nhiều phần tử có cùng một class, phương pháp này là lựa chọn của bạn. Nó giống như gọi tất cả học sinh mặc áo đỏ.

let paragraphs = document.getElementsByClassName('paragraph');
console.log(paragraphs);

Điều này trả về một bộ sưu tập tất cả các phần tử có class 'paragraph'.

3. getElementsByTagName()

Phương pháp này tìm tất cả các phần tử của một loại thẻ cụ thể. Nó giống như yêu cầu tất cả các con mèo trong phòng giơ chân.

let allDivs = document.getElementsByTagName('div');
console.log(allDivs);

Mã này lấy tất cả các phần tử <div> trên trang.

4. querySelector() and querySelectorAll()

Đây là những瑞士军刀 của việc chọn phần tử. Chúng sử dụng cú pháp selector CSS để tìm phần tử.

let firstParagraph = document.querySelector('p');
let allParagraphs = document.querySelectorAll('p');
console.log(firstParagraph);
console.log(allParagraphs);

querySelector() trả về phần tử khớp đầu tiên, trong khi querySelectorAll() trả về tất cả các phần tử khớp.

Modifying the DOM Elements

Khi我们已经 truy cập các phần tử của mình, đã đến lúc chơi! Chúng ta có thể thay đổi nội dung, phong cách và thuộc tính của chúng.

Changing Content

let header = document.getElementById('mainHeader');
header.textContent = 'New Header Text';
header.innerHTML = '<em>Italicized Header Text</em>';

textContent thay đổi văn bản, trong khi innerHTML cho phép bạn chèn HTML.

Modifying Styles

let paragraph = document.querySelector('p');
paragraph.style.color = 'blue';
paragraph.style.fontSize = '20px';

Điều này thay đổi màu sắc và kích thước字体 của đoạn văn đầu tiên.

Changing Attributes

let link = document.querySelector('a');
link.setAttribute('href', 'https://www.example.com');
link.removeAttribute('target');

Ở đây, chúng ta đang thay đổi thuộc tính href của một liên kết và xóa thuộc tính target của nó.

Adding Events to the DOM Elements

Sự kiện giống như đặttripwire - khi một điều gì đó xảy ra, mã của bạn sẽ nhảy vào hành động!

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});

Mã này thêm một sự kiện nhấp vào một nút. Khi được nhấp, nó hiển thị một thông báo.

List of DOM Element Properties

Dưới đây là bảng các thuộc tính DOM element phổ biến:

Thuộc tính	Mô tả
innerHTML	Lấy hoặc đặt nội dung HTML bên trong một phần tử
textContent	Lấy hoặc đặt nội dung văn bản của một phần tử
style	Lấy hoặc đặt phong cách inline của một phần tử
className	Lấy hoặc đặt tên class của một phần tử
id	Lấy hoặc đặt ID của một phần tử
attributes	Trả về một bộ sưu tập sống của tất cả các thuộc tính
children	Trả về một bộ sưu tập của các phần tử con của một phần tử
parentNode	Trả về phần tử cha của một phần tử

List of DOM Element Methods

Và đây là bảng các phương thức DOM element hữu ích:

Phương thức	Mô tả
setAttribute()	Thêm hoặc thay đổi giá trị của một thuộc tính
getAttribute()	Lấy giá trị của một thuộc tính
removeAttribute()	Xóa một thuộc tính khỏi một phần tử
appendChild()	Thêm một node con mới vào một phần tử jako con cuối cùng
removeChild()	Xóa một node con khỏi một phần tử
replaceChild()	Thay thế một node con trong một phần tử
classList.add()	Thêm một hoặc nhiều tên class vào một phần tử
classList.remove()	Xóa một hoặc nhiều tên class khỏi một phần tử
classList.toggle()	Bật/tắt tên class cho một phần tử

Nhớ rằng, thực hành là cách tốt nhất để trở thành hoàn hảo! Đừng sợ thử nghiệm với các thuộc tính và phương thức này. Mỗi khi bạn sử dụng chúng, bạn đang xây dựng cơ bắp lập trình của mình.

Khi chúng ta kết thúc bài học này, tôi nhớ lại một học sinh đã từng nói với tôi rằng việc học thao tác DOM cảm thấy giống như có siêu năng lực. Và bạn biết điều gì không? Cô ấy đã đúng! Với những công cụ này trong tay, bạn có thể thay đổi bất kỳ trang web nào theo ý muốn. Đó là quyền lực thực sự!

Vậy, hãy tiến lên, các nhà phát triển non trẻ, và chúc may mắn cho những cuộc phiêu lưu DOM của bạn, không có lỗi và đầy những khoảnh khắc "Aha!" Chúc các bạn lập trình vui vẻ!

Credits: Image by storyset