5.1 tài liệu.getElementById()

Như bạn đã biết, JavaScript được tạo ra để thêm một số hoạt ảnh vào các trang HTML. Cho đến nay, chúng tôi đã không nói nhiều về nó. Làm cách nào để thêm hoạt ảnh tương tự này? Ví dụ, làm cách nào để thay đổi màu của một phần tử?

Để thay đổi màu của một phần tử, trước tiên bạn cần tìm phần tử này. Để làm điều này, có một chức năng document.getElementById();Bạn viết trong HTML của mình idtại phần tử mong muốn, sau đó truy cập nó từ JavaScript. Ví dụ:

Java university 

<head>
    <script>
        function changeImage()
        {
           var image = document.getElementById("image123");
            image.src = "new-image.png";
        }
    </script>
</head>
<body>
    <img id="image123" scr="big-image.png" onclick="changeImage()">
</body>

Sau khi người dùng nhấp vào hình ảnh, chức năng được gọi là changeImge(). Bên trong nó, chúng ta lấy phần tử imagetheo nó IDvà sau đó thay đổi giá trị của thuộc tính src của nó thành một giá trị mới. Điều này sẽ khiến phần tử imgtải một hình ảnh mới.

5.2 tài liệu.createElement()

Ngoài việc lấy một phần tử, chúng ta cũng có thể tạo các phần tử mới và xóa các phần tử hiện có.

Tạo các yếu tố rất dễ dàng. Để làm được điều này, bạn cần thực hiện hai việc: a) tạo một phần tử , b) thêm phần tử đó vào đúng vị trí trong tài liệu. Nó thường trông như thế này:


<head>
    <script>
        window.onload = function ()   {
            var image = document.createElement("IMG");
            var image.src = "big-image.png";
            document.body.addAfter(image);
        }
    </script>
</head>
<body>
</body>

5.3 phương thức window.navigate()

Một phương pháp rất hữu ích khác là window.navigate(). Với nó, bạn có thể buộc trình duyệt tải một trang mới thay vì trang hiện tại. Chỉ cần chuyển nó URLvào phương thức này và gọi nó. Ví dụ:


  <body> 
    <img scr="big-image.png" onclick="window.navigate('https://google.com');"> 
  </body>

Trong ví dụ trên, sau khi người dùng nhấp vào hình ảnh, trang google.com sẽ được tải vào tab hiện tại.

5.4 URL hiện tại

Và một điều hữu ích nữa. Đôi khi, tập lệnh cần biết URL của trang hiện tại. Ví dụ: cùng một tập lệnh có thể được thêm vào các trang khác nhau. Làm thế nào để làm nó?

Có một tài sản đặc biệt cho việc này.document.location.href

var currentURL = document.location.href;