當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

document.getElementById 学习总结

發布時間：2025/4/14 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 document.getElementById 学习总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

document.getElementById獲取控件對象為空的解決方法

?
1.下面是一個簡單的例子，頁面加載時顯示一段信息

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? ? ? <script language="javascript">
? ? ? ? ? alert("hello!!!");
? ? ? </script>
? </head>

? <body onLoad="showMessage()">
? ? ? <h1>在頁面加載之前，會輸出一些信息</h1>
? </body>
</html>
執行后，確實是“在頁面加載前，輸出了信息”。
2.下面的例子會出現document.getElementById為空的情況。
我的計劃是：在頁面加載時，在<body></body>的文本框中顯示由后臺處理來的數據，比如這里的字符串

“hello, my friend!”。但是這里通過通過document.getElementById讀取的是對象為空。
因為onLoad方法在頁面<body></body>加載之前執行，此時id="mes"對應文本框的文本框，還沒有加載進

去。

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? <head>
? ? ? <script language="javascript">
? ? ? ? ? var t=document.getElementById("mes");
? ? ? ? ? t.value="hello, my friend!"
? ? ? </script>
? </head>

? <body onLoad="showMessage()">
? ? ? the message is:<input type="text" id="mes">
? </body>
</html>
3.解決辦法
在加載Html網頁時，會加載<html></html>中的所以數據。先加載<head>，再加載<body>。
所以我們可在</body>之后，在</html>之前寫入javascript就好了。程序順序執行，執行到相應的

javascript調用就可以執行。不是用onLoad方法。
代碼如下：

代碼如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
? ? <body>?
? ? ? ? ? the message is:<input type="text" id="mes">
? ? </body>

? ? ? 
? ? <script language="javascript">
? ? ? ? ? function showMessage()
? ? ? ? ? {
? ? ? ? ? ? ? var t=document.getElementById("mes");
? ? ? ? ? ? ? t.value="hello, my friend!"
? ? ? ? ? }
? ? ? ? ? showMessage(); ? ?//調用方法，更新文本框
? ? ? </script>
</html>
========

document.getElementById獲取不到值的原因

HTML DOM 定義了多種查找元素的方法，除了 getElementById() 之外，還有 getElementsByName() 和?

getElementsByTagName()。

?HTML DOM 定義了多種查找元素的方法，除了 getElementById() 之外，還有 getElementsByName() 和?

getElementsByTagName()。
不過，如果您需要查找文檔中的一個特定的元素，最有效的方法是 getElementById()。
在操作文檔的一個特定的元素時，最好給該元素一個 id 屬性，為它指定一個（在文檔中）唯一的名稱

，然后就可以用該 ID 查找想要的元素。
需求，就可以想到利用GET傳值的方式，但常規GET方式需要把鏈接寫入標簽的a href里面，而我們實際

上是希望用按鈕來進行點擊，而不是一個簡單的超鏈接形式。于是這里就得用到Javascript在按鈕的

onclick事件下寫代碼。很明白，就是將input的value(用戶輸入的頁碼)傳到onclick的代碼里，這里用

javascript的location來完成跳轉。
? ? 好了，整體就是這個樣子，至于getElementById這個方法我就不多說了。重點說說我遇到的問題以

及如何解決的。
1.Javascript本身不會報錯，只要不出你預期的結果，那么代碼肯定是有問題的。這個時候可以看看代

碼里的符號，比如說單引號、雙引號、大括號、小括號等等...因為這段代碼不是直接在JS文件中寫的，

而是用PHP進行構造來輸出的，再加上PHP本身輸出需要用到單引號、雙引號，所以這個時候很多符號混

合在一起是很容易出錯。不要緊，你可以先運行一下，然后再查看網頁源代碼來看看當前的Javascript

到底是不是你需要的那一段，看到少了什么符號我們就立馬給補上，不過這個時候還需要注意一點，如

果要直接輸出單引號、雙引號的話，在PHP的代碼里這里需要用‘’來進行轉義。
2.上面的問題一般是不會彈出任何結果的，即使我們用alert來查看設置的變量，因為Javascript代碼存

在問題，它根本就沒辦法執行！假設你已經改正了語法上的錯誤，那么我們繼續看...我們可以用以下代

碼來獲取用戶輸入的頁碼，并打印輸出看看正確與否。
?
?代碼如下復制代碼
var uPage=document.getElementById('pa').value; alert(uPage);
?如果這個時候一直彈出"undefined"的提示，那么至少說明你的Javascript代碼正確運行了，它沒有語

法上的錯誤！至于為什么undefined，我調試了很久都沒找出原因，后來無意中嘗試把value改成

innerHTML，居然打印出了一些結果，不過仔細一看才知道打印出的是一個同id名的div中的內容，這下

才恍然大悟...在分頁類中直接給input標簽的id取名為page了，而這個page我在其他的div中也使用了。

于是將分頁類中input的id改為一個很變態的名字。其實這個時候就應該注意到這些問題，如果我們的代

碼可能會提供給其他人使用，那么命名就很重要了，如果只是在內部(就比如說我這里input這個標簽只

在類里面使用)，那么名字應該盡量取得復雜一些，這樣它與用戶的命名發生沖突的可能性就很小了。
? ? ?最后：
?代碼如下復制代碼
document.getElementById('idname').value;//獲取input標簽里的值，value;?

document.getElementById('idname').innerHTML;//獲取div里的html內容 ?
參考資料：
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> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?*
? ?* <script language="javascript"> ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?*
? ?*  ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? *
? ?* </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 ?s只抓得到第一??出?的 name ?料
========

js判斷document.getElementByid("")獲得的對象是否存在

document.getElementByIdx_x("")如果獲得的對象不存在，進行操作時會報錯。因此需要判斷該對象是

否存在，以下2種方法，
推薦使用第一種
方法一:
var v;
v = document.getElementByIdx_x( "id ");
if(v==null){
//不存在，錯誤處理
}else{
//存在，正常處理
}
方法二：
if (typeof(obj) == "undefined") {
? ? ?//不存在，錯誤處理
}else{
//存在，正常處理
}
========

一行代碼告別document.getElementById

絕大多數的腳本里，都是直接通過元素的id來訪問DOM的。?
　　?
　　后來隨著各種瀏覽器接踵而至，逐漸的替代了ie。為了保證各路門派統一規則，標準化越來越被重

視。當初那種直接訪問id的方法，逐漸被document.getElementById所替代。如果這年頭還在用id訪問元

素，要么就是做程序里的內嵌網頁，要么就是像鐵道部那樣的超境界仿古網站：）當然只要保證你的用

戶都是用ie訪問，這樣的非標準也但用無妨。?
　　?
　　然而，很多第三方瀏覽器剛出來的時候，為了保證能與當時大量的非標準頁面兼容，都保留了用id

訪問DOM這一非標準做法。事實上如今的主流瀏覽器，只有FireFox不支持這種做法，而

Chrome,Opera,Safari,Mobile Safari都支持。?
　　?
　　既然如此，我們不如讓FireFox也支持，這樣所有的瀏覽器都可以直接用id直接訪問DOM，不僅快捷

方便，減少了累贅的代碼，更能提升運行的效率。?
　　?
　　實現很簡單，文檔載入完成后查詢帶有id屬性的元素，然后在window對象里添加其引用：?

代碼如下:
var list = document.querySelectorAll('[id]');?
for(var i = 0; i < list.length; i++)?
{?
if(list[i].id)?
window[list[i].id] = list[i];?
}?

當然，只有FF需要這個hack，所以我們先檢測下是否有其特征。最后精簡下代碼，利用數組遍歷回調，

即可壓縮到簡單的一行：?

代碼如下:
<script>?
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(k)

{this[k.id]=k});?
</script>?

　　不過有個值得注意的地方，在文檔載入尚未完成前 querySelectorAll，只能查詢當前<script>之前

的元素。所以以上代碼必須放在文檔的末尾。而使用id訪問，也必須在文檔載入完成之后，否則就可能

找不到這個元素。下面是個測試頁面，在所有瀏覽器下都通過：?

代碼如下:
<!DOCTYPE html>?
<html>?
<head>?
<title>No document.getElementById</title>?
</head>?
<body>?
<div id="mytag"></div>?
<script>?
onload = function()?
{?
mytag.innerHTML = "Goodbye, document.getElementById!";?
}?
</script>?
<script>?
if('mozHidden' in document) [].forEach.call(document.querySelectorAll('[id]'),function(e)

{self[e.id]=e});?
</script>?
</body>?
</html>?

========

各瀏覽器對document.getElementById等方法的實現差異解析

所有Web前端同仁對 document.getElementById 都非常熟悉了。開發過程中經常需要用其獲取頁面id為

xx的元素，自從元老級JS庫Prototype流行后，都喜歡這么簡寫它

代碼如下:
// 方式1?
function $(id){ return document.getElementById(id); }?

有沒有人想過為什么要這么寫，而不用下面的方式寫呢？

代碼如下:
// 方式2?
var $ = document.getElementById;?

這么寫的$更簡潔啊，也很明了，將document的方法getElementById賦值給變量$，用$去獲取頁面id為xx

的元素。實際上方式2在IE6/7/8中是可行的（IE9中有些變動），Firefox/Safari/Chrome/Opera則行不

通。還請自行測試。

為什么Firefox/Safari/Chrome/Opera 方式2獲取就不行呢，原因是這些瀏覽器中getElementById方法內

部實現中需依賴this(document)，IE則不需要this。或者說方式2在Firefox/Safari/Chrome/Opera中調

用時說丟失了this，以下是個簡單示例

代碼如下:
// 定義一個函數show?
function show(){alert(this.name);}?

// 定義一個p對象，有name屬性?
var p = {name:'Jack'};?

show.call(p); // -> 'Jack'?
show(); // -> ''?
show.call(null); // -> ''<BR>?

可以看到show的實現中依賴this（簡單說方法體中使用了this），因此調用時的環境（執行上下文）如

果沒有name屬性，則得不到期望的結果。
換句話說，IE6/7/8實現document.getElementById時沒有用到this，而?

IE9/Firefox/Safari/Chrome/Opera 需要用到this，這里的this正是document對象。直接調用方式2時內

部的 this卻是window對象，所以造成方式2在 Firefox/Safari/Chrome/Opera 不能根據id來正常獲取元

素。

如果將document.getElementById的執行環境換成了document而非window，則可以正常的使用$了。如下

代碼如下:
// 修復document.getElementById?
document.getElementById = (function(fn){?
? ? return function(){ ?
? ? ? ? return fn.apply(document,arguments);?
? ? };?
})(document.getElementById);?

// 修復后賦值給$，$可正常使用了?
var $ = document.getElementById;?

再次，ECMAScript5 中為function新增的 bind 方法可以實現同樣的效果?

代碼如下:
// 方式3?
var $ = document.getElementById.bind(document);?

但目前方式3只有IE9/Firefox/Chrome/支持。

分析了getElementById的情況，下面的一些方法在各瀏覽器中的差異原因就很好明白了?

代碼如下:
var prinf = document.write;?
prinf('<h3>Test prinf</h3>'); // IE6/7/8可運行，其它瀏覽器報錯?

var prinfln = document.writeln;?
prinfln('<h3>Test prinfln</h3>'); // IE6/7/8可運行，其它瀏覽器報錯?

var reload = location.reload;?
reload(); // IE6/7/8可運行，其它瀏覽器報錯?

var go = history.go; ?
go(-2); // IE6/7/8可運行，其它瀏覽器報錯?

========

js中document.getElementByid、document.all和document.layers區分介紹

總結

以上是生活随笔為你收集整理的document.getElementById 学习总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。