javascript - Why is getElementsByTagName returning undefined?

I'm trying to call document.getElementsByTagName, and I'm getting back undefined as a result, no matter what parameter I pass. (Even if I pass "*".)

I tried Googling for it, but all the search results were about elements of the getElementsByTagName result array being undefined. What I'm getting is undefined as the result itself, and it's driving me up the wall.

Does anyone know what can cause this? (Using Firefox 12.0. In Chrome I get the expected results.)

EDIT: OK, here's sample code:

function buttonClick(){
   var xhr = new XMLHttpRequest();
   var msg = document.getElementById('message');
   var buttons = document.getElementsByTagName("button");
   var button, i;
   for (i = 0; i < buttons.length; ++i){
      button = buttons[i];
      msg.removeChild(button);
   }

   xhr.onreadystatechange = function() {
        if(xhr.readyState == 4){
            handleResult(xhr.responseText, msg);
        }
   };
   xhr.open("POST", location.href, true);
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xhr.send("cmd=MyCommand");
}

And the getElementsByTagName always returns undefined, whether I trace it in Firebug's Script tab or call it from the Console tab. (Also in Firebug, since this seems to be confusing people. Apparently there are way too many consoles floating around.).

As proof, here's what I've been getting when I tried to use the Firebug console:

>>> document.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName
getElementsByTagName()
>>> msg.getElementsByTagName("BUTTON");
undefined
>>> msg.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("body");
undefined

The markup is (or ought to be) irrelevant. It's a valid, well-formed HTML page with some buttons and other elements on it. This JS function is attached to the onclick of one of the buttons. But it looks something like this:

<html xmlns=""><head>
blah
</head>
<body>
<script type="text/javascript" src="/myJS.js"></script>
<div id="page-container">
   <div id="message"><button onclick="buttonClick();">Button 1</button><button onclick="ButtonClick2()">Button 2</button></div>

</div>

</body></html>

I'm trying to call document.getElementsByTagName, and I'm getting back undefined as a result, no matter what parameter I pass. (Even if I pass "*".)

Does anyone know what can cause this? (Using Firefox 12.0. In Chrome I get the expected results.)

EDIT: OK, here's sample code:

function buttonClick(){
   var xhr = new XMLHttpRequest();
   var msg = document.getElementById('message');
   var buttons = document.getElementsByTagName("button");
   var button, i;
   for (i = 0; i < buttons.length; ++i){
      button = buttons[i];
      msg.removeChild(button);
   }

   xhr.onreadystatechange = function() {
        if(xhr.readyState == 4){
            handleResult(xhr.responseText, msg);
        }
   };
   xhr.open("POST", location.href, true);
   xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   xhr.send("cmd=MyCommand");
}

As proof, here's what I've been getting when I tried to use the Firebug console:

>>> document.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName("button");
undefined
>>> msg.getElementsByTagName
getElementsByTagName()
>>> msg.getElementsByTagName("BUTTON");
undefined
>>> msg.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("*");
undefined
>>> document.getElementsByTagName("body");
undefined

<html xmlns="http://www.w3.org/1999/xhtml"><head>
blah
</head>
<body>
<script type="text/javascript" src="/myJS.js"></script>
<div id="page-container">
   <div id="message"><button onclick="buttonClick();">Button 1</button><button onclick="ButtonClick2()">Button 2</button></div>

</div>

</body></html>

Share Improve this question edited May 27, 2012 at 17:13 asked May 27, 2012 at 16:25 Mason Wheeler 84.6k54 gold badges284 silver badges505 bronze badges

3 That method should never return undefined, even when there are no matches. Are you testing in the console, or on a page? – user1106925 Commented May 27, 2012 at 16:26
2 Have you tried running the JavaScript after the elements are loaded in the DOM? Putting the <script>...</script> just before the closing </body> tag? Or in a <body onload="functionName()"> onload event? – David Thomas Commented May 27, 2012 at 16:29
Fiddle demos: jsfiddle.net/5nQDc – Jared Farrish Commented May 27, 2012 at 16:30
1 I don't see where you're logging to the console. Perhaps a typo? Perhaps console.log(button), leaving off the s? Perhaps you're logging outside the variable scope? Perhaps you're affected by the asynchronous nature of xhr requests? – user1106925 Commented May 27, 2012 at 16:33
2 @MasonWheeler: You weren't explicit about what you were doing in the console. If you're executing getElementsByTagName directly in the console, but you're doing var foo = document.getElem..., then it will show up as undefined. – user1106925 Commented May 27, 2012 at 16:41

| Show 28 more comments

5 Answers 5

Sorted by: Reset to default 8

edit:

This is a bug in firebug and is fixed by upgrading to 1.10.0a7

Because it is impossible for this method to return undefined, there are 2 possibilities:

Your debugging tools are lying to you
document.getElementsByTagName is not referencing the original host object. It should print function getElementsByTagName() {[native code]} when referenced in console.

You should be able to reliably to see if it's in fact undefined (in firefox) with this:

delete window.alert;
window.alert(buttons);

The delete is a NOOP if window.alert is already referencing the original host object, otherwise it will restore it.

If it alerts undefined, you should be able to do

delete document.getElementsByTagName

to restore the host object reference.

All console references here refer to the built in Web Console that comes with firefox by default.

I got the problem when I made a difficult to see syntax error. I used parenthesis when I should have used square brackets

Wrong:

selectedItem._element.childNodes(0).getElementsByTagName('input').item();

Right:

selectedItem._element.childNodes[0].getElementsByTagName('input').item();

See the difference? Note, the top syntax works is older versions of IE, like IE8, but it doesn't work in ie10, ie11, Edge etc

Isn't REPL a stand-alone, browser-independent JavaScript environment? While, in your case, in just happens to be running in your browser as a plugin, it's supposed to mimic a "clean room" per say...

To summarize this guy's answer: document.getElementById() returns null when using mozrepl (but not in firebug)

By default, you'r in the browser's context, not the document's.

Try this to switch to the document instead:

repl.enter(content)

You can't alert an Array, you should do a for loop to alert it. Example:

var x = document.getElementsByTagName('a');
for (var i = 0, c = x.length ; i < c ; i++) {
    alert('Element n° ' + (i + 1) + ' : ' + x[i]);
}

This issue is also raised when we try to access element without array index. Because document.getElementsByTagName('tag') returns an array.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why is getElementsByTagName returning undefined? - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)