다른 내부와 같은 ID와 같은 DIV 내부의 div를 참조

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

문제

유사하게 명명 된 div에 중첩 된 div와 동일한 ID가있을 때 ID로 중첩 된 div를 어떻게 참조 할 수 있습니까?

예를 들어

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

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

메타의 내부를 얻고 싶습니다

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

작동하지 않습니다

도움이 되었습니까?

해결책

ID는 페이지에 해당 항목 중 하나가있을 때만 사용해야합니다. 클래스는 반복 요소가있을 때 사용해야하는 것입니다.

코드는 고유 한 ID로 요소를 참조하지만 페이지에 둘 이상이 있어야합니다.

다른 팁

ID는 독특해야합니다.

명백한 것을 지적하는 것을 싫어하지만, 당신의 예에서, OBJ1_META와 OBJ2_META는 고유 한 ID이므로 작업 코드의 경우입니다.

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

설명대로 작동합니다. 이중 점검으로, 당신은 이것을 생각 했습니까?

그렇지 않다면, 범머 ...

코드로 "나쁜"또는 "잘못된"이므로 작동하는 옵션은 jQuery와 같은 JavaScript 프레임 워크를 사용하는 것입니다. 일단 포함되면 CSS 선택기 (심지어 의미 적으로 부정확 한)를 전달하여 요소를 얻을 수 있습니다.

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

$ ()는 jQuery의 STEROIDS에서 문서를 말하는 방법입니다. .html ()는 .innerhtml에 해당합니다

프로토 타입 및 mootools와 같은 다른 프레임 워크도 유사한 기능을 제공합니다.

프로토 타입 예를 들어 :

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

프레임 워크는 브라우저 호환성, "누락 된"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 = 두 번째를 대상으로합니다
  • #obj2.obj_Meta = 대상 OBJ2 내부 div

"메타"태그는 바디 태그가 아닌 헤드 태그 내부에서만 합법적이기 때문에이 마크 업에 문제가 발생할 수도 있습니다. 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