JavaScript DOM オブジェクト操作

JavaScript DOM オブジェクト操作

1. コア

ブラウザのウェブページはDOMツリー構造である

  • 更新: Domノードを更新
  • Domノードのトラバース: Domノードを取得する
  • 削除: Domノードを削除する
  • 追加:新しいノードを追加する

Domノードを操作するには、まずDomノードを取得する必要があります。

1. Domノードを取得する

 <本文>
    <div id="div1">
   <h1 id="h"></h1>
   <p class="p1"></p>
   </div>
 </本文>

 //タグ別 document.getElementsByTagName('h1');
  //ID別
   ドキュメントの要素IDを取得します('div1');
  //クラスを通して
   ドキュメントの要素をクラス名で取得します('p1');
  //親ノードを取得する h.parentElement
  //親ノードの下にあるすべての子ノードを取得します。div1.children[index];
  //現在のノードの下の最初のノード div1.firstElementChild を取得します。
  //現在のノードの下の最後のノード div1.lastElementChild を取得します。
  //次のノードを取得します h.nextElementSibling;

2. ノードの更新

   //テキストの値を更新します div1.innerText='テキストの値を変更します'; 
   //ハイパーテキストを更新し、HTML テキスト タグを解析できます div1.innerHTML='<strong>ハイパーテキストの追加</storng>';
   //CSSを更新
   div1.style.color='赤';
   div1.style.fontSize='20px';//CamelCase 命名 div1.style.padding='2em';

2.1 実践演習

IDを取得

変更前

操作入力

3. Domノードを削除する

ノードを削除する手順:最初に親ノードを取得し、次に親ノードを介して自分自身を削除します

let self=document.getElementById('p1');//削除されたノードを取得します。let father=self.parentElement//親ノードを取得します。father.removeChild(self);//親ノードを介してノードを削除します。

注意:ノードを削除すると、サブノード配​​列は常に変化するため、配列を通じて静的に連続的に削除することはできず、複数回動的に削除することしかできません。

4. ノードを挿入する

Dom ノードを取得します。この Dom ノードが空であると仮定すると、 innerHtMLを通じて要素を追加できます。ただし、このDomノードにすでに要素がある場合は上書きされます。

 <本文>
 
  <p id="p1">Java</p>
  <div id="div1">
  <p>JavaScript</p>
  <p>css</p>
  <p>こ</p>
  </div>
 </本文>

4.1 既存のタグを挿入する

a=document.getElementById('div1'); とします。
b = document.getElementById('p1'); とします。
a.appendChild(b);//追加

効果

4.2 挿入する新しいタグを作成する

   let a=document.createElement('p');//ノード p タグを作成 a.id='p2';
   a.innerText='こんにちは、シャオシェン';
   let list = document.getElementById('div1'); //div1のIDを取得
   list.appendChild(a); //子ノードを追加 //ラベルノードを作成 let a=document.createElement('script');
   a.setAttribute('type','text/javascript');

効果:

 //スタイルタグノードを作成 let st=document.createElement('style');
   st.setAttribute('type','text/css');
   st.innerHTML='body{背景色:ピンク;}';
   let hd = document.getElementsByTagName('head')[0]; //headは0番目の要素であることに注意してください。
   hd.appendChild(st);

効果:

4.3 子ノードの前に挿入 (insertBefore)

<html>
 <ヘッド>
  <メタ文字セット="utf-8">
  <タイトル></タイトル>
 </head>
 <本文>
 
  <p id="p1">Java</p>
  <div id="div1">
  JavaScript
  <p id='p2'>css</p>
  <p id="p3">C</p>
  </div>
  <script type="text/javascript">
  // 子ノードを持つ親ノード let list = document.getElementById('div1');
  self = document.getElementById('p2'); とします。
  前に=document.getElementById('p1');
  リストに自分自身を挿入します。

  </スクリプト>
 </本文>
</html>

効果:

JavaScript Dom オブジェクト操作に関するこの記事はこれで終わりです。より関連性の高い JavaScript Dom オブジェクト操作については、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操作の詳細な説明

<<:  docker createコマンドの使用方法

>>:  電子メールの HTML ページを作成するための原則の概要

推薦する

セマンティック HTML 構造の利点は何ですか?

1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...

ウェブサイトをより高く、よりデザイン的に見せる方法

「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...

vuex で履歴を実装するためのサンプルコード

私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...

MySQL で重複を削除するには、distinct または group by を使用する必要がありますか?

序文group by と distinctive のパフォーマンス比較について: インターネット上の...

React+TypeScriptプロジェクト構築事例解説

React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...

フォアマン Ubuntu16 クイックインストール

クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...

CSSはインラインブロックのずれの問題を解決します

もうナンセンスじゃない、郵便番号HTML部分 <div class="positio...

Typora コードブロックのカラーマッチングとタイトルシリアル番号実装コード

効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...

JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明

ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safar...

Dockerの動作モードと原理の詳細な説明

次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...

CSS コンテナ背景 10 色グラデーション デモ (linear-gradient())

文法 背景: linear-gradient(direction,color-stop1,color...

sed コマンドを使用してファイルの特定の行を効率的に削除する方法

序文通常、ファイル内の特定の行を削除したい場合は、まずファイルを開き、削除する内容を見つけて、これら...

3列レイアウトを実現するCSS3フレキシブルボックスフレックス

タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...

Flask アプリケーションの Docker デプロイ実装手順

1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...

ウェブデザイナーのウェブデザイン学習経験とスキルのまとめ

会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...