Javascript get child по id

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

Что-то вроде этого, где я могу ссылаться на дочерний элемент node по id и устанавливать его стиль.

Спасибо.

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

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

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

Ответ 1

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

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

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

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

Ответ 2

Это хорошо работает:

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

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

Ответ 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..

    }
  }
}

Ответ 4

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

edit: см. эта страница - идентификаторы ДОЛЖНЫ быть уникальными.

edit edit: альтернативный способ решения проблемы:

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

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