JavaScript路途学习笔记（8）操作DOM文档（1）

JavaScript征途学习笔记（8）操作DOM文档（1）

整个文档是由很多节点构成的集合,节点指文档中的元素以及元素中包含的文本。这些节点可以拥有不同的节点类型。
文档树中的每个节点对象都有nodeType属性，该属性可以返回节点类型。

nodeType 类型返回值 nodeName返回值 nodeValue返回值

Document    9         #document       null
Element     1         元素名称       null
Atrr      2         属性名称       属性值
Text      3         #text         节点内容
Comment     8         #comment       注释文本
...

操作DOM文档
Node是DOM模型的基类，Element对象继承于Node对象，Document对象也继承于Node对象。
不同类型的节点拥有不同的属性和方法。
DOM核心模块包括：Node，Document，Element，Text 4个基本对象，
HTML DOM文档加载时按顺序执行的，一般浏览器渲染操作顺序大致如下：
（1）解析HTML结构
（2）加载外部脚本和样式表文件
（3）编译、解释执行脚本
（4）构造HTML DOM模型
（5）加载图片等外部文件
（6）页面加载完毕

边加载边构造，所以HTML头部的脚本会在DOM结构完全构造好之前执行，这样就会导致脚本无法访问尚未构造好的DOM文档结构模型。所以，可执行脚本一般都放在页面初始化事件处理函数中，这样能够保证文档完全加载之后再执行脚本，也就是说到第（6）步才开始执行脚本。

    window.onload - function() {
        //脚本执行内容
    }

但是如果页面中包含很多外部文件比如图片、音频、视频、动画文件等，加载时间比较长会延迟脚本执行时间，为了避免脚本处在长期等待中，
我们可以把脚本分成快放在HTML文档结构中间，这样在DOM构造过程中执行到脚本所在的位置就会执行脚本。
这种方法虽然能够提前执行脚本，但是还是不能保证脚本可以访问其位置后面的文档结构。
所以，如果在页面最后一个元素之前嵌入脚本就可以保证最早执行脚本并且确保脚本可以访问HTML DOM文档结构模型中的所有元素。

<html>
        <head>
            <title></title>
        </head>
        <body>
            
            <script type="text/javascript">
                //脚本执行内容
            </script>
        </body>
    </html>

上述方法破坏文档结构，不利于管理，我们可以通过判断Document对象的几个重要方法如果存在，说明DOM已经加载完毕，否则说明还在加载中。这种方法既不破坏文档结构，也可以捕捉到DOM加载过程。

    function f() {

        if(document && document.getElementsByTagName && document.getElementById && document.body) {

            clearInterval(timer);
            //脚本执行内容
        }
    }

    var timer = setInterval(f, 10);

JavaScript路途学习笔记（8）操作DOM文档（1）

相关推荐