named form element lookup, part 1. This actually works, but is kinda …

…ugly. Part 2 will have more tests and be less hacky

src/html/element.js

@@ -167,24 +167,59 @@ __extend__(HTMLElement.prototype, {
     /**
      * Named Element Support
      */
+
+    /**
+     * Not all children of a form are named elements
+     * returns the parent form element or null if
+     * there is no parent form or if not a named element
+     */
+    _isFormNamedElement: function(node) {
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            switch (node.nodeName.toLowerCase()) {
+            case 'button':
+            case 'fieldset':
+            case 'input':
+            case 'keygen':
+            case 'select':
+            case 'output':
+            case 'select':
+            case 'textarea':
+                return true;
+            }
+        }
+        return false;
+    },
+    _updateFormForNamedElement: function() {
+        if (this._isFormNamedElement(this)) {
+            if (this.form) {
+                // to check for ID or NAME attribute too
+                // not, then nothing to do
+                this.form._updateElements();
+            }
+        }
+    },
     setAttribute: function(name, value) {
         var result = Element.prototype.setAttribute.apply(this, arguments);
         this.ownerDocument._addNamedMap(this);
+        this._updateFormForNamedElement();
         return result;
     },
     setAttributeNS: function(namespaceURI, name, value) {
         var result = Element.prototype.setAttributeNS.apply(this, arguments);
         this.ownerDocument._addNamedMap(this);
+        this._updateFormForNamedElement();
         return result;
     },
     setAttributeNode: function(newnode) {
         var result = Element.prototype.setAttributeNode.apply(this, arguments);
         this.ownerDocument._addNamedMap(this);
+        this._updateFormForNamedElement();
         return result;
     },
     setAttributeNodeNS: function(newnode) {
         var result = Element.prototype.setAttributeNodeNS.apply(this, arguments);
         this.ownerDocument._addNamedMap(this);
+        this._updateFormForNamedElement();
         return result;
     },
     removeAttribute: function(name) {
@@ -206,6 +241,7 @@ __extend__(HTMLElement.prototype, {
     importNode: function(othernode, deep) {
         var newnode = Element.prototype.importNode.apply(this, arguments);
         this.ownerDocument._addNamedMap(newnode);
+        this._updateFormForNamedElement(newnode);
         return newnode;
     },
 
@@ -214,6 +250,7 @@ __extend__(HTMLElement.prototype, {
         var newnode = Element.prototype.replaceNode.apply(this, arguments);
         this.ownerDocument._removeNamedMap(oldchild);
         this.ownerDocument._addNamedMap(newnode);
+        this._updateFormForNamedElement(newnode);
         return newnode;
     }
 });

src/html/form.js

@@ -6,6 +6,7 @@
  */
 HTMLFormElement = function(ownerDocument){
     HTMLElement.apply(this, arguments);
+
     //TODO: on __elementPopped__ from the parser
     //      we need to determine all the forms default
     //      values
@@ -25,20 +26,12 @@ __extend__(HTMLFormElement.prototype,{
         this.setAttribute('action', action);
     },
 
-    // returns HTMLFormControlsCollection
-    // http://dev.w3.org/html5/spec/Overview.html#dom-form-elements
-    get elements() {
-        return this.getElementsByTagName("*");
-    },
     get enctype() {
         return this.getAttribute('enctype');
     },
     set enctype(enctype) {
         this.setAttribute('enctype', enctype);
     },
-    get length() {
-        return this.elements.length;
-    },
     get method() {
         return this.getAttribute('method');
     },
@@ -57,6 +50,44 @@ __extend__(HTMLFormElement.prototype,{
     set target(val) {
         return this.setAttribute("target",val);
     },
+
+    /**
+     * "Named Elements"
+     *
+     */
+    /**
+     * returns HTMLFormControlsCollection
+     * http://dev.w3.org/html5/spec/Overview.html#dom-form-elements
+     *
+     * button fieldset input keygen object output select textarea
+     */
+    get elements() {
+        var nodes = this.getElementsByTagName('*');
+        var alist = [];
+        var i;
+        for (i = 0; i < nodes.length; ++i) {
+            if (HTMLFormElement.prototype._isFormNamedElement(nodes[i])) {
+                alist.push(nodes[i]);
+                this[i] = nodes[i];
+                if ('name' in nodes[i]) {
+                    this[nodes[i].name] = nodes[i];
+                }
+            }
+        }
+        return new HTMLCollection(alist);
+    },
+    _updateElements: function() {
+        this.elements;
+    },
+    get length() {
+        return this.elements.length;
+    },
+    item: function(idx) {
+        return this.elements[idx];
+    },
+    namedItem: function(aname) {
+        return this.elements[aname];
+    },
     toString: function() {
         return '[object HTMLFormElement]';
     },

test/specs/window/spec.js

@@ -518,9 +518,7 @@ test('window.[atob|btoa]', function(){
 /**
  * Not sure where this goes, since it needs the parser
  */
-test('Named Element Lookup', function(){
-    //one of the easiest way to test the HTMLParser is using frames and
-    //writing the document directly
+test('Document Named Element Lookup', function(){
     expect(4);
     var iframe = document.createElement("iframe");
     var doc;
@@ -546,3 +544,39 @@ test('Named Element Lookup', function(){
     node2 = doc.foo;
     ok(! node2, 'old named element is gone');
 });
+
+test('Form Named Element Lookup', function(){
+    expect(7);
+    var iframe = document.createElement("iframe");
+    var doc;
+
+    document.body.appendChild(iframe);
+    doc = iframe.contentDocument;
+    doc.open();
+    doc.write('<html><head></head><body><form name="foo"><div></div></form></body></html>');
+    doc.close();
+
+    var form = doc.foo;
+    var elements = form.elements;
+    ok(elements instanceof HTMLCollection, "form.elements is an HTMLCollection");
+    equals(elements.length, 0, "form.elements does not include non-form elements");
+    equals(form.length, 0, "form.length is 0");
+
+
+    // ok now let's try to use innerHTML
+    var str = '<form name="bar"><input name="input1"/></form>';
+    doc.body.innerHTML = str;
+    form = doc.bar;
+    elements = doc.bar.elements;
+    equals(elements.length, 1);
+    equals(form.length, 1);
+    print('element is : ' + elements.input1);
+    ok(elements.input1 instanceof HTMLInputElement);
+    ok(form.input1 instanceof HTMLInputElement);
+
+    /*
+    // the other one should be zapped
+    node2 = doc.foo;
+    ok(! node2, 'old named element is gone');
+    */
+});