歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> JavaScript通過元素id和name直接獲取元素的方法

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

日期:2017/3/1 9:08:39   编辑:Linux編程

概覽:

偶然的機會,我在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窗體標記內,則解析沒有問題。

Copyright © Linux教程網 All Rights Reserved