DOM对象是什么时候被创建的

我本来想想练习一个小范例:

页面上写一个文本输入框和一个按钮,点击按钮让文本框禁用,不可再输入。

思路是这样: 先获取到文本框对象,给按钮设置一个点击事件,点击时将文本框的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对象。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 1,236评论 1 10
  •   JavaScript 最初的一个应用,就是分担服务器处理表单的责任,打破处处依赖服务器的局面。   尽管目前的...
    霜天晓阅读 333评论 0 3
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 6,278评论 2 17
  • 欢迎关注个人微信公众账号:byodian个人博客:Byodian's Blog JavaScript 基础知识总结...
    工具速递阅读 312评论 0 2
  • 最近在学习javascript关于DOM的一些知识,在这里对DOM做一些总结。 1.DOM简介 DOM是W3C的标...
    风之郁少阅读 132评论 0 5