5.1 文檔.getElementById()

如您所知,創建 JavaScript 是為了向 HTML 頁面添加一些動畫。到目前為止,我們還沒有說太多。如何添加相同的動畫?例如,如何改變元素的顏色?

要改變一個元素的顏色,首先需要找到這個元素。為此,document.getElementById();您可以在 HTML 中的id所需元素處編寫一個函數,然後從 JavaScript 訪問它。例子:

<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>

用戶點擊圖片後,函數被調用changeImge()image在其中,我們通過 its獲取元素ID,然後將其 src 屬性的值更改為一個新值。這將導致元素img加載新圖像。

5.2 文檔.createElement()

除了獲取元素之外,我們還可以創建新元素並刪除現有元素。

創建元素非常容易。為此,您需要做兩件事:a)創建一個元素,b)將它添加到文檔中的正確位置。它通常看起來像這樣:

<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 window.navigate() 方法

另一個非常有用的方法是window.navigate(). 使用它,您可以強制瀏覽器加載新頁面而不是當前頁面。只需將其傳遞URL給此方法並調用它即可。例子:

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

在上面的示例中,用戶點擊圖片後,google.com 頁面將加載到當前選項卡中。

5.4 當前網址

還有一件有用的事情。有時腳本需要知道當前頁面的 URL。例如,可以將相同的腳本添加到不同的頁面。怎麼做?

為此有一個特殊的屬性。document.location.href

var currentURL = document.location.href;