Trouble With Element.getElementsByTagName

I'm having some trouble using the Element.getElementsByTagName method. With the following HTML:

​

Solution 1:

You cannot nest <p> tags.

Your nested <p id="test"><p></p><p></p></p> is rendered as:

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

Hence a.getElementsByTagName('p') is an empty collection.

Solution 2:

Your HTML will become the following dom:

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

because you can't nest paragraphs.

Solution 3:

P block has a certain property it don't take the block element inside its scope , if you place any block element(ul,li,div,p etc) it will push out from its block.

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

It renderends like this .

If you want to count the p block try to place inside the div block like this

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