`

getElementsByName 和 getElementById 方法在IE 和Google FF浏览器区别

阅读更多
今天在测试的时候发现getElementsByName在IE中好使,在google中不好使,后面发现传入的值是节点的ID,后面查询资料发现如下:
对于ID & Name 按最经典的解释的:“ID 就如同我们的身份证,Name就如同我们的名字”,也就是说,在一个html文档中ID是唯一的,但是Name是可以重复的,就象我们的人名可以重复但是身份证确实全中国唯一的(PS:据说有重复的^_^)
但是对于document.getElementsByName 与document.getElementById 这个两个方法,IE中是并没有严格区分 ID 与 Name 的,比如:
<script type="text/javascript">
function useGetElementsByNameWithId(id) {
var eles = document.getElementsByName('ID_A');
var msg = '使用 getElementsByName 传入 ID:得到:'
if(eles.length > 0) {
msg += " Name " + eles[0].id;
}
alert(msg);
}
function usegetElementByIdWithName(name) {
var ele = document.getElementById(name);
var msg = '使用 getElementById 传入 Name 得到:';
if(ele) {
msg += " ID " + ele.id;
}
alert(msg);
}
</script><input id="ID_A" name="Name_A" type="button" value="使用 getElementsByName 传入 ID" onclick="useGetElementsByNameWithId(this.id)" />
<input id="ID_B" name="Name_B" type="button" value="使用 getElementsByName 传入 Name" onclick="usegetElementByIdWithName(this.name)" />IE中通过 getId 传入 name 同样可以访问到目标元素,而通过 getName 传入 Id 也可以访问到目标元素。
MSDN中对两个方法的解释:
getElementById Method
--------------------------------------------------------------------------------
Returns a reference to the first object with the specified value of the ID attribute.
Remarks
When you use the getElementsByName method, all elements in the document that have the specified NAME or ID attribute value are returned.
Elements that support both the NAME and the ID attribute are included in the collection returned by the getElementsByName method, but not elements with a NAME expando.
MSDN确实对 getElementsByName 方法做了说明:“具有指定 Name 或者 ID 属性的元素都会返回”,但是
getElementById 方法却没有说明,然而内部实现同 getElementsByName 是一样的。
而对于Google,看来更忠实W3C标准,上面的测试代码是没有办法返回目标元素的。
分享到:
评论

相关推荐

    HTML在IE浏览器和FF浏览器中标签的使用

    在网页开发过程中,HTML元素的渲染和交互在不同的浏览器间可能存在差异,尤其是Internet Explorer (IE)和Firefox (FF)之间。这些差异主要源于浏览器对HTML、CSS和JavaScript标准的实现不同。以下是一些常见的问题及...

    document.getElementsByName和document.getElementById 在IE与FF中不同实现

    总结起来,`document.getElementsByName`在IE和FF中的差异在于IE允许用ID匹配,而FF只匹配name属性。同样,`document.getElementById`在两者中都遵循W3C标准,仅根据ID查找元素。开发者在编写跨浏览器的JavaScript...

    IE与FF脚本兼容性问题

    将 `document.formName.item("itemName")` 替换为 `document.formName.elements["itemName"]`,这样可以在IE和FF中都能正确获取表单元素。 **示例代码:** ```javascript // 错误用法 var element = document.form...

    让getElementsByName适应IE和firefox的方法

    通过上述方法,我们可以在不改变原有代码逻辑的基础上,实现`getElementsByName`在IE和Firefox等浏览器之间的兼容。这种方法不仅适用于`td`元素,还可以扩展到其他任何需要根据`name`属性查找的元素类型,只需在遍...

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById

    在HTML文档对象模型(DOM)中,有三种主要方法用于查找HTML元素:`document.all`,`getElementById()`,`getElementsByName()` 和 `getElementsByTagName()`。这些方法各有其特性和适用场景,理解它们的区别对于编写...

    innerHTML 和 getElementsByName 在IE下面的bug 的解决

    在处理innerHTML和getElementsByName在IE中的bug时,需要开发者对这些方法的特性有深入的了解,并且需要在不同浏览器之间进行测试,以确保兼容性。在旧版IE浏览器中,可能需要采取一些特定的补救措施,如上文所述的...

    js浏览器兼容手册OSOS.pdf

    JavaScript是Web开发中不可或缺的一部分,但在不同的...以上是JavaScript在IE和FF之间的一些主要兼容性问题及其解决策略。开发者在编写JavaScript代码时,应考虑到这些差异,确保代码在多种浏览器下都能正常工作。

    火狐和IE支持javaScript脚本的一些区别

    在事件处理方面,IE和Firefox有着明显的区别。IE中,可以通过`window.event`直接获取到事件对象,而在Firefox中,事件对象通常通过参数传递给事件处理函数。为了兼容两种浏览器,可以采用以下代码: ```javascript ...

    javascript在IE和Firefox中兼容性问题

    `getElementsByClassName`, `getElementsByTagName`, `getElementsByAttribute`等方法在IE和Firefox中实现不同。IE不支持`getElementsByClassName`,但Firefox支持。对于IE,可以使用`querySelectorAll`或自定义...

    浏览器兼容页面开发注意事项(javascript篇)_101028分享.pdf

    16. **document.getElementById和document.getElementsByName**:在处理多个同名元素时,`getElementsByName`在IE中会返回一个数组,而在其他浏览器中返回一个NodeList。 为了确保代码在各种浏览器中都能正常工作,...

    详解JavaScript 中getElementsByName在IE中的注意事项

    在IE10以上、Edge浏览器、Google Chrome和Firefox浏览器中,输出结果为0,因为这些浏览器遵循标准,仅返回name属性匹配的元素。 为了确保跨浏览器的兼容性,在使用getElementsByName方法时,应该避免使用相同的字符...

    document.all与getElementById、getElementsByName、getElementsByTagName用法区别-document.all第1/2页

    本文将深入探讨`document.all`与`getElementById`、`getElementsByName`、`getElementsByTagName`这四个方法的区别和用法。 1. `document.all` `document.all` 是一个数组集合,它包含了HTML文档中所有的元素,...

    javascript浏览器兼容手册

    - **IE** 中使用 `node.parentNode.removeChild(node)` 移除节点时,需要注意 FF 中的 `children` 和 `childNodes` 的区别。 8. **常量声明** - **IE**: 不支持 `const` 关键字,需要使用 `var`。 9. **body ...

    document.getElementsByName()的用法

    其中`document.getElementsByName()`与`document.getElementById()`是常用的两种方法,它们分别通过元素的`name`属性和`id`属性来选取元素。本文将详细介绍这两种方法的用法,并进行深入比较。 #### 一、document....

Global site tag (gtag.js) - Google Analytics