getElementById doesn't work on a node

Question

In this simple script i get the error "obj.parentNode.getElementById is not a function", and I have no idea, what is wrong.

<script type="text/javascript">

        function dosomething (obj) {
         sibling=obj.parentNode.getElementById("2");
         alert(sibling.getAttribute("attr"));
        }

</script>

<body>
 <div>
  <a id="1" onclick="dosomething(this)">1</a>
  <a id="2" attr="some attribute">2</a>
 </div>
</body>

score 9 · Accepted Answer · answered Oct 10 '10 at 23:39

9

.getElementById() is on document, like this:

document.getElementById("2");

Since IDs are supposed to be unique, there's no need for a method that finds an element by ID relative to any other element (in this case, inside that parent). Also, they shouldn't start with a number if using HTML4, a numberic ID is valid in HTML5.

answered Oct 10 '10 at 23:39

Nick Craver

623,446
136
1,297
1,155

So, despite getElementById is often described together with other DOM methods as appliable to any node, in fact it's appliable only to document. OK, thanks. – Ursus Russus Oct 10 '10 at 23:54

score 8 · Answer 2 · answered Mar 15 '17 at 17:16

8

replace .getElementById(id) with .querySelector('#'+id);

answered Mar 15 '17 at 17:16

Jay Byford-Rew

5,736
1
35
36

This answer actually solves the initial problem even if it does not answer the underlying question. – Arajay Aug 25 '21 at 21:45
querySelector is not supported in IE 6 - 7, see in [querySelector Can I use](https://caniuse.com/?search=querySelector) – syahid246 Feb 24 '22 at 22:15

score 3 · Answer 3 · edited Oct 19 '12 at 22:29

document.getElementById() won't work if the node was created on the fly and not yet attached into the main document dom.

For example with Ajax, not all nodes are attached at any given point. In this case, you'd either need to explicitly track a handle to each node (generally best for performance), or use something like this to look the objects back up:

function domGet( id , rootNode ) {
    if ( !id ) return null;

    if ( rootNode === undefined ) {

        // rel to doc base
        var o = document.getElementById( id );
        return o;

    } else {

        // rel to current node
        var nodes = [];
        nodes.push(rootNode);
        while ( nodes && nodes.length > 0 ) {
            var children = [];
            for ( var i = 0; i<nodes.length; i++ ) {
                var node = nodes[i];
                if ( node && node['id'] !== undefined ) {
                    if ( node.id == id ) {
                        return node; // found!
                    }
                }

                // else keep searching
                var childNodes = node.childNodes;
                if ( childNodes && childNodes.length > 0 ) {
                    for ( var j = 0 ; j < childNodes.length; j++ ) {
                        children.push( childNodes[j] );
                    }
                }
            }
            nodes = children;
        }

        // nothing found
        return null;
    }
}

getElementById doesn't work on a node

3 Answers3

Linked