getElementById Vs getElementsByName(Javascript)细说HTML元素的ID和Name属性的区别

getElementById Vs getElementsByName(Javascript)细说HTML元素的ID和Name属性的区别
ID(getElementById) Vs Name(getElementsByName)
　　几乎每个做过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:  建立页面中的锚点，我们知道link是获得一个页面超级链接，如果不用href属性，而改用Name，如：，我们就获得了一个页面锚点。

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

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

　　用途6:  某些特定元素的属性，如attribute，和param。例如为Object定义参数。

　　显然这些用途都不是能简单的使用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的顺序依次存在于数组中。

getElementById 與 getElementsByName

最近為了讓網頁在 IE 與 Firefox都可以正常執行,
所以改了許多javascript,
其中,Firefox最常出現的就是getElementById的問題,
在IE中,之前是習慣在驗證表單的時候直接使用form的名稱去取得下面的表單元件,
例如 :

if (frm.tbxuid.value = ""){
alert("請輸入帳號");
}

但是,這樣的語法在firefox是不能跑的,
所以需要改用getElementById去取得物件,
可是,要使用getElementById的前提是表單的物件都需要有id的屬性內容,
偏偏,之前沒有加ID的習慣…
後來硬是將許多物件都加上了ID後發現…radio跟checkbox有問題…
因為radio跟checkbox的name都是一樣的,
但是id不能設定都是一樣的,(參考網址 : 細說HTML元素的ID和Name屬性的區別)
所以,radio跟checkbox要用getElementsByName來抓,
在使用getElementById時我是想說應該有ByName的但是測試了getElementByName,
發覺沒有用…後來看了上面那篇文章才發現原來是少了個s (getElementByName 應該為 getElementsByName),
後來還試了一下看看用getElementsByName抓不抓的到text或是areatext等資料,
結果發現是抓不到的,所以還是硬著頭皮將表元件一個一個檢查了…

所以像上面的程式就要改成

if (document.getElementById('tbxuid').value = ""){
alert("請輸入帳號");
}

要讓所有的瀏覽器都可瀏覽還真是不容易啊…除非網頁的內容很單純…. 

url:http://www.ad0.cn/netfetch/article.asp?id=375

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=1851892