最新のWeb開発のチュートリアル
×

JS チュートリアル

JS HOME JS 導入 JS どこへ JS 輸出 JS 構文 JS ステートメント JS 注釈 JS 変数 JS 演算子 JS 算術 JS 割り当て JS データの種類 JS 機能 JS オブジェクト JS 範囲 JS イベント JS ストリング JS 文字列メソッド JS 数字 JS 数のメソッド JS 数学 JS 日付 JS 日付形式 JS 日付の方法 JS 配列 JS アレイ方式 JS ブール値 JS 比較 JS 条件 JS スイッチ JS ループ For JS ループしながら JS ブレーク JS 型変換 JS 正規表現 JS エラー JS デバッギング JS 巻き上げ JS strictモード JS スタイルガイド JS ベストプラクティス JS 間違い JS パフォーマンス JS 予約語 JS JSON

JS フォーム

フォームバリデーション フォームAPI

JS オブジェクト

オブジェクト定義 オブジェクトのプロパティ オブジェクトメソッド オブジェクトプロトタイプ

JS 機能

関数定義 ファンクションのパラメータ 関数の呼び出し 関数クロージャ

JS HTML DOM

DOM イントロ DOM メソッド DOM 資料 DOM 要素 DOM HTML DOM CSS DOM アニメーション DOM イベント DOM EventListener DOM ナビゲーション DOM ノード DOM ノードリスト

JS ブラウザ BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS

JS 例 JS HTML DOM JS HTML 入力 JS HTML オブジェクト JS HTML イベント JS ブラウザ JS クイズ JS 概要

JS リファレンスマニュアル

JavaScript オブジェクト HTML DOM オブジェクト


 

JavaScript HTML DOM - 変更HTML


HTML DOMは、JavaScriptがHTML要素の内容を変更することができます。


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

JavaScriptは、動的HTMLコンテンツを作成することができます。

日付:日2016年11月6日19時23分35秒GMT + 0800(中国标准时间)

JavaScriptでは、 document.write() HTML出力ストリームに直接書き込むために使用することができます。

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
»それを自分で試してみてください

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


HTMLコンテンツを変更します

HTML要素の内容を変更する最も簡単な方法は、使用しているinnerHTMLプロパティを。

HTML要素の内容を変更するには、次の構文を使用します。

document.getElementById(id).innerHTML = new HTML

この例では、内容に変更<p>要素を:

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
»それを自分で試してみてください

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

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>

</body>
</html>
»それを自分で試してみてください

例を説明しました:

  • 上記のHTML文書は含まれてい<h1>を持つ要素id="header"
  • 我々は持つ要素を取得するには、HTMLのDOMを使用するid="header"
  • JavaScriptは内容に変更(innerHTML)その要素のを

属性の値を変更します

HTML属性の値を変更するには、次の構文を使用します。

document.getElementById(id).attribute=new value

この例では、のsrc属性の値に変更<img>要素を:

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
»それを自分で試してみてください

例を説明しました:

  • 上記のHTML文書は含ま<img>を持つ要素id="myImage"
  • 我々は持つ要素を取得するには、HTMLのDOMを使用するid="myImage"
  • JavaScriptが変化するsrcからその要素の属性"smiley.gif""landscape.jpg"

練習で自分自身をテスト!

演習1» 演習2» 演習3» 演習4» 演習5»