Safari Native Code

Question

Is anyone familiar with Native Code in OS X Safari (Version 3 and WebKit)? I'm using Javascript to parse some information in a form and one of my inputs is named "tags". When trying to get the value of that element using:

// button is being passed through a function as a DOM object
var tags = button.form.elements["tags"].value;

Safari returns some kind of function. I've gotten it to alert values like "function tags() { [native code] }" and Node Trees but I just can't understand why I would be having trouble. If anyone has a clue, please let me know. I've gotten it to work by changing the name of the input to something else and also by iterating through all elements and using if () statements to determine whether it's the element I want, but I'm awfully curious as to why Apple would restrict the use of any form element named "tags"...

P.S. - It's test and works fine in firefox.

Answer 1

[native code] just means that it's a function that is built in to the browser, rather than written in JavaScript. tags appears to be a WebKit extension to the DOM to allow you to get a list of elements in the form by tag name. For instance, if I run this on the StackOverflow page, I get the answer text area:

document.getElementById('submit-button').form.elements.tags("textarea")[0]

The issue is that an index into a collection in JavaScript also access any object properties (including methods), so when you try to access your named element tags, you get instead the method on the elements object that WebKit defines. Luckily, there is a workaround; you can call namedItem on the elements list to get an item by id or name:

var tags = button.form.elements.namedItem("tags").value;

edit: Note that its probably better to use namedItem in general even in other browsers, in case you need to retrieve an element named item or length or something like that; otherwise, if you use them as an index with the [] operator, you'll get the built in method item or length instead of your element.

• arlomedia: Interesting, I never had this problem in Safari but I just ran into it with IE9. Fortunately the same solution worked there.
• arlomedia: Oops, I found a pitfall with this. If you try to access a form element with multiple elements -- a set of checkboxes or radio buttons -- then namedItem will return an array of elements in Safari but only the first element in IE9 and Firefox 4 (the only versions I've checked so far). So if you're working with checkboxes or radio buttons, this is not a drop-in replacement for elements[], which always returns the array of elements.