この記事では、JavaScript を使用した HTML DOM 要素の「previousElementSibling」プロパティについて説明します。
HTML DOM 要素の「previousElementSibling」プロパティとは何ですか?
DOM (ドキュメント オブジェクト モデル) 要素「 前の要素兄弟 ” は、同じツリー内の要素の前の兄弟を取得するのに役立つ読み取り専用プロパティです。このプロパティは、前の兄弟のコンテンツを返します。
構文
エレメント。 前の要素兄弟
この構文は「」を返します。 弦 前の兄弟の HTML コンテンツを含む「」、および「 ヌル 」が存在しない場合。
上記で定義した構文を実際に使用して、「previousElementSibling」プロパティの動作を示してみましょう。
例: 「previousElementSibling」プロパティを適用して前の兄弟のコンテンツを返す
この例では、JavaScript の「previousElementSibling」プロパティを適用して、前の兄弟の HTML コンテンツを取得します。
HTMLコード
まず、次の HTML コードの概要を説明します。
< ウル >< それか ID = '初め' > HTML < / それか >
< それか ID = '2番' > CSS < / それか >
< それか ID = '三番目' > JavaScript < / それか >
< / ウル >
< p ID = 'ために' >< / p >
上記のコード行では次のようになります。
- ”
- 順序なしリスト内には、「」を使用して複数の項目が埋め込まれます。 <それ> ” タグと割り当てられた ID。
- 最後に、「 」タグは、一意の ID「para」を持つ空の段落を埋め込みます。
JavaScript コード
次に、JavaScript コードを続けます。
< 脚本 >アイテムをしましょう = 書類。 getElementById ( '三番目' ) 。 前の要素兄弟 。 内部HTML ;
書類。 getElementById ( 'ために' ) 。 内部HTML = ' 3 番目のアイテムの前の兄弟は次のとおりです : ' + アイテム ;
脚本 >
上記のコード スニペットによると、次のようになります。
- 「item」変数は最初に「 getElementById() 」メソッドを使用して、ID「3 番目」を使用して対象のリスト項目にアクセスし、「 前の要素兄弟 ” プロパティを使用して、前の兄弟を取得します。
- その後、「 getElementById() 」メソッドは、ID「para」を使用して追加された空の段落にアクセスし、「item」変数の値、つまり前の兄弟を追加します。
出力
ご覧のとおり、結果には、ターゲット項目の前の兄弟、つまり (JavaScript) が表示されます。
結論
JavaScript は、事前定義された DOM 要素「 前の要素兄弟 ” プロパティを使用して、要素の前の兄弟を取得します。ターゲット要素が存在する同じツリー レベルから要素の前の兄弟を返します。この投稿では、JavaScript の HTML DOM 要素「previousElementSibling」プロパティについて詳しく説明しました。