основная проблема JavaScript с childNodes

Question

Я новичок в JS. Я отправил этот вопрос, потому что я пытался найти решение в течение 2 часов (сейчас 3 часа ночи, и я умираю, чтобы лечь спать) Так что спасибо за понимание.

Я хочу получить дочерний узел тэга div. Затем сообщите имя (txtPhone).

<div class="formfield">
  <input id="txtPhone" name="txtPhone" />

Итак:

alert(document.getElementsByTagName("div")...?);

Большое спасибо!

Answer 1

Используя только JavaScript, вы получите следующее свойство: firstChild .

Чтобы предупредить имя элемента:

alert(document.getElementsByTagName("div")[0].firstChild.name);

Обратите внимание, что вы используете getElementsByTagName, который возвращает массив всех элементов div - в моем примере, приведенном выше, я получаю доступ к первому элементу из этого набора, поэтому он вернет правильную ссылку, только если ваш div является первым на странице.

Чтобы обойти это, я бы предложил дать тегу div, на который вы хотите указывать идентификатор, а затем вместо него использовать getElementById ("id"):

<div class="formfield" id="divPhone">
    <input id="txtPhone" name="txtPhone" />

и

alert(document.getElementsById("divPhone").firstChild.name);

Если вы действительно хотите настроить таргетинг на группу элементов, я бы предложил использовать селекторы jQuery для таргетинга на конкретные элементы, такие как $(".formfield").firstChild.name

Answer 2

Я пока не могу оставить комментарий, но я просто хотел добавить к посту Мэтью - это на самом деле делает Chrome (и другие браузеры webkit ???), а не Firefox (но вы были правы насчет IE). Я просто столкнулся с этой проблемой с сайтом, который по какой-то странной причине использовал childNodes [0] для получения определенного элемента из коллекции div, а не просто с помощью getElementById (так как он знает идентификатор). Мне потребовалось целую вечность, чтобы понять, в чем проблема, пока я не прошел и не посмотрел точно, что происходит в каждой строке кода в каждом браузере.

Answer 3

Это должно сделать это:

alert(document.getElementByTagName("div")[0].getElementsByTagName("input")[0].name));

Обратите внимание, что в вашем примере у вас есть символ табуляции / пробела после div? Некоторые браузеры (Firefox, а не IE из памяти) будут рассматривать этот пробел как текстовый узел. Поэтому firstChild будет установлен на текстовый узел, содержащий пробелы в этих браузерах, чего вы, вероятно, не хотите.