Fix handling of Array-like DOM objects

Author: cdoublev

lib/match/selector.js

@@ -159,7 +159,61 @@ function isHTMLDocument(document) {
     return document.contentType === 'text/html'
 }
 
-// Element utilities
+/**
+ * @param {DOMTokenList|HTMLCollection|HTMLSelectElement|NamedNodeMap|NodeList} list
+ * @param {function} predicate
+ * @returns {boolean}
+ */
+function every(list, predicate) {
+    for (let index = 0; index < list.length; index++) {
+        if (!predicate(list.item(index))) {
+            return false
+        }
+    }
+    return true
+}
+
+/**
+ * @param {DOMTokenList|HTMLCollection|HTMLSelectElement|NamedNodeMap|NodeList} list
+ * @param {function} predicate
+ * @returns {*[]}
+ */
+function filter(list, predicate) {
+    const filtered = []
+    for (let index = 0; index < list.length; index++) {
+        const item = list.item(index)
+        if (predicate(item)) {
+            filtered.push(item)
+        }
+    }
+    return filtered
+}
+
+/**
+ * @param {DOMTokenList|HTMLCollection|HTMLSelectElement|NamedNodeMap|NodeList} list
+ * @param {function} predicate
+ * @returns {*}
+ */
+function find(list, predicate) {
+    for (let index = 0; index < list.length; index++) {
+        const item = list.item(index)
+        if (predicate(item)) {
+            return item
+        }
+    }
+}
+
+/**
+ * @param {DOMTokenList|HTMLCollection|HTMLSelectElement|NamedNodeMap|NodeList} list
+ * @param {function} predicate
+ * @returns {boolean}
+ */
+function some(list, predicate) {
+    return !!find(list, predicate)
+}
+
+
+// Pseudo-element matching utilities
 
 /**
  * @param {ElementImpl} meter
@@ -408,7 +462,7 @@ function isDefault(element) {
     if (isOfType(element, 'option')) {
         return element.hasAttribute('selected')
     }
-    return element === element.form?.elements.find(isSubmitButton)
+    return element.form && element === find(element.form.elements, isSubmitButton)
 }
 
 /**
@@ -592,7 +646,7 @@ function isIndeterminate(element) {
             return indeterminate
         }
         if (type === 'radio' && name) {
-            const group = form.elements.filter(control => control.type === 'radio' && name === control.name)
+            const group = filter(form.elements, control => control.type === 'radio' && name === control.name)
             return 1 < group.length && group.every(control => !control.checked)
         }
     }
@@ -607,7 +661,7 @@ function isIndeterminate(element) {
  */
 function isInvalid(element) {
     if (isOfType(element, 'form', 'fieldset')) {
-        return element.elements.some(element => isCandidateForConstraintValidation(element) && isInvalid(element))
+        return some(element.elements, element => isCandidateForConstraintValidation(element) && isInvalid(element))
     }
     return isCandidateForConstraintValidation(element) && !element.validity.valid
 }
@@ -948,11 +1002,14 @@ function isUnchecked(element) {
  */
 function isValid(element) {
     if (isOfType(element, 'form', 'fieldset')) {
-        return element.elements.every(element => !isCandidateForConstraintValidation(element) || isValid(element))
+        return every(element.elements, element => !isCandidateForConstraintValidation(element) || isValid(element))
     }
     return isCandidateForConstraintValidation(element) && element.validity.valid
 }
 
+
+// Tree traversal utilities
+
 /**
  * @param {ElementImpl} element
  * @param {boolean} first
@@ -1318,7 +1375,8 @@ function matchAttributeNameSelector(element, selector, { namespaces = new Map })
         name = toLowerCase(name)
     }
     if (prefix === '*') {
-        for (const attribute of element.attributes) {
+        for (let index = 0; index < element.attributes.length; index++) {
+            const attribute = element.attributes.item(index)
             if (attribute.localName === name) {
                 return attribute
             }

test/dom.js

@@ -75,10 +75,10 @@ export class DOMTokenList {
 export class HTMLCollection {
 
     /**
-     * @param {NodeList} list
+     * @param {NodeList} [list]
      */
-    constructor(list) {
-        this._list = list._list
+    constructor(list = []) {
+        this._list = list
     }
 
     /**
@@ -97,6 +97,31 @@ export class HTMLCollection {
     }
 }
 
+export class NamedNodeMap {
+
+    /**
+     * @param {NodeList} [list]
+     */
+    constructor(list = []) {
+        this._list = list
+    }
+
+    /**
+     * @param {number} index
+     * @returns {Element|null}
+     */
+    item(index) {
+        return this._list[index]
+    }
+
+    /**
+     * @returns {number}
+     */
+    get length() {
+        return this._list.length
+    }
+}
+
 export class NodeList {
 
     /**
@@ -248,7 +273,7 @@ export class Document extends Node {
         globalThis.document = this
 
         this.activeViewTransition = activeViewTransition
-        this.children = new HTMLCollection(this.childNodes)
+        this.children = new HTMLCollection(this.childNodes._list)
         this.location = new URL(url)
         this.URL = url
 
@@ -290,7 +315,7 @@ export class DocumentFragment extends Node {
      */
     constructor(properties) {
         super(properties)
-        this.children = new HTMLCollection(this.childNodes)
+        this.children = new HTMLCollection(this.childNodes._list)
     }
 
     /**
@@ -350,17 +375,17 @@ export class Element extends Node {
             selectors = [],
         } = properties
 
-        this.attributes = attributes.map(({ localName, namespaceURI = null, value = '' }) =>
-            ({ localName, namespaceURI, ownerElement: this, value }))
-        this.children = new HTMLCollection(this.childNodes)
+        this.attributes = new NamedNodeMap(attributes.map(({ localName, namespaceURI = null, value = '' }) =>
+            ({ localName, namespaceURI, ownerElement: this, value })))
+        this.children = new HTMLCollection(this.childNodes._list)
         this.classList = new DOMTokenList(this.getAttribute('class')?.split(' '))
         this.indeterminate = indeterminate
         this.isContentEditable = isContentEditable
         this.localName = localName
 
         this.form = form
-        form?.elements.push(this)
-        fieldSet?.elements.push(this)
+        form?.elements._list.push(this)
+        fieldSet?.elements._list.push(this)
         this.name = this.getAttribute('name') ?? ''
         this.required = !!this.getAttributeNode('required')
         this.slot = this.getAttribute('slot') ?? ''
@@ -418,7 +443,7 @@ export class Element extends Node {
      * @returns {object|null}
      */
     getAttributeNodeNS(namespace, name) {
-        return this.attributes.find(attribute => attribute.localName === name && attribute.namespaceURI === namespace) ?? null
+        return this.attributes._list.find(attribute => attribute.localName === name && attribute.namespaceURI === namespace) ?? null
     }
 
     /**
@@ -460,7 +485,7 @@ export class Element extends Node {
         if (node) {
             node.value = value
         } else {
-            this.attributes.push({ localName: name, namespaceURI: null, ownerElement: this, value })
+            this.attributes._list.push({ localName: name, namespaceURI: null, ownerElement: this, value })
         }
     }
 
@@ -579,13 +604,13 @@ export class HTMLDialogElement extends HTMLElement { localName = 'dialog' }
 export class HTMLDivElement extends HTMLElement { localName = 'div' }
 
 export class HTMLFieldSetElement extends HTMLElement {
-    elements = []
+    elements = new HTMLCollection
     localName = 'fieldset'
     type = 'fieldset'
 }
 
 export class HTMLFormElement extends HTMLElement {
-    elements = []
+    elements = new HTMLCollection
     localName = 'form'
 }
 

test/match.js

@@ -370,10 +370,12 @@ describe('selector', () => {
      * @returns {string}
      */
     function serializeElement({ attributes, localName }) {
-        return `${attributes.reduce(
-            (string, { localName, value }) =>
-                string += ` ${value ? `${localName}="${value}"` : localName}`,
-            `<${localName.toLowerCase()}`)}>`
+        let string = `<${localName.toLowerCase()}`
+        for (let index = 0; index < attributes.length; index++) {
+            string += ` ${value ? `${localName}="${value}"` : localName}`
+        }
+        string += '>'
+        return string
     }
 
     class CSSAssert extends Assert {