Results 1 to 3 of 3

Thread: Best practices?: Modifying HTMLCollections in IE

  1. #1
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default Best practices?: Modifying HTMLCollections in IE

    I just ran into a very weird IE quirk, and I'm wondering what the best practice would be regarding it. (I've only tested in IE7; it might show up in other versions.)

    Before I had IE installed, I had to modify a form and then find my elements in it to modify them again, and the elements' names were the most convenient way to accomplish the second part. So of course I went for the form.elements collection, and this works fine in Firefox. But not only is this property actually the form itself in IE, the developers apparently didn't read this part of the spec:
    Quote Originally Posted by http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-1019015399
    Note: Collections in the HTML DOM are assumed to be live meaning that they are automatically updated when the underlying document is changed.
    To demonstrate what this means, I threw together a small test page (post continues below):
    Code:
    <html>
    	<head>
    		<title>IE DOM modifications</title>
    		<script type='text/javascript' 
            		src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
    		<script type="text/javascript">
    			window.onload = function(){
    				var form = document.forms.namedItem('test');
    				var input = document.createElement('input');
    				input.name = 'foo';
    				input.type = 'hidden';
    				input.value = 'bar';
    				form.appendChild(input);
    				console.log(form.childNodes[0]);
    //				form[input.name] = input;
    				console.log(form['foo']);
    				console.log(form.elements.namedItem('foo'));
    			};
    		</script>
    	</head>
    	<body>
    		<form name="test">
    			
    		</form>
    	</body>
    </html>
    If form[input.name] = input; (a very ugly hack) is commented, the first call to console.log works but the other two don't. Otherwise, the first two work but the last still doesn't.

    So here's my question: Is this the best way to workaround this quirk? The idea of form elements being direct properties of the form isn't in the standard, and the standard namedItem function remains broken. I managed to still use namedItem by default, but I really don't like the hack at all.

    Here's how I retrieved my element:
    Code:
    form.elements.namedItem(name) || form[name]
    Last edited by Jesdisciple; 07-09-2009 at 03:07 PM.
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    not sure if trhis is relavent but I use this X-Browser method of creating form elements

    Code:
    function zxcFormField(tag,nme,type){
     var el;
     try {
      el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
     }
     catch (e){
      el=document.createElement(tag);
      if (type) el.type=type;
      el.name=nme;
     }
     return el;
    }

  3. #3
    Join Date
    Jul 2006
    Posts
    497
    Thanks
    8
    Thanked 70 Times in 70 Posts

    Default

    Thanks for replying at least. But that code is run just a little bit earlier than where my problem occurs. I'm concerned with adding an existing element to a form and later retrieving it, while your function returns the element that might later be added.

    On a side note, I suggest that you get rid of the try...catch and only use the code in the current catch block. Creating attributes along with the tag is an IE extension to the standard; unless a browser-specific extension can be emulated in other browsers, web developers are best ignoring it until it has mainstream support (consensus among browsers or standardization).
    -- Chris
    informal JavaScript student of Douglas Crockford
    I like wikis - a lot.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •