javascript id로 자식 가져 오기

Question

<div onclick="test(this)"> 
    Test 
    <div id="child">child</div> 
</div> 

부모 div를 클릭하면 하위 div의 스타일을 변경하고 싶습니다. 그것을 어떻게 참조 할 수 있습니까? 나는 변경 될 수 있습니다 부모 DIV의 html로로 ID하여 참조 할 수 있도록하고 싶습니다와 아이는 내가 아이를 참조 할 수 있습니다 첫 번째 자식 등 같은

function test(el){ 
    el.childNode["child"].style.display = "none"; 
} 

뭔가되지 않습니다 id로 노드를 만들고 스타일을 설정하십시오.

감사합니다.

EDIT : 고유 한 ID가 필요한 지점. 그러니 제 질문을 조금 수정 해주십시오. 페이지에 추가되는 모든 요소에 대해 고유 한 ID를 만들어야한다는 것은 싫어합니다. 상위 div가 동적으로 추가됩니다. (일종의 페이지 메모 시스템). 그리고 나서이 자식 div가 있습니다. 나는 이와 같은 것을 할 수 있기를 바란다 : el.getElementsByName ("options"). item (0) .style.display = "block";

el을 문서로 바꾸면 제대로 작동하지만 페이지의 모든 "옵션"하위 div에 적용되지는 않습니다. 반면, 부모 div를 클릭하고 자식 div가 뭔가를 수행하도록 할 수 있기를 원합니다 (예 : 사라짐).

동적으로 백만 개의 (과장된) div ID를 생성해야한다면 가능하지만 그렇지 않을 것입니다. 어떤 아이디어?

Answer 1

(IE8, 파이어 폭스, 크롬, 오페라, 사파리)는 querySelector() 사용할 수 있습니다 이전 버전의 브라우저를 들어

function test(el){ 
    el.querySelector("#child").style.display = "none"; 
} 

(< = IE7), 당신이 라이브러리의 어떤 종류를 사용하는 것, Sizzle과 같은 프레임 워크 또는 jQuery과 같은 프레임 워크를 사용하여 선택기로 작업 할 수 있습니다.

언급 한 바와 같이 ID는 문서 내에서 고유해야하므로 document.getElementById("child")을 사용하는 것이 가장 쉽습니다.

Answer 2

document.getElementById('child') 올바른 요소를 반환해야합니다. ID가 어쨌든 유효하도록하려면 문서 전체에서 고유해야합니다.

편집 : this page - 고유 ID이어야합니다.

편집 편집 : 문제를 해결하는 또 다른 방법 :.

<div onclick="test('child1')"> 
    Test 
    <div id="child1">child</div> 
</div> 

그때 당신은 당신이 전달 ID로 요소를 찾기 위해 테스트() 함수를 필요로 현대적인 브라우저에서

Answer 3

아이가 항상 다음 특정 태그를 될 것입니다 경우이

function test(el) 
{ 
var children = el.getElementsByTagName('div');// any tag could be used here.. 

    for(var i = 0; i< children.length;i++) 
    { 
    if (children[i].getAttribute('id') == 'child') // any attribute could be used here 
    { 
    // do what ever you want with the element.. 
    // children[i] holds the element at the moment.. 

    } 
    } 
} 

Answer 4

처럼 할 수있는이 잘 작동 :

function test(el){ 
    el.childNodes.item("child").style.display = "none"; 
} 

항목의 인수가() 함수가 인 경우 정수이면 함수는이를 인덱스로 처리합니다. 인수가 문자열이면 함수는 요소의 이름 또는 ID를 검색합니다.