ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScriptによるHTML DOMの基本的な操作方法を詳しく解説_基礎知識
JavaScriptによるHTML DOMの基本的な操作方法を詳しく解説_基礎知識
- WBOYオリジナル
- 2016-05-16 15:35:571172ブラウズ
HTML DOM は、JavaScript HTML ドキュメントのすべての要素へのアクセスを提供します。
HTML DOM (ドキュメント オブジェクト モデル)
Web ページが読み込まれると、ブラウザはページのドキュメント オブジェクト モデルを作成します。
HTML DOM モデルはオブジェクトのツリーとして構築されます:
プログラム可能なオブジェクト モデルを通じて、JavaScript は動的な HTML を作成するのに十分な能力を獲得しました。
- JavaScript はページ内のすべての HTML 要素を変更できます
- JavaScript はページ内のすべての HTML 属性を変更できます
- JavaScript はページ内のすべての CSS スタイルを変更できます
- JavaScript はページ内のすべてのイベントに反応できます
HTML 要素を検索
通常、JavaScript では HTML 要素を操作する必要があります。
これを行うには、まず要素を見つける必要があります。これを行うには 3 つの方法があります:
- ID で HTML 要素を検索
- タグ名で HTML 要素を検索
- クラス名で HTML 要素を検索
- ID で HTML 要素を検索
DOM 内で HTML 要素を見つける最も簡単な方法は、要素の ID を使用することです。
この例では、id="intro" の要素を検索します:
例
var x=document.getElementById("intro");
要素が見つかった場合、メソッドは要素をオブジェクト (x 内) として返します。
要素が見つからない場合、x には null が含まれます。
タグ名で HTML 要素を検索
この例では、id="main" の要素を検索し、次に id="main" 要素内のすべての
要素を検索します。
例
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
クラス名で HTML 要素を検索
この例では、getElementsByClassName 関数を使用して class="intro" を持つ要素を検索します:
例
var x=document.getElementsByClassName("intro");
HTML を変更
HTML DOM を使用すると、JavaScript で HTML 要素のコンテンツを変更できます。
HTML 出力ストリームを変更する
JavaScript は動的な HTML コンテンツを作成できます:
今日の日付は次のとおりです: Wed Oct 21 2015 14:43:25 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=新しい HTML
この例では、
要素の内容を変更します。
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
この例では、要素の内容を変更します。
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>
</body>
</html>
例による説明:
上記の HTML ドキュメントには、id="header" の
- 要素が含まれています。
- HTML DOM を使用して id="header" を持つ要素を取得します
- JavaScript はこの要素 (innerHTML) のコンテンツを変更します
HTML 要素の属性を変更するには、次の構文を使用します:
document.getElementById(id).attribute=new value
要素の src 属性を変更します。
例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif" alt="JavaScriptによるHTML DOMの基本的な操作方法を詳しく解説_基礎知識" >
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
例による説明: 上記の HTML ドキュメントには、id="image" の
- 要素が含まれています。
- HTML DOM を使用して id="image" の要素を取得します
- JavaScript はこの要素の属性を変更します (「smiley.gif」を「landscape.jpg」に変更します)