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

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

序文:

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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript DOM オブジェクト操作
  • JavaScript のドキュメント オブジェクト モデル (DOM)
  • JavaScript 変数 Dom オブジェクトのすべてのプロパティ
  • JS を使用して DOM オブジェクト内の指定されたノードにアクセスする方法の例
  • JS を使用して DOM オブジェクト (タグ) のカスタム属性を読み取る方法について簡単に説明します。
  • JS の基本における DOM 内のドキュメント オブジェクトの一般的な属性メソッドの詳細な説明
  • DOM 内の要素オブジェクトの属性メソッドの詳細な説明 (js 基本編)
  • JavaScriptはDOMオブジェクトセレクタを実装する
  • JavaScript DOMオブジェクトの詳細な理解
  • JavaScript - DOM操作 - Window.documentオブジェクトの詳しい説明
  • jQueryオブジェクトとJavaScriptオブジェクト、つまりDOMオブジェクトは相互に変換されます
  • jsオブジェクト関係図はDOM操作を容易にします
  • JavaScript DOM オブジェクト学習サンプルコード
  • DOMオブジェクトに対するJavaScript操作の詳細な説明

<<:  aタグ疑似クラスの機能と記述順序は何ですか?

>>:  デザイン視点技術はデザイン能力の重要な資本である

推薦する

mySQLキーワードの実行優先度の説明

以下のように表示されます。表から条件フィールドでグループ化仮想テーブルとフィールドを作成し、フィール...

Linux の権限管理コマンド (chmod/chown/chgrp/unmask) の詳細な説明

目次chmod例権限に関する特別な注意分析するチョーンchgrp umask Linux オペレーテ...

W3C 検証に合格するにはどうすればいいですか?

W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...

Linuxでスクリーンショットを撮って編集するための最高のツール

メインのオペレーティング システムを Windows から Ubuntu に切り替えたとき、最初に考...

JS でシンプルな画像カルーセル効果を実現

この記事では、シンプルな画像カルーセル効果を実現するためのJSの具体的なコードを参考までに紹介します...

Vueは宮殿のグリッド回転抽選を実現します

Vueは宮殿グリッド回転抽選(CrossFireのxx転生に似ている)を実装しています。参考までに、...

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

要素の属性を削除する JS removeAttribute() メソッド

JavaScript では、要素の removeAttribute() メソッドを使用して、指定され...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...

MACでMYSQLデータベースのパスワードを忘れた場合の解決策

Mac オペレーティングシステムで MYSQL データベースのパスワードを忘れた場合の簡単な解決策1...

docker compose サービスの起動順序を制御する方法

まとめDocker-compose は複数の Docker コンテナ サービスを簡単に組み合わせるこ...

vue+node+socket ioは複数人のインタラクションを実現し、プロセス全体を解放します

1. 背景1. フロントエンドはvue + vuex + socket.io-clientを使用しま...

Docker に MySQL と Redis をインストールする方法

この記事はCentOS 7.3システム環境をベースに、MySQLとRedisのインストールと使用につ...

組み込みオブジェクトに関するJavascriptの基礎

目次1. 組み込みオブジェクトの紹介1.1 数学オブジェクト1.2 数学における方法1.3 日付オブ...

Mysql クラシック高レベル/コマンドライン操作 (クイック) (推奨)

サーバーとデータベースの構築方法を学ぶ必要があるため、最近は SQL 言語を独学で学び始めました。デ...