JavaScript ドキュメントオブジェクトモデル DOM

1. IDでHTML要素を検索する
2. タグ名でHTML要素を検索する
3. クラス名でHTML要素を検索する
4. JavaScriptはページ内のすべてのHTML属性を変更することができます
5. JavaScriptはページ内のすべてのCSSスタイルを変更できます
6. JavaScriptはページ上のすべてのイベントに応答できる

序文：

Web ページが読み込まれると、ブラウザはそのページのDocument Object Modelを作成します。プログラム可能なオブジェクトモデルを通じて、 JavaScript動的なHTMLを作成できるほどのパワーを獲得しました。

1. JavaScriptはページ内のすべてのHTML要素を変更できる

1. IDでHTML要素を検索する

特定のHTMLタグを見つけて変更する

<本文>
    <div calss="001">私は誰なのか</div>
    <スクリプト>
        var x = document.getElementById("001");
        x.innerHTML = "私は困難を恐れない勇敢な雄牛です";
    </スクリプト>
</本文>
<本文>

 <p id="intro">こんにちは、Niu Niu!</p>
 <p>この例では、<b>getElementById</b> メソッドを示します。</p>
 <スクリプト>
  x = document.getElementById("イントロ");
  document.write("<p>ID intro の段落からのテキスト: " + x.innerHTML + "</p>");
 </スクリプト>

</本文>

2. タグ名でHTML要素を検索する

var x = document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"要素の最初の段落は:' + y[0].innerHTML);

id=“main”の要素を見つけ、次にid=“main”要素内の最初の <p> 要素を見つけます。

// 最初の書き方 var x = document.getElementById("main");
var y = x.getElementsByTagName("p")[0];

//HTML 内のすべての p タグを検索し、最初のタグの内容を置き換えます var y = document.getElementsByTagName("p");
y[0].innerHTML = "困難を恐れない勇敢な雄牛"

<スクリプト>
 var x = document.getElementById("main");
 var y=x.getElementsByTagName("p");
 document.write('id="main"要素の最初の段落は:' + y[0].innerHTML);
</スクリプト>

3. クラス名でHTML要素を検索する

<本文>
    <p class="intro">こんにちは、Niu Niu!</p>
    <p>この例では、<b>getElementsByClassName</b> メソッドを示します。</p>
    <スクリプト>
        x = document.getElementsByClassName("intro");
        document.write("<p>クラスの紹介段落からのテキスト: " + x[0].innerHTML + "</p>");
    </スクリプト>
</本文>

このようなタグの要素コンテンツを変更します。

<本文>
    <p class="intro">こんにちは、Niu Niu!</p>
    <p>この例では、<b>getElementsByClassName</b> メソッドを示します。</p>
    <スクリプト>
        ドキュメントの要素をクラス名で取得します。
        x.innerHTML = "タグコンテンツを変更する";
        // document.write("<p>クラスの紹介段落からのテキスト: " + x[0].innerHTML + "</p>");
    </スクリプト>
</本文>

4. JavaScriptはページ内のすべてのHTML属性を変更することができます

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

document.getElementById(id).attribute=新しい属性値 <img id="image" src="smiley.gif" width="160" height="120">
<スクリプト>
 document.getElementById("画像").src="landscape.jpg";
</スクリプト>
<p>元の画像は smiley.gif ですが、スクリプトによって landscape.jpg に変更されます。</p>

5. JavaScriptはページ上のすべてのCSSスタイルを変更できます

JavaScript HTML DOM - CSSの変更

HTML 要素のスタイルを変更するには、次の構文を使用します。

document.getElementById(id).style.property=新樣式

<!DOCTYPE html>
<html>
<ヘッド>
 <メタ文字セット="utf-8">
 <title>タイトル</title>
</head>
<本文>
 <p id="p1">こんにちは世界！</p>
 <p id="p2">こんにちは世界！</p>
 <スクリプト>
  document.getElementById("p2").style.color="blue";
  document.getElementById("p2").style.fontFamily="Arial";
  document.getElementById("p2").style.fontSize="大きい";
 </スクリプト>
 <p>上記の段落はスクリプトによって変更されています。 </p>
</本文>
</html>

6. JavaScriptはページ上のすべてのイベントに応答できる

イベントをディスパッチする HTML DOM:

つまり、何かをすると、特定の機能がトリガーされるということです。

<!DOCTYPE html>
<html>
<ヘッド>
<メタ文字セット="utf-8">
</head>
<本文>

 <p>ボタンをクリックすると、<em>displayDate()</em> 関数が実行されます。 </p>
 
 <button id="myBtn">クリックしてください</button>
 
 <スクリプト>
  document.getElementById("myBtn").onclick=関数(){
   表示日付()};
  関数 displayDate()
  {
   
      document.getElementById("demo").innerHTML=日付();
  }
 </スクリプト>
 
 <p id="デモ"></p>

</本文>
</html>

次のように：

onmouseover イベントと onmouseout イベントを使用すると、マウスポインターが要素に移動したり要素から離れたりしたときに関数をトリガーできます。

<!DOCTYPE html>
<html><head>
<メタ文字セット="utf-8">
</head>
<本文>

 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">マウスオーバー</div>
 
 <スクリプト>
  関数 mOver(obj)
  {
   
   obj.innerHTML="ありがとう"
  }
  
  関数 mOut(obj)
  {
   
   obj.innerHTML="マウスオーバー"
  }
 </スクリプト>

</本文>
</html>

JavaScript ドキュメントオブジェクトモデル DOM に関するこの記事はこれで終わりです。JavaScript ドキュメントオブジェクトモデルに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: