Блог

Главная - Вопросы по программированию - элемент javascript.дочерние узлы, указывающие на будущее?

элемент javascript.дочерние узлы, указывающие на будущее?

#javascript #html

#javascript #HTML

Вопрос:

итак, я перебираю elem.childNodes и изменяю дочерние узлы. И я получаю следующее поведение. Почему?

HTML:

 <div>
   <p>
   </p>
</div>

чего я ожидаю, произойдет:

 1. elem = div
2. console.log(elem.childNodes) = [p]    (this is what I expect console.log to output)
3. elem.html("<p></p><p></p>");

Что происходит на самом деле:

 1. elem = div
2. console.log(elem.childNodes) = [p, p] (yes, console.log outputs 2 p elements before I even run elem.html)
3. elem.html("<p></p><p></p>");

Примечание:

 if I don't run elem.html("<p></p><p></p>"); after console.log(elem.childNodes), console.log(elem.childNodes) outputs [p]

Комментарии:

1. посмотрите, происходит ли это таким образом в других браузерах

2. Что произойдет, если вы вызовете setTimeout(function () { elem.html("<p></p><p></p>"); }, 0) ?

Ответ №1:

Дочерние узлы — это живой список узлов. Я подозреваю, что консоль.журнал показывает состояние elem.childNodes по завершении функции, а не в момент ее вызова.

Обратите внимание, что console является проприетарным расширением, поэтому его поведение может отличаться в разных браузерах, если оно вообще поддерживается.

Комментарии:

1. ( 1) это верно. Если бы вместо этого OP вошел в систему elem.childNodes.length , он бы увидел 1 , а не 2 .

2. Спасибо. Для справки на будущее, браузер chromium — это тот, чья консоль отображает состояние elem.childNodes по завершении функции, а не в момент ее вызова.