DOM Selection and Manipulation

## What you actually get back DOM collections are defined by the DOM specification, not by ECMAScript. They are objects whose prototype chain is `NodeList.prototype` → `Object.prototype`; `Array.prototype` appears nowhere in it. That single fact explains every symptom: ```js const items = document.querySelectorAll('li'); typeof items; // "object" Array.isArray(items); // false items.length; // a number items[0]; // the first element items.map; // undefined -> calling it throws a TypeError ``` ## "Array-like" is a shape, not a type An object is *array-like* when it has a non-negative integer `length` and properties at integer keys. That is a duck-typing convention, not an interface you implement. Array-like objects support `for` loops, index access, and `length`, and that is all they are guaranteed to support. The built-in array methods work on array-like receivers by design — they read `length` and index into `this` — which is why the `.call` trick works even though the collection is not an array: ```js Array.prototype.map.call(items, el => el.textContent); ``` ## Why NodeList has forEach but not map `NodeList` is declared in the DOM spec as `iterable<Node>`. That declaration is what gives it, automatically, exactly five things: `forEach`, `entries`, `keys`, `values`, and the `Symbol.iterator` method that makes `for...of` and spread work. It does not pull in the rest of the array surface, because those methods return *new arrays* and a DOM collection is not in the business of constructing arrays. So the asymmetry that looks arbitrary — `forEach` yes, `map` no — is a direct consequence of one line of interface definition. `HTMLCollection`, returned by `getElementsByClassName`, `getElementsByTagName`, `element.children`, `document.forms` and `document.images`, is not declared iterable. It gets `length`, `item(index)` and `namedItem(name)` and nothing else, so it has no `forEach` either. Because it exposes indexed properties it still gets a default iterator, which is why spread and `for...of` work on it even though method-style iteration does not: ```js const kids = document.body.children; // HTMLCollection typeof kids.forEach; // "undefined" [...kids].length === kids.length; // true — spreading works ``` ## Converting, and which conversion to use All three of these produce a genuine `Array` whose elements are *the same element objects* — nothing is cloned, and mutating an element through the array mutates the live document node: ```js const a = Array.from(items); const b = [...items]; const c = Array.prototype.slice.call(items); // the pre-ES2015 idiom ``` `Array.from` has one capability the others lack: a second argument that maps as it converts, avoiding an intermediate array. ```js const texts = Array.from(items, el => el.textContent); ``` Spread reads a little cleaner in expressions; `Array.from` is the more explicit choice and is the only one that also handles plain array-like objects with no iterator at all (an object with just `length` and index keys). That last difference is the one people trip over: `[...obj]` throws for a non-iterable array-like, while `Array.from(obj)` works. What does *not* work is `Object.values` on the idea that it will "just give you the elements" (it returns index-keyed values in a way that is easy to get wrong across collection types), and `JSON.stringify` round-tripping (element objects do not survive serialization). ## Practical shape of the code The habit worth forming is: convert at the boundary, then stay in array land. ```js const visible = [...document.querySelectorAll('.row')] .filter(el => !el.hidden) .map(el => el.dataset.id); ``` If all you need is a single pass with no return value, `items.forEach(...)` is fine and saves the allocation — but the moment you want `filter`, `map`, `reduce`, `some`, `sort` or `slice`, convert first rather than reaching for `Array.prototype.<method>.call`, which is harder to read and no faster in any way that matters. ## The error message you will actually see It is worth recognising on sight: `TypeError: items.map is not a function`. In the DOM context that message almost always means "this is a collection, not an array", and the fix is a conversion, not a different selector.