javascript получить ребенка по id

Question

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

Я хочу изменить стиль дочернего div при нажатии на родительский div. Как мне это сделать? Я хотел бы, чтобы иметь возможность ссылаться на его ID, как HTML, в родительском DIV может измениться, и ребенок не будет первым ребенком и т.д.

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

Что-то вроде того, где я могу сослаться на ребенка узел по id и установить его стиль.

Спасибо.

EDIT: Точка, взятая с идентификаторами, которые должны быть уникальными. Поэтому позвольте мне немного пересмотреть свой вопрос. Мне не хотелось бы создавать уникальные идентификаторы для каждого элемента, который добавляется на страницу. Родительский div добавляется динамически. (вроде системы примечаний на странице). И тогда есть этот ребенок div. Я хотел бы иметь возможность сделать что-то вроде этого: el.getElementsByName ("options"). Item (0) .style.display = "block";

Если я заменяю документ el, он отлично работает, но он не относится к каждому дочернему элементу «options» на странице. Принимая во внимание, что я хочу иметь возможность щелкнуть родительский div и иметь дочерний div, чтобы сделать что-то (например, уйти).

Если мне нужно динамически создать миллион (преувеличенные) идентификаторы div, я сделаю это, но я бы предпочел. Есть идеи?

Answer 1

В современных браузерах (IE8, Firefox, Chrome, Opera, Safari), вы можете использовать querySelector():

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

для более старых браузеров (< = IE7), вам придется использовать какие-то библиотеки, такой как Sizzle, или каркас, такой как jQuery, для работы с селекторами.

Как уже упоминалось, идентификаторы должны быть уникальными внутри документа, поэтому проще всего использовать document.getElementById("child").

Answer 2

document.getElementById('child') должен вернуть вам правильный элемент - помните, что идентификатор должен быть уникальным в документе, чтобы он все равно был действительным.

Редактировать: см. this page - ids ДОЛЖНЫ быть уникальными.

редактировать редактировать: альтернативный путь решения проблемы:.

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

то вам просто нужна функция теста() для поиска элемента по идентификатору, который вы прошли в

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"; 
} 

Если аргумент пункта() функция является integer, функция будет рассматривать его как индекс. Если аргумент является строкой, функция выполняет поиск имени или идентификатора элемента.