document.getElementById和document.getElementsByName

id 就像身分证号,是唯一的, name 就像姓名一样可以同名

一个元素定义了 id ,引用该元素时直接用 id 属性,而 name 通常用在 form 中,且必须由 document.form.*** 而来,也就是说, name 属性定义的元素在脚本中是 document 对象的子对象。

name 用于 form 内元素,提交需要

id 用于 form 外元素好用因为 DOM 能直接取得单一元素



document.getElementById( "id_Number ") 得到的是单个元素

document.getElementsByName( "name ") 得到的是数组



id 每页只能有一个

name 可以有多个

name 有些标签不推荐用它

取得 id :document.getElementById( "idname ")

取得 name : document.getElementsByName( "name ")[0?1?2?3?....]



表单元素 (form input textarea select) 与框架元素 (iframe frame) 用 name

这些元素都与表单 ( 框架元素作用于 form 的 target) 提交有关 , 在表单的接收页面只

接收有 name 的元素 , 赋 ID 的元素通过表单是接收不到值的 , 你自己可以验证一下 .

有一个例外 : A 可以赋 name 作为锚点 , 也可以赋 ID ;



只能赋 ID 不能赋 name 的元素 :( 除去与表单相关的元素都只能赋 ID)

body li table tr td th p div span pre dl dt dd font b 等等。



几乎每个做过 Web 开发的人都问过,到底元素的 ID 和 Name 有什么区别阿?为什么有了 ID 还要有 Name 呢 ? 而同样我们也可以得到最 classical 的答案: ID 就像是一个人的身份证号码,而 Name 就像是他的名字, ID 显然是唯一的,而 Name 是可以重复的。



  上周我也遇到了 ID 和 Name 的问题,在页面里输入了一个 input type= "hidden " ,只写了一个 ID= 'SliceInfo ' ,赋值后 submit ,在后台用 Request.Params[ "SliceInfo "] 却怎么也去不到值。后来恍然大悟因该用 Name 来标示,于是在 input 里加了个 Name= 'SliceInfo ' ,就一切 ok 了。



  第一段里对于 ID 和 Name 的解答说的太笼统了,当然那个解释对于 ID 来说是完全对的,它就是 Client 端 HTML 元素的 Identity 。而 Name 其实要复杂的多,因为 Name 有很多种的用途,所以它并不能完全由 ID 来代替,从而将其取消掉。



  具体用途有:



  用途 1: 作为可与服务器交互数据的 HTML 元素的服务器端的标示,比如 input 、 select 、 textarea 、和 button 等。我们可以在服务器端根据其 Name 通过 Request.Params 取得元素提交的值。

  用途 2: HTML 元素 Input type= 'radio ' 分组,我们知道 radio button 控件在同一个分组类, check 操作是 mutex 的,同一时间只能选中一个 radio ,这个分组就是根据相同的 Name 属性来实现的。



  用途 3: 建立页面中的锚点,我们知道 <a href= "URL "> link </a> 是获得一个页面超级链接,如果不用 href 属性,而改用 Name ,如: <a name= "PageBottom "> </a> ,我们就获得了一个页面锚点。



  用途 4: 作为对象的 Identity ,如 Applet 、 Object 、 Embed 等元素。比如在 Applet 对象实例中,我们将使用其 Name 来引用该对象。



  用途 5: 在 IMG 元素和 MAP 元素之间关联的时候,如果要定义 IMG 的热点区域,需要使用其属性 usemap ,使 usemap= "#name "( 被关联的 MAP 元素的 Name) 。



  用途 6: 某些特定元素的属性,如 attribute ,和 param 。例如为 Object 定义参数 <PARAM NAME = "appletParameter " VALUE = "value "> 。



  显然这些用途都不是能简单的使用 ID 来代替掉的,所以 HTML 元素的 ID 和 Name 的却别并不是身份证号码和姓名这样的区别,它们更本就是不同作用的东西。



  当然 HTML 元素的 Name 属性在页面中也可以起那么一点 ID 的作用,因为在 DHTML 对象树中,我们可以使用 document.getElementsByName 来获取一个包含页面中所有指定 Name 元素的对象数组。



  在这里顺便说一下,要是页面中有 n(n> 1) 个 HTML 元素的 ID 都相同了怎么办?在 DHTML 对象中怎么引用他们呢?如果我们使用 ASPX 页面,这样的情况是不容易发生的,因为 aspnet 进程在处理 aspx 页面时根本就不允许有 ID 非唯一,这是页面会被抛出异常而不能被正常的 render 。要是不是动态页面,我们硬要让 ID 重复那 IE 怎么搞呢?



  这个时候我们还是可以继续使用 document.getElementById 获取对象,只不过我们只能获取 ID 重复的那些对象中在 HTML Render 时第一个出现的对象。而这时重复的 ID 会在引用时自动变成一个数组, ID 重复的元素按 Render 的顺序依次存在于数组中。

document.getElementById 与 document.all区别?


document.all 是微软的东西,只被IE支持

document.getElementById 是公共标准,被目前的所有主流浏览器支持

document.getElementById ,document.all,在IE和 Firefox下 区别 在IE和 Firefox下 区别 具体测试代码

IE 下用 document.getElementById document.all都是可以的

但在Firefox下只能用document.getElementById,另外 innerText innerHTML 可以在IE下通过
但innerText在Firefox下是不起作用的 测试 发现

document.all是IE下面的document属下的所有元素的集合
可以通过document.all.length来看到document下面的元素数量
document.all(index)后面的index参数是一个集合方法

如果index是string那么可以获得document下面具有id或name为index的元素如果只有一个的元素话返回这个元素如果有多个元素id或name是index的话就返回一个集合如果没有的话就返回null
这样并不好因为当你不知道有多少个id或name是index的元素时就比较容易出错.
如果index是数字的话 那么会返回以0为基础的文档中第index个元素. 元素的文档序列可以通过Element.sourceIndex来获取

document.getElementById(name) 只返回第一个具有id或name为name的元素所以不是null就是一个元素 而不会返回集合这样就大大减少了错误发生的可能性

如果需要返回一个id或name为name的元素集合的话就要用 document.getElementsByName(name)来获取

另外document.all只有IE支持 其他浏览器并不支持而document.getElementById 和document.getElementsByName是任何浏览器都支持的

document.getElementById
返回 ID 属性值与指定值相同的第一个对象,如果 ID 属于一个集合,getElementById 方法返回集合中的第一个对象。

document.all
如果 ID 属于一个集合,document.all返回一个集合。而且只支持IE。

所以在使用IE的前提下,document.all(index)要生效需要保证index是唯一的

所以如果你想让你写的js脚本在目前的大多浏览器中使用,需要使用[公共标准] 标准的Javascript

document.getElementById 与 document.getElementsByName 的区别:

id是唯一的

name 可以有重复
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
document.getElementsByName***元素集合。与之相比,document.getElementById()是另一种DOM方法,用于通过元素的id属性值获取唯一匹配的元素。 这两种方法的不同之处在于,document.getElementsByName()返回的是一个元素集合(可能包含多个元素),而document.getElementById()返回的是一个单独的元素。 在IE浏览器中,它们对于id和name的区分并不严格。也就是说,document.getElementsByName()方法在IE中也可以通过id属性值进行匹配。这是因为在IE中,元素的id属性值在DOM中也会被当作name属性值来处理。 因此,如果在IE中使用document.getElementsByName()方法并传递一个id属性值作为参数,它将返回与该id属性值匹配的元素集合,而不仅仅是根据name属性值匹配的元素集合。 请注意,这种行为可能会导致一些混淆和不一致性,因此建议在编写代码时避免在IE中使用document.getElementsByName()方法来通过id属性值获取元素。相反,应该使用document.getElementById()方法来获取唯一匹配的元素。 总结起来,document.getElementsByName()方法用于通过元素的name属性值获取匹配的元素集合,而document.getElementById()方法用于通过元素的id属性值获取唯一匹配的元素。在IE浏览器中,document.getElementsByName()方法也可以通过id属性值进行匹配,但这种行为并不被建议使用。<span class="em">1</span> #### 引用[.reference_title] - *1* [document.getElementsByNamedocument.getElementById 在IE与FF中不同实现](https://download.csdn.net/download/weixin_38609571/14005650)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值