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

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