Why does element.id on element without id not return undefined or null?

Question

Inspired by this question and dealing with a similar situation, I wonder whether anyone can explain the rationale behind the decision to have element.id return an empty string when the id attribute is not present.

If the spec was to return null or undefined I could simply write

var allIds = $('#my-frm input').map(function() { return this.id; }).get();

Instead I have to either add a qualifier to the selector, as in

var allIds = $('#my-frm input[id]').map(function() { return this.id; }).get();

or use the other solution proposed to the above-mentioned question (which has to get the id twice in case it is present)

var allIds = $('#my-frm input').map(function() { return (this.id) ? this.id : null; }).get();

or I can use the jquery attribute getter, which seems unnecessary to wrap each element into a jquery object first, but I'm mentioning it for completeness and to show that jquery went the other direction with the .attr() method.

var allIds = $('#my-frm input').map(function() { return $(this).attr('id'); }).get();

I'm curious if there is a practical reason behind the javascript element.id behavior.

Update:

I finally located the relevant spec, which defines the current behavior (it doesn't explain why it was defined this way)

https://www.w3.org/TR/2015/REC-dom-20151119/#element

interface Element : Node {
  readonly attribute DOMString? namespaceURI;
  readonly attribute DOMString? prefix;
  readonly attribute DOMString localName;
  readonly attribute DOMString tagName;

           attribute DOMString id;
           attribute DOMString className;
...

Either when an element is created that has an id attribute whose value is not the empty string or when an element's id attribute is set to a value other than the empty string, set the element's ID to the new value.

When an element's id attribute is removed or set to the empty string, unset the element's ID.

---

Some IDL attributes are defined to reflect a particular content attribute of a given name. This means that on getting, these steps must be run:

1. Get an attribute for the context object using content attribute's name and let value be the result.

2. If value is null, return the empty string.

3. Return value.

On setting, set an attribute for the context object using the name of the attribute and the given value.

The id attribute must reflect the "id" content attribute.

Answer 1

I'm curious if there is a practical reason behind the javascript element.id behavior.

See Element.id

The Element.id property represents the element's identifier, reflecting the id global attribute.

---

If the spec was to return null or undefined

3.2.5.1 The id attribute

Identifiers are opaque strings. Particular meanings should not be derived from the value of the id attribute.

Note There are no other restrictions on what form an ID can take; in particular, IDs can consist of just digits, start with a digit, start with an underscore, consist of just punctuation, etc.

Note An element's unique identifier can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS.

---

It's funny how the result is kind of opposite of the intent. Because I want to avoid calling a separate method to check for the existence of id

To substituting $.map() for .map() , Array.prototype.filter() with parameter Boolean for .get() to return id that is not empty string

var allIds = $.map($("input"), function(el) {
               return el.id
             }).filter(Boolean);

jsfiddle https://jsfiddle.net/gqvfuzqr/