DOM简介

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：文档对象模型（Document object Model），操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

• BOM：浏览器对象模型（Browser Object Model），操作浏览器部分功能的API。比如让浏览器自动滚动。

节点

节点（Node）：构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点，比如：html标签、属性、文本、注释、整个文档等都是一个节点

虽然都是节点，但是实际上他们的具体类型是不同的。常见节点分为四类：

• 文档节点（文档）：整个 HTML 文档。整个 HTML 文档就是一个文档节点。
• 元素节点（标签）：HTML标签。
• 属性节点（属性）：元素的属性。
• 文本节点（文本）：HTML标签中的文本内容（包括标签之间的空格、换行）。

节点的类型不同，属性和方法也都不尽相同。所有的节点都是Object

什么是DOM

DOM：Document Object Model，文档对象模型。DOM 为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构。目的其实就是为了能让js操作html元素而制定的一个规范。

DOM就是由节点组成的。

解析过程：
HTML加载完毕，渲染引擎会在内存中把HTML文档，生成一个DOM树，getElementById是获取内中DOM上的元素节点。然后操作的时候修改的是该元素的属性。

DOM树：（一切都是节点）

DOM的数据结构如下：

上图可知，在HTML当中，一切都是节点（非常重要）。节点的分类，在上一段中，已经讲了。

整个html文档就是一个文档节点。所有的节点都是Object。

DOM可以做什么

• 找对象（元素节点）
• 设置元素的属性值
• 设置元素的样式
• 动态创建和删除元素
• 事件的触发响应：事件源、事件、事件的驱动程序

有DOM的情况下JS的执行顺序 link

该知识点由DOM增删改查练习中的新增和删除员工引出

    window.onload = function(){
        var allA = document.getElementsByTagName("a");

        // for循环会在页面加载完成之后立即执行
        // 响应函数会在超链接点击时才执行
        // 当响应函数执行时，for循环早已执行完毕
        for(var i=0 ; i < allA.length ; i++){
            alert('for循环正在执行' + i);
            allA[i].onclick = function(){
                //可以看出是i的问题
                alert(allA[i]);     // undefined
                alert(i);           // 每次都是3
                return false;
            };
        }

    };