2.1 Phương pháp truy cập phần tử
Điều hướng DOM (Document Object Model) là một nhiệm vụ quan trọng khi làm việc với tài liệu web. JavaScript cung cấp nhiều phương thức để tìm kiếm và truy cập các phần tử trong tài liệu. Những phương thức này cho phép lập trình viên dễ dàng tìm kiếm và thao tác với các phần tử mong muốn.
1. Phương thức getElementById()
Phương thức getElementById() trả về phần tử có thuộc tính id với giá trị đã chỉ định. Đây là một trong những phương thức đơn giản và thường xuyên được sử dụng nhất.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Sẽ in ra: This is the content
</script>
</body>
</html>
2. Phương thức getElementsByClassName()
Phương thức getElementsByClassName() trả về một tập hợp tất cả các phần tử có lớp được chỉ định. Tập hợp này là "sống", có nghĩa là nó tự động được cập nhật khi DOM thay đổi.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Sẽ in ra: 3
</script>
</body>
</html>
3. Phương thức getElementsByTagName()
Phương thức getElementsByTagName() trả về một tập hợp tất cả các phần tử có thẻ được chỉ định. Tập hợp này cũng là "sống".
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Sẽ in ra: 3
</script>
</body>
</html>
4. Phương thức querySelector()
Phương thức querySelector() trả về phần tử đầu tiên mà khớp với CSS selector đã chỉ định. Đây là một phương thức rất mạnh mẽ và linh hoạt để tìm kiếm các phần tử.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Sẽ in ra: Paragraph 2
</script>
</body>
</html>
5. Phương thức querySelectorAll()
Phương thức querySelectorAll() trả về một tập hợp tĩnh (không thay đổi) của tất cả các phần tử khớp với CSS selector đã chỉ định.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Sẽ in ra: 3
</script>
</body>
</html>
2.2 Điều hướng các nút
DOM cũng cung cấp các phương thức để điều hướng các nút liên quan đến phần tử hiện tại.
1. Thuộc tính parentNode
Thuộc tính parentNode trả về nút cha của nút hiện tại.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Sẽ in ra: container
</script>
</body>
</html>
2. Thuộc tính childNodes
Thuộc tính childNodes trả về một tập hợp tất cả các nút con của nút hiện tại, bao gồm cả các nút văn bản.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Sẽ in ra tổng số tất cả các nút con, bao gồm cả văn bản
</script>
</body>
</html>
Có thể bạn vẫn còn thắc mắc tại sao kết quả là 7?
Như đã nói ở trên, thuộc tính childNodes trả về tập hợp tất cả các nút con của nút hiện tại, bao gồm cả văn bản (khoảng trắng, ký tự, dòng mới, v.v.). HTML-markup chứa khoảng trắng và dòng mới giữa các phần tử <li>, những điều này cũng được coi là các nút riêng biệt.
Trong ví dụ trên, giữa thẻ <ul> và <li> đầu tiên có một dòng mới (và có thể là khoảng trắng) - điều này được coi là một nút văn bản. Tương tự giữa tất cả các <li> và sau <li> cuối cùng. Vì vậy, thay vì ba phần tử trong danh sách, childNodes bao gồm các nút văn bản này, dẫn đến tổng số là 7.
Để nhận được chỉ các phần tử (bỏ qua các nút văn bản), bạn có thể sử dụng thuộc tính children, chỉ trả về các phần tử con:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Thuộc tính firstChild và lastChild
Thuộc tính firstChild và lastChild trả về nút con đầu tiên và cuối cùng tương ứng.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Bạn có thể ngạc nhiên rằng không có gì được in ra trên bảng điều khiển. Tuy nhiên, không phải vậy. Đã in ra nút con cuối cùng Item 1 và Item 3 (dòng mới). Nếu bạn gặp phải điều này, bạn nên đọc lại p.2 Thuộc tính childNodes.
4. Thuộc tính nextSibling và previousSibling
Thuộc tính nextSibling và previousSibling trả về các nút tiếp theo và trước đó ở cùng một mức độ trong cây DOM.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Sẽ in ra: Item 3
console.log(prev.textContent); // Sẽ in ra: Item 1 (nếu bỏ qua các nút văn bản)
</script>
</body>
</html>
2.3 Điều hướng các nút phần tử
5. Thuộc tính nextElementSibling và previousElementSibling
Những thuộc tính này trả về các nút phần tử tiếp theo và trước đó (bỏ qua văn bản và bình luận).
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Sẽ in ra: Item 3
console.log(prev.textContent); // Sẽ in ra: Item 1
</script>
</body>
</html>
6. Thuộc tính firstElementChild và lastElementChild
Những thuộc tính này trả về nút phần tử con đầu tiên và cuối cùng (bỏ qua văn bản và bình luận).
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Sẽ in ra: Item 1
console.log(last.textContent); // Sẽ in ra: Item 3
</script>
</body>
</html>
GO TO FULL VERSION