1. 程式人生 > >document.getElementById()方法使用

document.getElementById()方法使用

語法:oElement = document .getElementById ( sID )

引數:sID――必選項。字串 (String) 。

返回值:oElemen――物件 (Element) 。

說明:根據指定的 id 屬性值得到物件。返回 id 屬性值等於 sID 的第一個物件的引用。假如對應的為一組物件,則返回該組物件中的第一個。 如果無符合條件的物件,則返回 null 。

注意: document.getElementById(" ") 得到的是一個物件,用 alert 顯示得到的是“ object ”,而不是具體的值,它有 value 和 length 等屬性,加上 .value 得到的才是具體的值!

細節:

 document.getElementById 有時會抓 name 放過了 id ,據說是 IE 的一個 BUG ;頁面中有

        <inputtype="hidden" id="hello8" name="category_id"value="2" />

<selectid="category_id" onchange="al();">

一個是name="category_id" 一個是id="category_id",用document.getElementById取第二個,可是,取到的卻是第一個name=category_id,在IE中getElementById竟然不是先抓id而是先找name相同的物件。

兩個form,每個form有兩個textbox,兩個form中的textbox是相同的name,但id都不同,這樣在Firefox是沒問題的,但在IE卻只抓得到第一個出現的name資料
下面這段程式碼可以驗證這個結果
<HTML>
<HEAD>
<TITLE> getElementById </TITLE>
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function chkacc(){
alert(document.getElementById("tbxuid1").value);
alert(document.getElementById("tbxpwd1").value);
alert(document.getElementById("tbxuid").value);
alert(document.getElementById("tbxpwd").value);
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name="frm1">
<INPUT TYPE="text" NAME="tbxuid"id="tbxuid1">
<INPUT TYPE="text" NAME="tbxpwd"id="tbxpwd1">
</FORM>
<FORM METHOD=POST ACTION="" name="frm2">
<INPUT TYPE="text" NAME="tbxuid"id="tbxuid">
<INPUT TYPE="text" NAME="tbxpwd"id="tbxpwd">
<INPUT TYPE="button" value="檢查" name="btnchk" onclick="chkacc();">
</FORM>
</BODY>
</HTML >

② javascript中的getElementbyId使用 
網頁中的元素必須有id屬性,才能通過這個方法得到,比如<input type=textname="content" id="content">

獲取html標記主要有兩種方法,一種是通過ID值,一種是通過name屬性(name屬性主要用於form表單內的input標記。)

document.getElementById(" ") 得到的是一個物件,用 alert 顯示得到的是

“ object ”,而不是具體的值,它有 value 和 length 等屬性,加上 .value 得到的才

是具體的值!

參考資料:

1.document . getElementById 的用法和 DHTML.CHM 的下載地址

今天在網路上查詢 document . getElementById 的用法,如下:

A:     語法:

    oElement = document . getElementById ( sID )

     引數:

    sID   : 必選項。字串 (String) 。

     返回值:

    oElement   : 物件 (Element) 。

     說明:

     根據指定的 id 屬性值得到物件。返回 id 屬性值等於 sID 的第一個物件的引用。假如對應的為一組物件       ,則返回該組物件中的第一個。

     如果無符合條件的物件,則返回 null 。

B:有一個例子可以很好的說明:

  ****************************************************************************

  *                                                                          *

  *   這個函式中最關鍵的地方是 document.getElementById ,他是什麼呢?        *

  *                                                                          *

  *   關於document.getElementById ,是這樣的:                             *

  *                                                                    *

  *   如:document.getElementById('hdrPageHeader_lblTitle')              *

  *                                                                    *

  *   表示的意思是:獲取ID 為:hdrPageHeader_lblTitle 的物件                 *

  *                                                                          *

  * <a>aa</a>                             *

  * <a>bb</a>                              *

  * <a>cc</a>                             *

  * <scriptlanguage="javascript">                                     *

  *<!--                                                               *

  * var idtext=document.getElementById('hdrPageHeader_lblTitle')       *

  *alert(idtext.innerText)                                            *

  *//-->                                                              *

  *</script>                                                          *

C:另外還得到一個細節:

① document.getElementById 有時會抓 name 放過了 id ,據說是 IE 的一個 BUG ;

頁面中有

    <input type="hidden" value="2" />

         <select     >

一個是 一個是

用 document.getElementById 取第二個,可是,取到的卻是第一個 >

在 IE 中getElementById 竟然不是先抓id 而是先找name 相同的物件...

兩個 form, 每個 form 有兩個 textbox, 兩個 form 中的 textbox 是相同的 name, 但 id 都不同...

這樣在 Firefox 是沒問題的 ... 但在 IE 卻只抓得到第一個出現的 name 資料

2. document 物件

屬性: title ; bgColor ; url; ( 使用: document.title)

方法:

相關推薦

document.getElementById()方法使用

語法:oElement = document .getElementById ( sID ) 引數:sID――必選項。字串 (String) 。 返回值:oElemen――物件 (Element) 。 說明:根據指定的 id 屬性值得到物件。返回 id 屬性值等於 sID

Java呼叫Document.getElementById方法返回null的解決辦法

 Java中操作xml的函式Document.getElementById(String id),是通過指定的id來獲取對應的element。但是僅僅定義了正確的schema和對應的xml檔案是不夠的,返回值仍然是null。因為我們不僅要告訴xml檔案我們所用的schem

JS函數動作分層結構詳解及Document.getElementById 釋義 事件 函數 變量 script標簽 var function

src 分層 鼠標 靜態頁面 font 編寫 技術分享 對話 fun html +css 靜態頁面 js 動態 交互 原理: js就是修改樣式, 比如彈出一個對話框. 彈出的過程就是這個框由disable 變成display:enable. 又或者當鼠標指

$("#id")&&document.getElementById("id")

clas code log schema row .get amp nbsp aid $("#id")=document.getElementById("id") document.getElementById("schemaId").style.display="tab

HTML DOM getElementById() 方法

fun pre 最有 它的 cli scrip 通過 在操作 value 定義和用法 getElementById() 方法可返回對擁有指定 ID 的第一個對象的引用。 語法 document.getElementById(id) 說明 HTML DOM 定義了多種查找元素

通過GZ代替document.getElementById()

javascrip rip 通過 pos doc .get element brush turn /** * 作用:通過GZ代替document.getElementById(‘‘),達到快速簡捷的作用 * @param elementId 傳入的ID名 */ fu

JavaScript document open() 方法:打開一個新文檔

打開 click 寫入 ack create tex scrip ava pan <html> <head> <script type="text/javascript"> function createNewDoc() { v

BX9054: 各瀏覽器對 document.execCommand 方法的首引數可選值範圍存在差異

標準參考 無。 問題描述 execCommand 方法通常用於控制可編輯的 IFRAME 內容,製作富文字編輯器。 但他現在為止還是非標準的,方法的首引數 Commmands 的可選值由各個瀏覽器廠商制定,支援程度並不統一。 造成的影響 使用僅有某個瀏覽器支援的 Co

document.getElementByIddocument.write

document.getElementById: 從 JavaScript 訪問某個 HTML 元素,可以使用 document.getElementById(id) 方法。 使用 "id" 屬性來標識 HTML 元素,並 innerHTML 來獲取或插入元素內容: eg: <h1>我的第

DOM的理解 Document 物件介紹Document 物件方法

DOM 文件物件模型(Document Object Model,簡稱DOM),是W3C組織推薦的處理可擴充套件標誌語言的標準程式設計介面。 DOM 是 W3C(全球資訊網聯盟)的標準。 DOM 定義了訪問 HTML 和 XML 文件的標準: “W3C 文件物件模型 (DO

document.write vs document.getElementById

document.write:       JavaScript中對document.open所開啟的文件流(document stream操作的API方法,它能夠直接在文件流中寫入字串,一旦文件流已經關閉,那document.write就會重新利用document.open開

當innerHTML遇上document getElementById

分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

小白新手必看:document.getElementById("demo").innerHTML 全面分析

假設程式碼為: <h1>我的第一個 Web 頁面</h1>        <p id="demo">一個段落。</p><script>function myFunction(){ document.getE

小白新手必看:document.getElementById("demo").innerHTML 全面分析

頁面 tel 意思 lena 註意 php style spa 定義 假設代碼為: <h1>我的第一個 Web 頁面</h1> <p id="demo">一個段落。</p><script>functi

document.getElementById(“id”)與$("#id")的區別

獲取 obj tro block strong 使用 區別 element one document.getElementById("id")可以直接獲取當前對象, jQuery利用$("#id")獲取的是一個[object Object],需要使用$("#id")[0]或

document.getElementById()獲取值為null

js檔案在head標籤裡或者在div上面的位置時獲取不到id的內容, 這是由於載入順序問題,html文件是從上往下載入,而不會全部載入後再執行js程式碼,因此導致get不到節點的資訊 解決辦法: 1.在body標籤下引入js檔案 2.將js程式碼加一個onload函式

document.getElementById("areatext").setAttribute("value",area);似乎不會更新

  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圓面積</title> <script ty

jquery中的$("#id")與document.getElementById("id")的區別

開始用的是jquery框架,操作DOM。但是並沒有仔細研究和原生js之間的區別是什麼?今天就對這個進行可分析。  如有補充,歡迎大家指教,已完善的更好! jquery : $("IDname or ClassName") js : Document.getElements

document.getElementByIddocument.getElementsByClassName獲取DOM元素的區別

    想必小夥伴們對於 JS 獲取DOM的幾種方法早已爛熟於心,瞭然於胸,    尤其是 document.getElementById 和 document.getElementsByClassName,    看看下面截圖,用上面2種方法獲取到元素並新增點選

JavaScript--Document物件方法createElement()和createTextNode()

createElement() 方法通過指定名稱建立一個元素 createTextNode() 可建立文字節點 <!DOCTYPE html> <html> <head> <meta charset="UTF-8">