相关疑难解决方法(0)

正如任何经验丰富的JavaScript开发人员所知,有很多(太多)方法可以做同样的事情.例如,假设您有一个文本字段,如下所示:

<form name="myForm">  
    <input type="text" name="foo" id="foo" />

在JavaScript中有很多方法可以访问它:

[1]  document.forms[0].elements[0];
[2]  document.myForm.foo;
[3]  document.getElementById('foo');
[4]  document.getElementById('myForm').foo;
     ... and so on ...

方法[1]和[3]在Mozilla Gecko文档中有详细记载,但都不是理想的.[1]过于笼统而无用,[3]同时需要id和名称(假设您将数据发布到服务器端语言).理想情况下,最好只有一个id属性或一个name属性(两者都有点多余,特别是如果id不是任何css所必需的,并且增加了拼写错误的可能性等).

[2]似乎是最直观的,它似乎被广泛使用,但我没有看到它在Gecko文档中引用,我担心向前兼容性和跨浏览器兼容性(当然我想成为尽可能符合标准).

那么这里最好的做法是什么？任何人都可以指出DOM文档或W3C规范中可以解决此问题的内容吗？

注意我对非库解决方案(jQuery/Prototype)特别感兴趣.

我有两个几乎相同的简单JS小提琴调用选择更改的函数.在这两种情况下,函数名称与选择ID相同,但由于某种原因,第一个小提琴工作正常,第二个失败,出现JavaScript错误is not a function:

http://jsfiddle.net/AZkfy/7/ - 在FF9(Linux),Chromium 16(Linux),IE8(Windows)中运行良好:

<script>
    function border(border) { alert(border); }
</script>

<select id='border' name='border' onchange='border(this.value)'>
    <option value='foo'>foo</option>
    <option value='bar'>bar</option>
</select>

和

http://jsfiddle.net/cYVzk/ - 在FF9(Linux),Chromium 16(Linux),IE8(Windows)中失败:

<script>
    function border(border) { alert(border); }
</script>

<form>
<select id='border' name='border' onchange='border(this.value)'>
    <option value='foo'>foo</option>
    <option value='bar'>bar</option>
</select>
</form>

首先,我不明白为什么第一个工作正常,第二个工作失败.

第二 - 有关于冲突的JS函数名称和元素ID的JS规范或限制吗？

如果我有一个<div id='a'>Chrome浏览器,那么在javascript中我可以做(就好像是一个全局变量).a.stuff()a

然而,这不适用于FireFox - 我将需要使用document.getElementById('a').

这里的正确行为是什么？(根据W3规格)

另外我感兴趣的是,如果我有一个id为div a但a在我的脚本中也有一个全局变量,Chrome将如何解决这种歧义.这种行为是随机的还是笨拙的？

如何将一个id由连字符(" - "),冒号(":")和句点(".")组成的元素进行翻译(好吧我知道它们可以被访问document.getElementById但浏览器将如何将其转换为表示它们的全局变量)