getElementsByTagName('h1') doesnt' work if H1 tag is embeded in <div>?

Li Hong

unread,

Dec 25, 2009, 8:43:59 PM12/25/09

to dev-ext...@lists.mozilla.org

Merry Christmas List!

I am facing one bug that getElementsByTagName('h1') doesnt' work if H1 tag
is embeded in <div>.

If embeded like the following, the getElementsByTagName('h1') return null.
...
<body id="top">
<div id="header">
<h1>
<a href="http://www.phpmyadmin.net/">php<span
class="myadmin">MyAdmin</span></a>
3.2.2.1
Documentation
</h1>
</div>
...

Yet it can get h1 tag from the code below:
...
<body>
<h1>phpMyAdmin - ChangeLog</h1>
<pre>----------------------
phpMyAdmin - ChangeLog
...

My code:
window.addEventListener("load", function(e) {
my_extension.init();
gBrowser.addEventListener("load", myloadcall(), true);
}, false);

Eric Jung

unread,

Dec 26, 2009, 6:24:00 AM12/26/09

to dev-ext...@lists.mozilla.org

I'm guessing that you're hitting a race condition because you're not waiting
for the DOMContentLoaded event before executing getElementsByTagName().

By the way, if you're going to be doing a lot of DOM querying, you might
consider using XPath expressions instead of DOM methods. Your code will be
much more concise.

Eric

Li Hong

unread,

Dec 27, 2009, 1:15:05 AM12/27/09

to dev-ext...@lists.mozilla.org

>
>
> On Fri, Dec 25, 2009 at 8:43 PM, Li Hong <cef...@gmail.com> wrote:
>
> > Merry Christmas List!
> >
> > I am facing one bug that getElementsByTagName('h1') doesnt' work if H1
> tag
> > is embeded in <div>.
> >
> >
> > If embeded like the following, the getElementsByTagName('h1') return
> null.
> > ...
> > <body id="top">
> > <div id="header">
> > <h1>
> > <a href="http://www.phpmyadmin.net/">php<span
> > class="myadmin">MyAdmin</span></a>
> > 3.2.2.1
> > Documentation
> > </h1>
> > </div>
> > ...
> >
> > Yet it can get h1 tag from the code below:
> > ...
> > <body>
> > <h1>phpMyAdmin - ChangeLog</h1>

> > <pre>?----------------------

> > phpMyAdmin - ChangeLog
> > ...
> >
> > My code:
> > window.addEventListener("load", function(e) {
> > my_extension.init();
> > gBrowser.addEventListener("load", myloadcall(), true);
> > }, false);
> >
> > function myloadcall() {
> > if (content.document.getElementsByTagName('h1').item(0)!=null) {
> > alert("SendUrl: content.document.getElementsByTagName('h1') is
> >
> >
> "+content.document.getElementsByTagName('h1').item(0).firstChild.nodeValue);
> > url_h1 =
> > content.document.getElementsByTagName('h1').item(0).firstChild.nodeValue;
> > }
> > else {alert("SendUrl: content.document.getElementsByTagName('h1') is
> > NULL");}
> > }
> >
> >
> I'm guessing that you're hitting a race condition because you're not
> waiting
> for the DOMContentLoaded event before executing getElementsByTagName().
>
> By the way, if you're going to be doing a lot of DOM querying, you might
> consider using XPath expressions instead of DOM methods. Your code will be
> much more concise.
>
> Eric
>

Thanks Eric.

>I'm guessing that you're hitting a race condition because you're not
waiting
for the DOMContentLoaded event before executing getElementsByTagName().

My getElementsByTagName() works for the case when <h1> tag isn't wrapped
inside <div>. That could only happen if my getElementsByTagName() is after
DOMContentLoaded event, right?

I wonder if this is a DOM tree issue. Are all HTML tags organized at one
flat level after DOM tree got populated?

In the first case which my code works:

<html>

<body>
<h1>phpMyAdmin - ChangeLog</h1>

<pre>?----------------------

the structure is like Root(<html>)-><body>-><h1>. And
content.document.getElementsByTagName works.

In the 2nd case which my code doesn't work:
> <html>

> <body id="top">
> <div id="header">
> <h1>
> <a href="http://www.phpmyadmin.net/">php<span
> class="myadmin">MyAdmin</span></a>
> 3.2.2.1
> Documentation
> </h1>
> </div>

the strcture is like Root(<html>)-><body>-><div>-><h1>

Totally a guess. And I wonder if the 2nd case a valid HTML? is it syntax
correct to place <h1> inside a <div>?

Gijs Kruitbosch

unread,

Dec 27, 2009, 12:34:42 PM12/27/09

to Li Hong

On 27/12/2009 07:15 AM, Li Hong wrote:
> In the 2nd case which my code doesn't work:
>> <html>
>> <body id="top">
>> <div id="header">
>> <h1>
>> <a href="http://www.phpmyadmin.net/">php<span
>> class="myadmin">MyAdmin</span></a>
>> 3.2.2.1
>> Documentation
>> </h1>
>> </div>
>
> the strcture is like Root(<html>)-><body>-><div>-><h1>
>
> Totally a guess. And I wonder if the 2nd case a valid HTML? is it syntax
> correct to place<h1> inside a<div>?

This has nothing to do with the HTML, or getElementsByTagName.

0. Open http://software.hixie.ch/utilities/cgi/data/data
1. Replace the text in the textarea with:

<html lang="en">
<head>
<script>
function test()
{
alert(document.getElementsByTagName("h1")[0].nodeName)
}
</script>
</head>
<body onload="test()">
<div><h1>Test</h1></div>
</body>
</html>

And behold, you get an alert the way you'd expect. So something else is wrong,
probably what Eric suggested.

~ Gijs

Gijs Kruitbosch

unread,

Dec 28, 2009, 3:50:07 AM12/28/09

to Li Hong

Because it's supposed to be null for elements:
https://developer.mozilla.org/En/NodeValue

If you want the text contained in the element, try the textContent
attribute.

~ Gijs

On 28/12/2009 00:50 AM, Li Hong wrote:
> Thanks Gijs.
>
> I've put the following code in
> http://software.hixie.ch/utilities/cgi/data/data
>
> Yes I got the nodeName alert with value "H1" but "null" for the
> nodeValue popup. Why is that?
>
> ---
> <html>
> <header>
> <script>
> function test()
> {
> alert(document.getElementsByTagName("h1")[0].nodeValue);

> alert(document.getElementsByTagName("h1")[0].nodeName);
> }
> </script>
> </head>

> <body id="top" onload="test()">

> <div id="header">
> <h1>
> <a href="http://www.phpmyadmin.net/">php<span
> class="myadmin">MyAdmin</span></a>
> 3.2.2.1
> Documentation
> </h1>
> </div>

> hello body
> </body>
> </html>

> --
> Li Hong
>
>

Born Fool

unread,

Jun 6, 2012, 6:31:14 AM6/6/12

to dev-ext...@lists.mozilla.org

You can use the following code.

alert(document.getElementsByTagName("h1")[0].innerHTML);
It will return the title value.

:)

On Saturday, December 26, 2009 7:13:59 AM UTC+5:30, Li Hong wrote:
> Merry Christmas List!
>
> I am facing one bug that getElementsByTagName('h1') doesnt' work if H1 tag
> is embeded in

> .
>
>
> If embeded like the following, the getElementsByTagName('h1') return null.
> ...
> <body id="top">
>
>

> <h1>
> <a href="http://www.phpmyadmin.net/">php<span
> class="myadmin">MyAdmin</span></a>
> 3.2.2.1
> Documentation
> </h1>
> </div>
> ...
>
> Yet it can get h1 tag from the code below:
> ...
> <body>
> <h1>phpMyAdmin - ChangeLog</h1>
>

> .
>
>
> If embeded like the following, the getElementsByTagName('h1') return null.
> ...
> <body id="top">
>
>

> <h1>
> <a href="http://www.phpmyadmin.net/">php<span
> class="myadmin">MyAdmin</span></a>
> 3.2.2.1
> Documentation
> </h1>
> </div>
> ...
>
> Yet it can get h1 tag from the code below:
> ...
> <body>
> <h1>phpMyAdmin - ChangeLog</h1>
>

> .
>
>
> If embeded like the following, the getElementsByTagName('h1') return null.
> ...
> <body id="top">
>
>

> <h1>
> <a href="http://www.phpmyadmin.net/">php<span
> class="myadmin">MyAdmin</span></a>
> 3.2.2.1
> Documentation
> </h1>
> </div>
> ...
>
> Yet it can get h1 tag from the code below:
> ...
> <body>
> <h1>phpMyAdmin - ChangeLog</h1>
>