HTML DOM のparentElement プロパティを使用して親要素にアクセスする方法

Html Dom Noparentelement Puropatiwo Shi Yongshite Qin Yao Suniakusesusuru Fang Fa



JavaScript を使用してドキュメント オブジェクト モデル (DOM) に複数の機能を追加する際、開発者は多くの場合、要素の関連付けを分析する必要があります。これは、コード フローとサイトに含まれる機能の書式設定を合理化するターゲット要素の親要素をログに記録することで実現できます。

内容概要

JavaScriptの「parentElement」プロパティとは何ですか?

” 親要素 JavaScript の ” プロパティは、対象要素の親である要素を取得します。

HTML DOMのparentElementプロパティを介して親要素にアクセス/呼び出す方法は?

親要素には HTML DOM を使用してアクセスできます。 親要素 ” プロパティと” ノード名 ” プロパティを使用するか、代わりに「」経由で親要素のノードを取得します。 親ノード ' 財産。





構文



ノード。 親要素

戻り値
このプロパティは、ノードの親要素ノードを表す要素オブジェクトを取得し、「 ヌル 」 ノードが親を構成していない場合。



利用された一般的なメソッドとプロパティ

document.querySelector() : このメソッドは、CSS セレクターに一致する最初の要素を取得します。



構文

書類。 クエリセレクター ( これ ）

この構文では、「 これ 」は 1 つ以上の CSS セレクターを指します。



document.getElementById() : 指定された ID を持つ要素を返します。

構文

書類。 getElementById ( ID ）

ここ、 ' ID ”は取得する対象要素のIDを示します。

選択されたインデックス : このプロパティは、選択したオプションのインデックスをドロップダウン リストから取得します。の 「-1」 option はすべてのオプションの選択を解除します。

ノード名 : このプロパティはノードの名前を取得します。

子供たち : このプロパティは、要素の子要素をコレクションとして返します。

外部HTML : このプロパティは、HTML 要素とその属性、開始タグと終了タグを割り当てまたは取得します。

親ノード : この特定のプロパティは、要素またはノードの親ノードを取得します。

注記 ：「」の違い 親要素 ' そして ' 親ノード ” プロパティは、前者のプロパティ、つまり「parentElement」が「 ヌル ” 親ノードが要素ノードを反映していない場合。

例 1: JavaScript の「parentElement」プロパティを介した親要素へのアクセス

この例では、要素の親要素を呼び出し、ボタンをクリックするとその(親)ノード名が表示されます。

HTMLコード


< html >
< 体 >
< h1 > JavaScript のparentElement プロパティ < / h1 >
< h2 > 言語を選択します: < / h2 >
< 選択する クラス = '要素' >
< オプション > パイソン < / オプション >
< オプション > ジャワ < / オプション >
< オプション > JavaScript < / オプション >
< / 選択する >
< ボタン クリック時 = 「displayParent()」 クラス = 'ボタン' > 「option」要素の親要素を表示する < / ボタン >
< ディビジョン クラス = 「温度」 >< / ディビジョン >< / 体 >
< html >

このコードでは:

  • 与えられたものを指定してください 「

    」 そして 「

    」 それぞれレベル 1 とレベル 2 の見出しを構成する要素。

  • その後、 「<選択>」 追加の子要素を含む指定されたクラスによって表される要素、つまり、 「<オプション>」 。
  • ここで、「」に関連付けられたボタンを作成します。 クリック時 」イベントにリダイレクトされます。 「displayParent()」 ボタンをクリックすると機能します。
  • 最後に指定します 「
    」 結果、つまりアクセスされた親要素が表示される要素。

CSSコード

<スタイル >
体 {
テキスト整列 : 中心 ;
色 : #fff ;
背景色 : グレー ;
身長 : 100% ;
}
。ボタン {
身長 : 2レム ;
境界半径 : 2ピクセル ;
幅 : 35% ;
マージン : 2レム 自動 ;
画面 : ブロック ;
色 : #ba0b0b ;
カーソル : ポインタ ;
}
.temp {
フォントサイズ : 1.5レム ;
フォントの太さ : 大胆な ;
}
>

上記の CSS コードでは次のようになります。

  • 適用された「text-align」、「background-color」などのプロパティを使用して、Web ページ全体のスタイルを設定します。
  • 同様に、高さ、幅、表示、色などを調整して、クラスを介して作成されたボタンにスタイルを適用します。
  • 最後に「」のスタイルを設定します。 ディビジョン 」を参照して、アクセスされた親要素が表示されるクラス名を参照します。

JavaScript コード



< 脚本 >
関数 表示親 ( ） {
だった 得る = 書類。 クエリセレクタ ( '。要素' ） ;
だった これ = 得る 。 オプション [ 得る 。 選択されたインデックス ] ;
だった 追加する = 書類。 クエリセレクタ ( 「.temp」 ） ;
追加します。 内部HTML = 'オプション要素の親要素は -> ' + これ。 親要素 。 ノード名 ;
}
脚本 >

これらのコード行によると、次のようになります。

  • 関数を定義する 「displayParent()」 これは、「