06/04/2021, 14:48
Hàm document.getElementsByClassName() trong Javascript - Javascript Function
Code RUN <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> #result{ color: red; font-size: 20px; font-weight: bold; ...
Phương thức getElementsByClassName() sẽ trả về tập hợp các phần tử trong trang có thuộc tính class được cung cấp khi gọi phương thức. Kết quả sẽ được trả về dưới dạng một đối tượng NodeList object.
Đối tượng NodeList object sẽ đại diện cho một danh sách các node, người dùng có thể truy cập các node bằng chỉ số, các chỉ số sẽ được bắt đầu từ 0.
Bạn có thể sử dụng thuộc tính length để xác định tổng số phần tử có trong danh sách tìm được và cũng có thể lặp qua tất cả các phần tử để lấy thông tin cần thiết.
Cú pháp
Cú pháp: document.getElementsByClassName(classname)
- classname là class của các phần tử phần tử sẽ được tìm kiếm.
Cách sử dụng
Định dạng màu chữ cho các phần tử có class="demo":
Code
RUN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#result{
color: red;
font-size: 20px;
font-weight: bold;
}
</style>
<body>
<h1>Học lập trình miễn phí tại Zaidap.com.net</h1>
<ul class="freetut">
<h3>Khóa học 1</h3>
<h3 class="demo"> Name: PHP</h3>
<h3 class="demo">Time: 48 Videos</h3>
<h3 class="demo">Author: Nguyễn Văn A</h3>
</ul>
<p id="result"></p>
<button onclick="myFunction()">Xem kết quả</button>
<script>
function myFunction(){
var NodeObject = document.getElementsByClassName("demo");
NodeObject[0].style.color = "red";
NodeObject[1].style.color = "blue";
NodeObject[2].style.color = "yellow";
}
</script>
</body>
</html>Tham khảo: w3schools.com
Nguồn: Zaidap.com.net
