Form controls, for example, can be accessed by their “name” through property access of <form> element… What happens if we try to access an element whose name matches a function or property of the form?
- <input type="text" name="submit" value="Submit!">
- <input type="text" name="style">
- document.forms.submit; // "[object HTMLInputElement]"
- document.forms.style; // "[object HTMLInputElement]"
Just like that, having 2 simple elements with somewhat unfortunate names, we end up not being able to use a very crucial “submit” method, and a not less useful “style” property.
Juriy goes on to demonstrate an even “creepier” example, and then makes his announcement:
This is why I created a simple test suite to catch the offenders. It’s called DOMLint and is powered by a wonderful YQL. It is also hosted on github.
You give DOMLint a URL, and it delivers to you a report on these potential conflicts.
Thanks very much, Juriy!