DOM HTML


HTML DOM を使用すると、JavaScript で HTML 要素のコンテンツを変更できます。

HTML出力ストリームを変更する

JavaScriptは動的なHTMLコンテンツを作成できます:

今日の日付は:

火曜日 Oct 18 2016 09:59:23 GMT+0800


アットインJavaScript の document.write() を使用して、コンテンツを HTML 出力ストリームに直接書き込むことができます。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

lampドキュメントがロードされた後は、document.write()を決して使用しないでください。これによりドキュメントが上書きされます。

HTML コンテンツを変更する

HTML コンテンツを変更する最も簡単な方法は、innerHTML プロパティを使用することです。

HTML 要素のコンテンツを変更するには、次の構文を使用します:

document.getElementById(id).innerHTML=New HTML

この例では、<p> 要素のコンテンツを変更します。

インスタンス

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

この例では、<h1>要素の内容を変更します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>

</body>
</html>

インスタンスの実行 »「サンプルの実行」ボタンをクリックして、オンラインのサンプルを表示します

インスタンスの説明:

  • 上記の HTML ドキュメントには、id="header" の <h1> 要素が含まれています


  • HTML DOM を使用して ="header" の id 要素を取得します


  • JavaScript この要素のコンテンツを変更します (innerHTML)


HTML 属性を変更します

HTML 要素の属性を変更するには、次の構文を使用します:

document.getElementById (
id).attribute=新しい属性値
この例では、<img> 要素の src 属性を変更します:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<img id="image" src="/upload/course/000/000/009/580469a2a27e3327.gif" width="160" height="120">
<script>
document.getElementById("image").src="/upload/course/000/000/009/58058303e12c0481.jpg";
</script>
<p>原图片为 /upload/course/000/000/009/580469a2a27e3327.gif,脚本将图片修改为/upload/course/000/000/009/58058303e12c0481.jpg</p>

</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックして、オンラインの例を表示します

例の説明:

  • 上記の HTML ドキュメントには、id="image" の <img> 要素が含まれています

  • HTML DOM を使用して id="image" の要素を取得します

  • JavaScript はこの要素の属性を変更します (「/upload/course/000/000/009/58058303e12c0481.jpg」を「/upload/course/000」に変更します) /000/009/580469a2a27e3327.gif

    ")