Hàm document.getElementsByName() 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 document.getElementsByName() sẽ trả về tập hợp các phần tử trong trang có thuộc tính name đượ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.
Lưu ý: Trong HTML5, Rất nhiều thẻ có thuộc tính name đã bị thay thế bằng thuộc tính id, do vậy khi sử dụng cần lưu ý sử dụng thuộc tính document.getElementById() trong các trường hợp thích hợp. Cũng lưu ý sử dụng hai phương thức getElementsByClassName() và getElementsByTagName() trong một số trường hợp.
Cú pháp
Cú pháp: document.getElementsByName(name)
- name là giá trị của thuộc tính name của các phần tử mà bạn muốn tìm kiếm.
Cách sử dụng
Định dạng màu chữ cho các phần tử có name="demo":
<!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 name="demo"> Name: PHP</h3>
<h3 name="demo">Time: 48 Videos</h3>
<h3 name="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.getElementsByName("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
