JavaScript通過元素id和name直接獲取元素的方法

概覽：

偶然的機會，我在JavaScript中直接用HTML元素的id屬性來獲取該元素，並設置該元素的其他屬性值，竟然能夠正確解析不報錯！於是我去查閱相關資料，也有其他同行這麼用。

雖然說這種用法不是標准用法，推薦使用 document.getElementById(id);document.getElementByName(name); ，但也是一種新發現，先記錄下來，以備後用。

本文講述了JavaScript通過元素id和name直接獲取元素的方法，以及自己在實踐過程中總結的注意事項。

具體分析如下：

我們知道一些第三方的js庫對如何快速選取html中的元素做了一些簡化，貌似十分高深莫測，其實也不然。而且js本身自帶了對於特殊元素的簡便選取的方法，下面就為大家簡單介紹下。

在html中，一般最直接的辨別html元素使用的是name和id屬性，兩者有著細微的不同：id必須頁面唯一，但name可以有重復。

在js中如果id名稱不和內置屬性或全局變量重名的話，該名稱自動成為window對象的屬性，而在一個html頁面中的最頂層環境中有: this === window .

所以如果我們寫一個如下的html元素代碼：

1 <input type="button" id="btn_ok" value="Ok" onclick="..." />

就可以這樣引用它：

1 //可以這樣引用
2 btn_ok.onclick = function(){};
3 //或者下面也是一樣的
4 window.btn_ok.style = ...;

對於name屬性來說，只有某些類型的html元素具有類似的方法，比如：form,img,iframe,applet,embed,object等。在這些元素中可以通過全局變量或者document的屬性來訪問特定name屬性的元素；如果相同name屬性的有多個元素，則返回一個NodeList的類似只讀數組的對象,例如如下代碼:

1 <div>
2   <img name="pic" src="#" alt="pic_0" />
3   <img name="pic" src="#" alt="pic_1" />
4   <img name="pic" src="#" alt="pic_2" />
5 </div>

我們可以這樣引用name為pic的元素：

1 //我們可以這樣引用name為pic的元素：
2 for(x in pic)
3  console.log(pic[x].alt);
4 //或者是非"標准"語法each語句方式
5 for each(img in pic)
6  console.log(img.alt);

其他同行的觀點：
①這個最初是 IE 裡面的，後來 firefox chrome 好像也支持了。不建議使用，這個不是標准裡面的，將來不一定支持。

②可以直接這樣寫的id.style.display="inline"；使用id相當於直接成為了window對象的屬性，使用window.id可以獲取，但是不推薦這種寫法，還是用getElementById或者querySelector好。

③getElementById getElementByTagName等方法都是DOM Core的組成部分，並不專屬於js，支持DOM的任何一種程序設計語言都支持他們，比如XML編寫出來的文檔。還有HTML-DOM,比如onclick屬性,他們在DOM Core出現很久之前就為人們所熟悉了。你舉的這個例子就是屬於HTML-DOM，比如，我們可以把下面的語句：document.getElementById('form')簡化為 document.form，類似的element.getAttribute('src')簡化為element.src.HTML-DOM通常更短，但是只能用來處理web文檔。

我在實踐過程中發現的問題：

①在HTML元素屬性如onclick的JavaScript中直接用id獲取元素沒有問題；

②在<script></script>內的JavaScript中直接使用id獲取元素：如果被引用HTML元素在form窗體標記內，解析用id獲取的元素時報異常undefined；如果被引用HTML元素不在form窗體標記內，則解析沒有問題。