別の内部の別のIDと同じIDを持つdiv内のdivを参照する

StackOverflow https://stackoverflow.com/questions/617450

質問

同じ名前のdivにネストされたdivと同じidを持つネストされたdivをidで参照するにはどうすればよいですか

eg 

<div id="obj1">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="Meta">
        <meta></meta>
    </div>
</div>

メタのinnerHTMLを取得したい

document.getElementById('obj1').getElementById('Meta').getElementsByTagName('meta')

機能しません

役に立ちましたか？

解決

IDは、SPAN、DIVなど、ページ上にそのアイテムのいずれかがある場合にのみ使用する必要があります。 CLASSは、繰り返し要素がある場合に使用するものです。

一意のIDで要素を参照しているが、ページに複数の要素があるため、コードは機能しません。

他のヒント

Idは一意であるはずです。

明白なことを指摘するのは嫌いですが、あなたの例では、obj1_Metaとobj2_Metaは一意のIDです。したがって、作業コードの場合：

document.getElementById('obj1_Meta').getElementsByTagName('meta')[0].innerHTML;

説明どおりに動作します。二重チェックとして、これを考えすぎましたか？

そうでない場合、残念...

「悪い」としてまたは「間違った」コードと同様に、機能するオプションはjQueryのようなJavaScriptフレームワークを使用することです。一度含めると、次のようにCSSセレクター（意味的に正しくないものでも）を渡すことで要素を取得できます。

$('#obj1 #obj1_Meta meta').html()

$（）は、jQueryのdocument.getElementById（）...ステロイドに関するものです。 .html（）は.innerHTMLと同等です

PrototypeJSやMooToolsなどの他のフレームワークも同様の機能を提供します。

プロトタイプの例：

$('#obj1 #obj1_Meta meta').innerHTML;//note the double 


 Frameworksは、ブラウザの互換性に関する時間と手間を大幅に節約します。 JavaScriptメソッド（getElementsByClassNameなど）とAJAXの迅速なコーディング。これらのことから、とにかく使用することをお勧めします。
s

Frameworksは、ブラウザの互換性に関する時間と手間を大幅に節約します。 JavaScriptメソッド（getElementsByClassNameなど）とAJAXの迅速なコーディング。これらのことから、とにかく使用することをお勧めします。

IDは一意であるため、クラスをインテリジェントに使用します。

<div id="obj1" class="obj">
    <div id="obj1_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2" class="obj">
    <div id="obj2_Meta" class="obj_Meta">
        <meta></meta>
    </div>
</div>
  • .obj =両方の要素をターゲットにします
  • ＃obj1.obj =最初のターゲットのみ
  • ＃obj1.obj_Meta = obj1の内部DIVをターゲットにします
  • ＃obj2.obj = 2番目のターゲットのみ
  • ＃obj2.obj_Meta = obj2の内部DIVをターゲットにします

また、「メタ」が原因でこのマークアップで問題が発生する場合があります。タグは、bodyタグではなくheadタグ内でのみ有効です。 Firebugを見るとわかるように、Firefoxはこれらのメタタグを本体から引き出し、それらをヘッドに放り込むことさえします（そして、この場合、親div内にテキストコンテンツを入れます）。 DOMにはまったく表示されません。

指定したHTMLの場合、これは機能するはずです：

document.getElementById('obj1').getElementsByTagName('div')[0].getElementsByTagName('meta');

内部divの偽のIDを無視し、タグ名で取得します。 getElementsByTagNameはサブツリー全体を検索するため、内部divを完全に無視することもできます。

document.getElementById('obj1').getElementsByTagName('meta');

id属性はドキュメント全体で一意の識別子であるため、おそらくidの名前空間を設定する必要があります。

<div id="obj1">
    <div id="obj1_Meta">
        <meta></meta>
    </div>
</div>

<div id="obj2">
    <div id="obj2_Meta">
        <meta></meta>
    </div>
</div>

document.getElementById('obj1_Meta').getElementsByTagName('meta')
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top