Проблема с Element.getElementsByTagName

Question

У меня проблемы с использованием метода Element.getElementsByTagName.

Со следующим HTML:

<p id="test">
    <p></p>
    <p></p>
</p>​

И следующий Javascript:

var a = document.getElementById('test');
var b = a.getElementsByTagName('p');
console.log(a);
console.log(b);​

a установлен для переноса абзаца, но b установлен для пустого NodeList (пример: http://jsfiddle.net/xGjMN/).

Я ожидал, что b содержит два внутренних элемента абзаца. Я совершенно не понимаю что-то здесь?

Answer 1

Вы не можете вкладывать <p> теги.

Ваше вложенное <p id="test"><p></p><p></p></p> отображается как:

<p id="test"></p>
<p></p>
<p></p>
<p></p> <!-- From </p> -->

Следовательно, a.getElementsByTagName('p') - пустая коллекция.

Answer 2

P-блок имеет определенное свойство: он не принимает элемент блока в своей области видимости, если вы поместите какой-либо элемент блока (ul, li, div, p и т. Д.), Он вытолкнет его из своего блока.

<p id="test"></p>
<p></p>
<p></p>
<p></p>

Это выглядит так.

Если вы хотите сосчитать блок p, попробуйте поместить его в блок div следующим образом:

<div id="test">
    <p></p>
    <p></p>
</div>

Answer 3

Ваш HTML станет следующим домом:

<p id="test"> </p>
<p/>
<p/>
<p/>

, потому что вы не можете вкладывать абзацы.