1. コアブラウザのウェブページは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 ノードが空であると仮定すると、 <本文> <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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: 電子メールの HTML ページを作成するための原則の概要
1つ: 1.セマンティック タグは単なる HTML であり、CSS にはセマンティクスはありません...
「ウェブサイトを高級感のあるものにするにはどうすればいいでしょうか? それともデザイン重視にすればい...
私は最近、ユーザー操作を元に戻す、またはやり直す機能を備えたビジュアル操作プラットフォームを開発して...
序文group by と distinctive のパフォーマンス比較について: インターネット上の...
React プロジェクトの構築は非常に簡単ですが、Typescript と組み合わせると、実際にはそ...
クイックスタートガイドForeman インストーラーは、完全に機能する Foreman セットアップ...
もうナンセンスじゃない、郵便番号HTML部分 <div class="positio...
効果: タイトルには独自のシリアル番号があり、コードブロックには配色があり、コードブロックの左上隅に...
ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safar...
次の図に示すように: 仮想マシンと Docker を使用するとき、「なぜ Docker は VM よ...
文法 背景: linear-gradient(direction,color-stop1,color...
序文通常、ファイル内の特定の行を削除したい場合は、まずファイルを開き、削除する内容を見つけて、これら...
タイトルの通り、高さは既知で、左と右の列の幅は 300 ピクセル、中央は適応型です。弾性ボックス自体...
1. 目的Flask アプリケーションをローカルで作成し、Docker でパッケージ化し、独自のサー...
会社の影響力が拡大し、製品が改良され続けるにつれて、関連するイメージデザインもそれに追いつき、徐々に...