A generic question

[justaguy]

I know there are at least three methods to identify or reference an object in DOM, namely,
(a) by id or name etc. for instance, getElementById() or getElementsByName or getElementsByTagName;
(b) by relationship, for instance, parentNode
(c) by class, for instance, document.getElementsByClassName

Just curious if there's additional method to achieve the same.

Thanks.

[JJ]

If a HTML element has an ID, it can be referenced from the global object or
the `window` object. e.g. for this element:

<div id="theDiv"></div>

It can be accessed like below:

<script>
(function() {
var ele;
//from the `window` object...
ele = window.theDiv;
//from the global object...
//assuming there's no local variable called `theDiv`
ele = theDiv;
})();
</script>

[justaguy]

Great. If we make such id all CAPS and we don't name local var with all CAPS, say, we name
<div id="theDiv"></div>
as
<div id="THEDIV"></div>

Then,
we may express it like this:
var ele;
if (window.THEDIV)
ele = window.THEDIV;
else
ele = THEDIV;

And it's interesting to see that it return the object and its value in its entirety.

Many thanks.

[Ram Tobolski]

You can retrieve dom elements by any CSS query, with document.querySelector and document.querySelectorAll. See https://www.w3schools.com/jsref/met_document_queryselector.asp

[Thomas 'PointedEars' Lahn]

JJ wrote:

> If a HTML element has an ID, it can be referenced from the global object
> or the `window` object.

… in Quirks Mode only, as this is a legacy feature. Do not use it.

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[Frank Kozuschnik]

Thomas 'PointedEars' Lahn:

> JJ:

>
>> If a HTML element has an ID, it can be referenced from the global
>> object or the `window` object.
>
> … in Quirks Mode only, as this is a legacy feature.

Which browser would nowadays support this "feature" in quirks mode only?
Even Firefox started polluting the global object in standards mode some
years ago.

https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960#c27

> Do not use it.

I agree. So does the HTML spec, but nevertheless the spec seems to
require it:

https://html.spec.whatwg.org/#named-access-on-the-window-object

[justaguy]

Good to know. Thanks.

[Thomas 'PointedEars' Lahn]

Frank Kozuschnik wrote:

> Thomas 'PointedEars' Lahn:
>> JJ:
>>> If a HTML element has an ID, it can be referenced from the global
>>> object or the `window` object.
>> … in Quirks Mode only, as this is a legacy feature.
>
> Which browser would nowadays support this "feature" in quirks mode only?

I do not know, but there have to be some. It might also depend on the
declared document type. If you really want to know, you can build a test
case and find it out; for me, it would be a waste of time.

> Even Firefox started polluting the global object in standards mode some
> years ago.
>
> https://www.w3.org/Bugs/Public/show_bug.cgi?id=11960#c27

Thank you. That is both interesting and disturbing.

>> Do not use it.
>
> I agree. So does the HTML spec, but nevertheless the spec seems to
> require it:
>
> https://html.spec.whatwg.org/#named-access-on-the-window-object

That is _not_ “the HTML spec”, but the WHATWG “HTML Living Standard”.
There are people who consider this document normative even though it
lacks all characteristics of an industry standard.

The latest HTML specification is the HTML 5.1 W3C Recommendation, based on
a snapshot of the above:

<https://www.w3.org/TR/2016/REC-html51-20161101/>

This error-prone legacy feature is actually specified in

<https://www.w3.org/TR/2016/REC-html51-20161101/browsers.html#named-access-on-the-window-object>

such that

| […] The supported property names at any moment consist of the following,
| in tree order, ignoring later duplicates:
|
| * the child browsing context name property set.
|
| * the value of the “name” content attribute for all “a”, “applet”, “area”,
| “embed”, “form”, “frameset”, “img”, and “object” elements in the active
| document that have a non-empty “name” content attribute, and
|
| * the value of the “id” content attribute of any HTML element in the
| active document with a non-empty “id” content attribute.

which I find even more disturbing. It would seem that the wannabes have
taken over core sections of the W3C at this point :-(

At least they have added this informal note at the top of the section:

| As a general rule, relying on this will lead to brittle code. Which IDs
| end up mapping to this API can vary over time, as new features are added
| to the Web platform, for example. Instead of this, use
| “document.getElementById()” or “document.querySelector()”.

[JJ]

On Sun, 30 Apr 2017 22:53:12 +0200, Frank Kozuschnik wrote:
> So does the HTML spec, but nevertheless the spec seems to
> require it:
>
> https://html.spec.whatwg.org/#named-access-on-the-window-object

Below code works for both Chrome and Firefox. Even in Standards mode.

<!DOCTYPE html>
<html>
<head></head>
<body id="abc">
<script>
alert(abc.innerHTML);
</script>
</body>
</html>

[Frank Kozuschnik]

JJ:

> Below code works for both Chrome and Firefox. Even in Standards mode.

Yes, your code works, but it is widely discouraged for good reasons.