Cách truy cập các phần tử của DOM
- Phần 1:Tìm hiểu về DOM - Giới thiệu
- Phần 2: Tìm hiểu về DOM - DOM Tree và Nodes
- Phần 3: Cách truy cập các phần tử của DOM (hiện tại)
Giới thiệu
Trong bài viết DOM Tree và Node chúng tôi đã giới thiệu DOM được cấu trúc như một cây của các đối tượng được gọi là các Node và các node và các node đó có thể là text, comment, hay element. Thông thường, khi chúng ta truy cập nội dung trong DOM, nó sẽ thông qua một node element trong DOM.
Để thành thạo việc truy cập, thao tác các element trong DOM, cần phải có kiến thức về CSS selector, cú pháp, thuật ngữ cũng như hiểu biết vè các HTML element. Trong bài viết này, chúng tôi sẽ cung cấp các cách để truy cập các phần tử của DOM: bằng id, class, tag, và query selectors.
Tổng quan
Bạn có thể lưu file HTML, access.html vào project của bạn để làm việc với các ví dụ trong suốt bài viết này.
access.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>
Trong file HTML, chúng ta có nhiều element mà chúng ta sẽ truy cập với các phương thức document khác nhau. Khi chúng tôi hiển thị file access.html trên trình duyệt nó sẽ trông giống như sau:
Chúng tôi sẽ sử dụng các phương thức khác nhau để truy cập các element có sẵn trong file
Truy cập các Element bằng ID
Cách dễ dàng nhất để truy cập một element duy nhất trong DOM là bằng id duy nhất của nó. Chúng ta có thể lấy một phần tử bằng ID với phương thức getElementById() của đối tượng document.
document.getElementById();
Để được truy cập bằng ID, phần tử HTML phải có một thuộc tính id. Chúng tôi có một thẻ div với một id là demo.
<div id="demo">Access me by ID</div>
Trong tab console hãy lấy phần tử và gán cho nó một biến là demoId.
> const demoId = document.getElementById('demo');
In ra demoId trên console sẻ trả về phần tử HTML chứa trong nó.
> console.log(demoId);
//Output
<div id="demo">Access me by ID</div>
Để chắc chắn rằng chúng ta có truy cập chính xác element bằng ID hay không chúng tôi sẽ thay đổi màu border thành purple.
> demoId.style.border = '1px solid purple';
Khi chúng tôi làm như vậy, trang web nó sẽ trở thành như thế này:
Truy cập một phần tử bằng ID là cách có hiệu quả nhanh nhất để truy cập một phần tử trong DOM. Tuy nhiên, nó có nhược điểm một ID phải là duy nhất trong một trang, và nó chỉ truy vấn duy nhất một element tại một thời điểm. Nếu bạn muốn thêm một function cho nhiều phần tử trong một trang code của bạn sẽ lặp lại.
Truy vấn các Element bằng Class
Thuộc tính class được sử dụng để truy cập một hoặc nhiều element trong DOM. Chúng ta có thể lấy tất cả các element với một class name, phương thức có cú pháp như sau getElementsByClassName()
Bây giờ chúng ta muốn truy cập nhiều element, với ví dụ mẫu chúng ta có hai element với class là demo
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
Hãy truy cập các element đó trong giao diện console và đặt vào đó một biến là demoClass.
> const demoClass = document.getElementsByClassName('demo');Tại điểm này, bạn có thể nghĩ rằng bạn có thể sửa đổi các phần tử giống như cách bạn đã làm với ví dụ ID. Tuy nhiên, nếu chúng tôi thử chạy đoạn code để thay đổi giá trị của thuộc tính border của mỗi phần tử có class demo thành orange chúng ta sẽ nhận được một lỗi.
> demoClass.style.border = '1px solid orange';
Output
Uncaught TypeError: Cannot set property 'border' of undefined
Lý do đoạn mã trên không hoạt động bởi vì thay thay vì chỉ gọi một phần tử duy nhất, chúng ta có một array-like object của các element
> console.log(demoClass);
Output
(2) [div.demo, div.demo]
Mảng JavaScript phải truy cập bằng một chỉ số index. Vì thế chúng ta có thể thay đổi phần tử đầu tiên của array này bằng cách sử dụng một chỉ số index là 0.
> demoClass[0].style.border = '1px solid orange';
Nói chung, khi truy cập các element bằng class chúng ta muốn áp dụng một sự thay đổi cho tất cả các element trong document với class cụ thể đó, không chỉ một. Chúng ta có thể làm điều này bằng cách sử dụng vòng lặp for và lặp qua tất cả các phần tử trong mảng.
> for (i = 0; i < demoClass.length; i++) {
> demoClass[i].style.border = '1px solid orange';
> }
Khi chúng ta chạy đoạn code này, trang sẽ trực tiếp hiển thị như sau
Bây giờ chúng ta có thể chọn mỗi phần tử có class demo và thay đổi thuộc tính border thành orange
Truy cập các phần tử bằng thẻ Tag
Một cách ít được sử dụng để truy cập nhiều element trên một trang đó là sử dụng các thẻ tag HTML. Cú pháp như sau:
document.getElementsByTagName();
Cho các thẻ article dưới đây:
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
Như cách truy cập element bằng class, getElementByTagName() sẽ trả về một array like object của các emlement, và chúng ta có thể chỉnh sửa mỗi tag trong documnet với một vòng lặp for.
const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
Chạy đoạn code trên, trang web sẽ hiển thị như sau
Vòng lặp đã thay đổi toàn bộ thuộc tính border của tất cả element article thành blue.
Query Selector
Nếu bạn có một chút kinh nghiệm cới jquery API bạn có thể quen với cách truy cập với JQuery sử dụng các phương thức truy cập DOM với các css selector.
$('#demo'); // returns the demo ID element in jQuery
Chúng ta có thể làm điều tương tự đó bằng cách sử dụng các phương thức của JavaScript là querySelector() và querySelectorAll().
document.querySelector();
document.querySelectorAll();
Để truy cập một element đơn lẻ, chúng ta sẽ sử dụng phương thức querySelector(). Trong file HTML của chúng tôi, chúng tôi có một element demo-query
<div id="demo-query">Access me by query</div>
Trong css để chọn một element có thuộc tính id chúng ta thường thêm ký tự (#) trước id đó. Chúng ta có thể gán element với id là demo-query vào một biến là demoQuery.
const demoQuery = document.querySelector('#demo-query');
Trong trường hợp chúng ta chọn nhiều element, như là class thẻ tag, querySelector() sẽ trả về phần tử đầu tiên mà phương thức đó tìm thấy. Chúng ta có thể sử dụng phương thức querySelectorAll() để nhóm các phần tử được truy vấn.
Trong file ví dụ, chúng ta có hai element có class lad demo-query-all
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
Để truy vấn các element có class chúng ta thêm dấu chấm (.) trước class đó giống như selector một class trong css. Giống như đoạn mã dưới đây:
> const demoQueryAll = document.querySelectorAll('.demo-query-all');
Sử dụng phương thức forEach() chúng ta có thế áp dụng thuộc tính color green vào thuộc tính css border cho tất cả các element.
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});
Với querySelector() các giá trị phân cách bởi các dấu phẩy (,) sẽ hoạt động như một toán tử OR. Ví dụ, querySelector(''div, article) sẽ phù hợp với div hoặc article. Với querySelectorAll() các giá trị phân cách bởi các dấu phẩy (,) sẽ hoạt động như toán tử AND, và querySelectorAll('div, article') sẽ phù hợp tất cả thẻ div và article trong document.
Sử dụng các phương thức querySelector vô cùng mạnh mẽ, linh hoạt bạn có thể truy cập một phần tử hay một nhóm phần tử giống như selector CSS.
Mã JavaScript hoàn chỉnh
Dưới đây là toàn bộ mã được sử dụng minh họa ở trên. Bạn có thể sử dụng nó để truy cập các phần tử trong trang ví dụ. Lưu đoạn mã này thành file access.js.
// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');
// Change border of ID demo to purple
demoId.style.border = '1px solid purple';
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});
Kết quả cuối cùng file HTML sẽ trông như thế này:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
<script src="access.js"></script>
</body>
</html>
Kết luận
Trong bài viết này chúng tôi đã cung cấp 5 cách để truy cập các phần tử HTML trong DOM đó là sử dụng ID, class, HTML tag name, và sử dụng selector.
Bài viết được dịch từ digitalocean.com
Đăng ký thực tập Web front-end tại: http://bit.ly/2GTgkky
Bình luận