Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why isn't getElementById() available on Elements?

Most DOM query methods are available on both Documents and Elements. For example,

console.assert(
  document.getElementsByTagName   && document.body.getElementsByTagName &&
  document.getElementsByClassName && document.body.getElementsByClassName &&
  document.querySelector          && document.body.querySelector &&
  document.querySelectorAll       && document.body.querySelectorAll
);

However, getElementById is only available on Document:

console.assert(document.getElementById);
console.assert(document.body.getElementById == undefined);

Why is this so?


The WHATWG DOM Living Standard tells us that:

Web compatibility prevents the getElementById() method from being exposed on elements

The W3C DOM4 Recommendation is a bit more specific:

The getElementById() method is not on elements for compatibility with older versions of jQuery. If a time comes where that version of jQuery has disappeared, we might be able to support it.

However, I still have a hard time understanding what the issue could be. How could the presence of this methods adversely affect the behaviour of jQuery or other libraries?

I've tried looking through old versions of jQuery (such as 1.0.0 and 1.7.0) to see if any of their use of getElementById hints at why this may have been a problem. I see that getElementById used to be buggy in some older browsers, but they detect that and fall back to a reliable manual implementation instead. I don't see anywhere that it could be called on an element and cause a bug. Where does this compatibility concern come from?

like image 542
Jeremy Avatar asked Jan 18 '19 16:01

Jeremy


People also ask

Why is document getElementById not working?

This error TypeError: document. getelementbyid(...) is null would seem to indicate that there is no such element with an ID passed to getElementById() exist. This can happen if the JavaScript code is executed before the page is fully loaded, so its not able to find the element.

Does getElementById only work on document?

getElementById() is a quick way to access an element. Unlike the querySelector() method, the getElementById() is only available on the document object, not other elements. In this syntax, the id is a string that represents the id of the element to select. The id is case-sensitive.

Why does jQuery or a DOM method such as getElementById not find the element?

At the moment the script is executed, the element does not exist yet and getElementById will return null . The same applies to all selectors with jQuery. jQuery won't find elements if you misspelled your selector or you are trying to select them before they actually exist.

What can I use instead of document getElementById?

A commonly-used alternative to document. getElementById is using a jQuery selector which you read about more here.


1 Answers

The git blame on https://github.com/w3c/dom’s master branch points to:

commit f71d7de304e1ee25573279157dd6ce1c2aa2c4f2
Author: Anne van Kesteren
AuthorDate: Tue Nov 26 13:53:41 2013 +0000
Commit: Anne van Kesteren <[email protected]>
CommitDate: Tue Nov 26 13:53:41 2013 +0000

Remove getElementById from Element. https://www.w3.org/Bugs/Public/show_bug.cgi?id=23860

and the linked bug describes how jQuery 1.2.5 + 1.2.6 (1.2.x?) are affected:

jQuery 1.2.5 assumes that any node it found in the DOM that has a "getElementById" property is a Document node. See https://bugzilla.mozilla.org/show_bug.cgi?id=933193#c17

like image 50
Ry- Avatar answered Oct 19 '22 18:10

Ry-