Cách sửa đổi thuộc tính, lớp và kiểu trong DOM
Trong hướng dẫn trước của loạt bài này, “ Cách thực hiện thay đổi đối với DOM ”, ta đã đề cập đến cách tạo, chèn, thay thế và xóa các phần tử khỏi Mô hình đối tượng tài liệu (DOM) bằng các phương thức tích hợp sẵn. Bằng cách nâng cao trình độ của bạn trong việc thao tác DOM, bạn có thể sử dụng tốt hơn các khả năng tương tác của JavaScript và sửa đổi các phần tử web.Trong hướng dẫn này, ta sẽ tìm hiểu cách thay đổi thêm DOM bằng cách sửa đổi kiểu, lớp và các thuộc tính khác của các node phần tử HTML. Điều này sẽ giúp bạn hiểu rõ hơn về cách thao tác các phần tử thiết yếu trong DOM.
Xem xét các phần tử lựa chọn
Cho đến gần đây, một thư viện JavaScript phổ biến được gọi là jQuery thường được sử dụng để chọn và sửa đổi các phần tử trong DOM. jQuery đã đơn giản hóa quá trình chọn một hoặc nhiều phần tử và áp dụng các thay đổi cho tất cả chúng cùng một lúc. Trong “ Cách truy cập các phần tử trong DOM ”, ta đã xem xét các phương pháp DOM để lấy và làm việc với các node trong JavaScript vani.
Để xem lại, document.querySelector() và document.getElementById() là các phương thức được sử dụng để truy cập một phần tử duy nhất. Sử dụng một div có thuộc tính id trong ví dụ bên dưới, ta có thể truy cập phần tử đó theo một cách nào đó.
<div id="demo-id">Demo ID</div> Phương thức querySelector() mạnh hơn ở chỗ nó có thể chọn một phần tử trên trang bằng bất kỳ loại bộ chọn nào.
// Both methods will return a single element const demoId = document.querySelector('#demo-id'); Truy cập vào một phần tử duy nhất, ta có thể dễ dàng cập nhật một phần của phần tử đó chẳng hạn như văn bản bên trong.
// Change the text of one element demoId.textContent = 'Demo ID text updated.'; Tuy nhiên, khi truy cập nhiều phần tử bằng một bộ chọn chung, chẳng hạn như một lớp cụ thể, ta phải lặp qua tất cả các phần tử trong danh sách. Trong đoạn mã dưới đây, ta có hai phần tử div với một giá trị lớp chung.
<div class="demo-class">Demo Class 1</div> <div class="demo-class">Demo Class 2</div> Ta sẽ sử dụng querySelectorAll() để lấy tất cả các phần tử có demo-class được áp dụng cho chúng và forEach() để lặp qua chúng và áp dụng một thay đổi. Cũng có thể truy cập một phần tử cụ thể bằng querySelectorAll() giống như cách bạn làm với một mảng - bằng cách sử dụng ký hiệu dấu ngoặc.
// Get a NodeList of all .demo elements const demoClasses = document.querySelectorAll('.demo-class'); // Change the text of multiple elements with a loop demoClasses.forEach(element => { element.textContent = 'All demo classes updated.'; }); // Access the first element in the NodeList demoClasses[0]; Đây là một trong những khác biệt quan trọng nhất cần biết khi chuyển từ jQuery sang JavaScript vani. Nhiều ví dụ về sửa đổi phần tử sẽ không giải thích quá trình áp dụng các phương pháp và thuộc tính đó cho nhiều phần tử.
Các thuộc tính và phương thức trong bài viết này thường sẽ được đính kèm với trình xử lý sự kiện để phản hồi các nhấp chuột, di chuột qua hoặc các trình kích hoạt khác.
Lưu ý: Các phương thức getElementsByClassName() và getElementsByTagName() sẽ trả về các tập hợp HTML không có quyền truy cập vào phương thức forEach() mà querySelectorAll() có. Trong những trường hợp này, bạn cần sử dụng mộtvòng lặp for chuẩn để lặp qua bộ sưu tập.
Sửa đổi các thuộc tính
Thuộc tính là các giá trị chứa thông tin bổ sung về các phần tử HTML. Chúng thường có trong các cặp tên / giá trị và có thể cần thiết tùy thuộc vào phần tử.
Một số trong những thuộc tính HTML thông thường là những src thuộc tính của một img thẻ, href của một a thẻ, class , id , và style . Để có danh sách đầy đủ các thuộc tính HTML, hãy xem danh sách thuộc tính trên Mạng nhà phát triển Mozilla. Các phần tử tùy chỉnh không phải là một phần của tiêu chuẩn HTML sẽ được thêm vào trước với data- .
Trong JavaScript, ta có bốn phương pháp để sửa đổi các thuộc tính phần tử:
| phương pháp | Sự miêu tả | Thí dụ |
|---|---|---|
hasAttribute() | Trả về một boolean true hoặc false | element.hasAttribute('href'); |
getAttribute() | Trả về giá trị của một thuộc tính được chỉ định hoặc null | element.getAttribute('href'); |
setAttribute() | Thêm hoặc cập nhật giá trị của một thuộc tính cụ thể | element.setAttribute('href', 'index.html'); |
removeAttribute() | Xóa một thuộc tính khỏi một phần tử | element.removeAttribute('href'); |
Hãy tạo một file HTML mới với thẻ img có một thuộc tính. Ta sẽ liên kết đến một hình ảnh công khai có sẵn thông qua một URL, nhưng bạn có thể swap nó cho một hình ảnh local thay thế nếu bạn đang làm việc offline .
<!DOCTYPE html> <html lang="en"> <body> <img src="https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png"> </body> </html> Khi bạn tải file HTML ở trên vào trình duyệt web hiện đại và mở Control panel dành cho nhà phát triển được tích hợp sẵn, bạn sẽ thấy thông tin như sau:
Bây giờ, ta có thể kiểm tra tất cả các phương thức thuộc tính một cách nhanh chóng.
// Assign image element const img = document.querySelector('img'); img.hasAttribute('src'); // returns true img.getAttribute('src'); // returns "...shark.png" img.removeAttribute('src'); // remove the src attribute and value Đến đây, bạn sẽ xóa thuộc tính src và giá trị được liên kết với img , nhưng bạn có thể đặt lại thuộc tính đó và gán giá trị cho một hình ảnh thay thế bằng img.setAttribute() :
img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png'); 
Cuối cùng, ta có thể sửa đổi thuộc tính trực tiếp bằng cách gán một giá trị mới cho thuộc tính làm thuộc tính của phần tử, đặt src trở lại file shark.png
img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png'; Bất kỳ thuộc tính nào cũng có thể được chỉnh sửa theo cách này cũng như với các phương pháp trên.
Các phương thức hasAttribute() và getAttribute() thường được sử dụng với các câu lệnh điều kiện và các phương thức setAttribute() và removeAttribute() được sử dụng để sửa đổi trực tiếp DOM.
Sửa đổi lớp
Thuộc tính lớp tương ứng với các bộ chọn lớp CSS . Điều này không được nhầm lẫn với các lớp ES6 , một loại hàm JavaScript đặc biệt.
Các lớp CSS được sử dụng để áp dụng kiểu cho nhiều phần tử, không giống như các ID chỉ có thể tồn tại một lần trên mỗi trang. Trong JavaScript, ta có các thuộc tính className và classList để làm việc với thuộc tính class.
| Phương thức / Thuộc tính | Sự miêu tả | Thí dụ |
|---|---|---|
className | Nhận hoặc đặt giá trị lớp | element.className; |
classList.add() | Thêm một hoặc nhiều giá trị lớp | element.classList.add('active'); |
classList.toggle() | Bật hoặc tắt lớp học | element.classList.toggle('active'); |
classList.contains() | Kiểm tra xem giá trị lớp có tồn tại không | element.classList.contains('active'); |
classList.replace() | Thay thế một giá trị lớp hiện có bằng một giá trị lớp mới | element.classList.replace('old', 'new'); |
classList.remove() | Xóa giá trị lớp | element.classList.remove('active'); |
Ta sẽ tạo một file HTML khác để làm việc với các phương thức của lớp, với hai phần tử và một vài lớp.
<!DOCTYPE html> <html lang="en"> <style> body { max-width: 600px; margin: 0 auto; font-family: sans-serif; } .active { border: 2px solid blue; } .warning { border: 2px solid red; } .hidden { display: none; } div { border: 2px dashed lightgray; padding: 15px; margin: 5px; } </style> <body> <div>Div 1</div> <div class="active">Div 2</div> </body> </html> Khi bạn mở file classes.html vào trình duyệt web, bạn sẽ nhận được kết xuất trông giống như sau:
Thuộc tính className được giới thiệu để ngăn chặn xung đột với từ khóa class được tìm thấy trong JavaScript và các ngôn ngữ khác có quyền truy cập vào DOM. Bạn có thể sử dụng className để gán giá trị trực tiếp cho lớp.
// Select the first div const div = document.querySelector('div'); // Assign the warning class to the first div div.className = 'warning'; Ta đã gán lớp warning được xác định trong các giá trị CSS của classes.html cho div đầu tiên. Bạn sẽ nhận được kết quả sau:
Lưu ý nếu bất kỳ lớp nào đã tồn tại trên phần tử, điều này sẽ overrides chúng. Bạn có thể thêm nhiều lớp được phân cách bằng dấu cách bằng thuộc tính className hoặc sử dụng nó mà không cần toán tử gán để nhận giá trị của lớp trên phần tử.
Một cách khác để sửa đổi các lớp là thông qua thuộc tính classList , đi kèm với một vài phương thức hữu ích. Các phương thức này tương tự như các phương thức addClass , removeClass và toggleClass của jQuery.
// Select the second div by class name const activeDiv = document.querySelector('.active'); activeDiv.classList.add('hidden'); // Add the hidden class activeDiv.classList.remove('hidden'); // Remove the hidden class activeDiv.classList.toggle('hidden'); // Switch between hidden true and false activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class Sau khi thực hiện các phương pháp trên, trang web sẽ giống như sau:
Không giống như trong ví dụ className , sử dụng classList.add() sẽ thêm một lớp mới vào danh sách các lớp hiện có. Bạn cũng có thể thêm nhiều lớp dưới dạng các chuỗi được phân tách bằng dấu phẩy. Cũng có thể sử dụng setAttribute để sửa đổi lớp của một phần tử.
Sửa đổi kiểu
Thuộc tính style phản hồi các kiểu nội tuyến trên một phần tử HTML. Thông thường, các kiểu sẽ được áp dụng cho các phần tử thông qua một biểu định kiểu như ta đã làm trước đó trong bài viết này, nhưng đôi khi ta phải thêm hoặc chỉnh sửa một kiểu nội tuyến trực tiếp.
Ta sẽ làm một ví dụ ngắn để chứng minh các kiểu chỉnh sửa với JavaScript. Dưới đây là file HTML mới với div có một số kiểu nội tuyến được áp dụng để hiển thị hình vuông.
<!DOCTYPE html> <html lang="en"> <body> <div style="height: 100px; width: 100px; border: 2px solid black;">Div</div> </body> </html> Khi được mở trong trình duyệt web, styles.html sẽ trông giống như sau:
Một tùy chọn để chỉnh sửa kiểu là với setAttribute() .
// Select div const div = document.querySelector('div'); // Apply style to div div.setAttribute('style', 'text-align: center'); Tuy nhiên, điều này sẽ xóa tất cả các kiểu nội tuyến hiện có khỏi phần tử. Vì đây có thể không phải là hiệu ứng dự kiến, tốt hơn nên sử dụng trực tiếp thuộc tính style
div.style.height = '100px'; div.style.width = '100px'; div.style.border = '2px solid black'; Thuộc tính CSS được viết bằng kebab-case, là các từ viết thường được phân tách bằng dấu gạch ngang. Điều quan trọng cần lưu ý là không thể sử dụng thuộc tính kebab-case CSS trên thuộc tính kiểu JavaScript. Thay vào đó, chúng sẽ được thay thế bằng camelCase tương đương, đó là khi từ đầu tiên là chữ thường và tất cả các từ tiếp theo đều được viết hoa. Nói cách khác, thay vì text-align ta sẽ sử dụng textAlign cho thuộc tính kiểu JavaScript.
// Make div into a circle and vertically center the text div.style.borderRadius = '50%'; div.style.display = 'flex'; div.style.justifyContent = 'center'; div.style.alignItems = 'center'; Sau khi hoàn thành các sửa đổi kiểu ở trên, kết xuất styles.html cuối cùng của bạn sẽ hiển thị một vòng tròn:
Nếu nhiều thay đổi về kiểu dáng được áp dụng cho một phần tử, thì cách hành động tốt nhất là áp dụng các kiểu cho một lớp và thêm một lớp mới. Tuy nhiên, có một số trường hợp trong đó việc sửa đổi thuộc tính kiểu nội tuyến cần thiết hoặc đơn giản hơn.
Kết luận
Các phần tử HTML thường có thông tin bổ sung được gán cho chúng dưới dạng các thuộc tính. Các thuộc tính có thể bao gồm các cặp tên / giá trị và một số thuộc tính phổ biến nhất là class và style .
Trong hướng dẫn này, ta đã học cách truy cập, sửa đổi và xóa các thuộc tính trên một phần tử HTML trong DOM bằng JavaScript thuần túy. Ta cũng đã học cách thêm, xóa, chuyển đổi và thay thế các lớp CSS trên một phần tử và cách chỉnh sửa các kiểu CSS nội tuyến. Để đọc thêm, hãy xem tài liệu về các thuộc tính trên Mạng nhà phát triển Mozilla.
Các tin liên quan
