我本來想想練習(xí)一個(gè)小范例：
頁面上寫一個(gè)文本輸入框和一個(gè)按鈕侣滩，點(diǎn)擊按鈕讓文本框禁用证逻，不可再輸入。
思路是這樣： 先獲取到文本框?qū)ο笳殷荩o按鈕設(shè)置一個(gè)點(diǎn)擊事件，點(diǎn)擊時(shí)將文本框的disabled屬性修改為“True”慷吊，從而讓文本框禁用袖裕。
我寫的代碼是這樣：
<html>
<head>
<meta charset="utf-8">
<title>獲取input并禁用</title>
<script type="text/javascript">
var txt = document.getElementById('txt');
function fobbiden(){
txt.disabled = true;
}
</script>
</head>
<body>
<input type="text" id="txt">
<input type="button" onclick="fobbiden()" value="禁用" id="btn">
</body>
</html>
然而，實(shí)際運(yùn)行的時(shí)候溉瓶，點(diǎn)擊按鈕并沒有讓文本框禁用急鳄，審查元素調(diào)試一下谤民，提示
Uncaught TypeError: Cannot set property 'disabled' of null
at fobbiden (獲取input并禁用.html:10)
at HTMLInputElement.onclick (獲取input并禁用.html:16)
大概是說，在執(zhí)行onclick事件的fobbiden函數(shù)時(shí)攒岛，disabled作為null沒辦法設(shè)置屬性赖临。
思考了一下胞锰，推測(cè)可能是因?yàn)?/p>
var txt = document.getElementById('txt');
執(zhí)行的時(shí)候灾锯，還沒有“txt”這個(gè)DOM對(duì)象。于是嗅榕，我把這句拿到函數(shù)里來顺饮，當(dāng)觸發(fā)onclick事件的時(shí)候，再通過getElementById去獲取txt對(duì)象凌那。代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>獲取input并禁用</title>
<script type="text/javascript">
function fobbiden(){
var txt = document.getElementById('txt');
txt.disabled = true;
}
</script>
</head>
<body>
<input type="text" id="txt">
<input type="button" onclick="fobbiden()" value="禁用" id="btn">
</body>
</html>
打開瀏覽器試一下兼雄，果然可以。
那么問題來了帽蝶，DOM對(duì)象是在什么時(shí)候創(chuàng)建的呢赦肋？
不太懂這方面較低層的知識(shí)，但是可以推測(cè)励稳，如果瀏覽器是按照節(jié)點(diǎn)樹的順序來渲染的話佃乘，最快的情況也就是，當(dāng)這個(gè)節(jié)點(diǎn)被創(chuàng)建的同時(shí)驹尼，DOM對(duì)象就存在了趣避。
試一下代碼：
<html>
<head>
<meta charset="utf-8">
<title>獲取input并禁用</title>
</head>
<body>
<input type="text" id="txt">
<script type="text/javascript">
var txt = document.getElementById('txt');
console.log(txt);
</script>
<input type="button" onclick="fobbiden()" value="禁用" id="btn">
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.onclick = function(){
txt.disabled = true;
}
</script>
</body>
</html>
我在第一個(gè)<input>標(biāo)簽后馬上寫了兩句：
var txt = document.getElementById('txt');
console.log(txt);
最后測(cè)試的結(jié)果正確，說明此時(shí)已經(jīng)可以獲取“txt”DOM對(duì)象新翎，并且通過console.log()打印的結(jié)果如下：
同樣驗(yàn)證了結(jié)果程帕。
至此，我們可以認(rèn)為地啰，當(dāng)瀏覽器通過html標(biāo)簽渲染出一個(gè)節(jié)點(diǎn)愁拭，同時(shí)也創(chuàng)建了DOM對(duì)象，此時(shí)即可以通過javascript的方法去獲取這個(gè)DOM對(duì)象亏吝。
