5.1 document.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>
Java university

ユーザーが画像をクリックすると、関数が呼び出されますchangeImge()。imageその中で、によって要素を取得しID、その src 属性の値を新しい値に変更します。これにより、要素imgに新しい画像が読み込まれます。

5.2 document.createElement()

要素を取得するだけでなく、新しい要素を作成したり、既存の要素を削除したりすることもできます。

要素の作成は非常に簡単です。これを行うには、2 つのことを行う必要があります: 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() メソッド

もう 1 つの非常に便利な方法は、 ですwindow.navigate()。これを使用すると、ブラウザに現在のページではなく新しいページを強制的に読み込ませることができます。それをこのメソッドに渡してURL呼び出すだけです。例：

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

上の例では、ユーザーが画像をクリックすると、ページ google.com が現在のタブに読み込まれます。

5.4 現在の URL

そしてもう一つ便利なことがあります。場合によっては、スクリプトで現在のページの URL を知る必要があります。たとえば、同じスクリプトを異なるページに追加できます。どうやってするの？

これには特別なプロパティがあります。document.location.href

var currentURL = document.location.href;