我本来想想练习一个小范例：
页面上写一个文本输入框和一个按钮，点击按钮让文本框禁用，不可再输入。
思路是这样： 先获取到文本框对象，给按钮设置一个点击事件，点击时将文本框的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>
然而，实际运行的时候，点击按钮并没有让文本框禁用，审查元素调试一下，提示
Uncaught TypeError: Cannot set property 'disabled' of null
at fobbiden (获取input并禁用.html:10)
at HTMLInputElement.onclick (获取input并禁用.html:16)
大概是说，在执行onclick事件的fobbiden函数时，disabled作为null没办法设置属性。
思考了一下，推测可能是因为
var txt = document.getElementById('txt');
执行的时候，还没有“txt”这个DOM对象。于是，我把这句拿到函数里来，当触发onclick事件的时候，再通过getElementById去获取txt对象。代码如下：
<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对象是在什么时候创建的呢？
不太懂这方面较低层的知识，但是可以推测，如果浏览器是按照节点树的顺序来渲染的话，最快的情况也就是，当这个节点被创建的同时，DOM对象就存在了。
201701.jpg
试一下代码：
<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>
我在第一个<input>标签后马上写了两句：
var txt = document.getElementById('txt');
console.log(txt);
最后测试的结果正确，说明此时已经可以获取“txt”DOM对象，并且通过console.log()打印的结果如下：
微信截图_20180424220035.png
同样验证了结果。
至此，我们可以认为，当浏览器通过html标签渲染出一个节点，同时也创建了DOM对象，此时即可以通过javascript的方法去获取这个DOM对象。
网友评论