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タグ疑似クラスの機能と記述順序は何ですか?

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

推薦する

Ajax jQueryはページ上のdivの更新効果を実現します

元のコードは次のとおりです。 <div class='コントロールグループ'&...

JavaScriptクロージャの原理と機能の詳細な説明

目次導入クロージャの使用カレー作りパブリック変数の実装キャッシュカプセル化(属性のプライベート化)閉...

シンプルなID生成戦略: MySQLテーブルからグローバルに一意のIDを生成する実装

グローバル ID を生成する方法は多数あります。ここでは簡単な解決策を紹介します。MySQL の自動...

SpringBootはActiviti7実装コードを統合する

Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...

Linux での中国語入力方法の問題を素早く解決する

背景: 最近、資産報告関連の機能に取り組んでおり、中国語入力をサポートする必要があります。通常のショ...

HTMLは無効なテーブル幅設定の問題を解決します

テーブルに table-layer:fixed スタイルを設定し、テーブル内の行が結合されていること...

JS の Promise に中止関数を追加する方法

目次概要プロミスレースメソッド約束の再パッケージ化中止コントローラAxiosプラグインにはキャンセル...

MySQLはカバーインデックスを使用してテーブルリターンを回避し、クエリを最適化します。

序文カバーリング インデックスについて説明する前に、まずそのデータ構造である B+ ツリーを理解する...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

ホワイトボードを踏まないようにするゲームを実装するための HTML+CSS+JS

目次背景1. 思考分析2. ページ構成2.1 HTML レイヤー2.2 CSS レイヤー2.3 JS...

Vue で PC 解像度の適応を実装するためのサンプルコード

目次プラン依存関係をインストールする依存関係の導入pxをremに変換するFlexible.jsを変更...

nginx+lua を使用した単一マシンでの何万もの同時接続の実装

nginx は弊社で最もよく使用されるサーバーで、コンテンツ配信やリバース プロキシによく使用されま...

Windows 10 に付属する仮想マシンのネットワークを設定するための詳細な手順 (グラフィック チュートリアル)

1. サーバー ホストをクリックし、右側の操作リストで [仮想スイッチ管理] をクリックして、仮想...

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...

ReactプロジェクトでのTypeScriptの実装

目次1. はじめに2. 使用方法ステートレスコンポーネントステートフルコンポーネント制御コンポーネン...