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>
ユーザーが画像をクリックすると、関数が呼び出されます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;
GO TO FULL VERSION