06/04/2021, 14:48

Hàm document.getElementsByTagName() 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 getElementsByTagName() sẽ trả về tập hợp các phần tử trong trang có tên thẻ đượ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ể truyền tham số * để lấy tất cả các phần tử trên trang.

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.(tagname)

  • tagname là tên của các thẻ mà bạn muốn tìm kiếm.

Cách sử dụng

Định dạng màu chữ cho các thẻ h3 và đổi màu cho chúng:

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 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.getElementsByTagName("h3");
                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

Hoàng Hải Đăng

24 chủ đề

7226 bài viết

Cùng chủ đề
0