【记录】自学JavaScript第六周

快要考试了，也没学什么了 ，这一次就分析一下DOM和BOM的区别。
首先DOM：
Document Object Model 文档对象模型
一个Window对象有一个document属性引用了Document对象
Document对象表示窗口内容，他是一个巨大的API中的核心对象，他代表操作文档的内容

了解DOM我们需要了解：

1 在文档中查询元素

2 将文档作为节点树来遍历，找的节点的祖先、兄弟和后代

3 查询和设置文档的属性

4 查询、更改文档的内容

5 创建、插入、删除节点来修改文档

DOM对象模型是表示和操作HTML和XML文档内容的基本API.

首先，查询元素，如果我们需要获取一个东西在不使用id，不使用jquery的情况下还是非常难受的，我们大概需要遍历每一个元素，再根据某些条件来获取我们所要的东西。

其次，属性，HTML由一个标签和一组称为属性飞键值对组成，我们一般使用getAttribute与setAttribute来获取与设置属性，因为属性无法使用delete删除，所以还提供了has

Attribute与removeAttribute来判断标签是否含有某属性以及去掉标签的某个属性。

获取HTML内容：

innerHTML获取元素内部所有文本和标签
innerText获取元素内部文本
outerHTML获取标签元素

然后就是节点相关，元素等等...

BOM:

浏览器对象模型 Browser Object Model

说白点就是window这个东东：表示浏览器的一个实例，是访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象。

意思是我们定义的所以所有的东西，都与window有关，他是客户端给javascript程序的全局对象。

有一个计时器的例子

javascript的计时器有setTimeout与setInterval两种，一个是在一定时间后执行，一个是重复执行。

这两个东西大家应该都很熟悉了，但是在实际应用中，setTimeout却带给了我们不一样的东西，比如优化！

setTimeout的优化点可以是以下地方：

① 鼠标移动标签上加载数据（发起http请求），但我们鼠标可能无意义的划过，所以延迟点加载若是无意义请求便取消

② 无论鼠标事件或者窗口改变事件，我们都可以使用这个家伙

(function () {
    var ajax = $('#ajax');
    var TIMER = null;
    var TIMER_STEP = 500;
    ajax.mousemove(loadMenu);
    ajax.mouseout(function () {
        if (TIMER) clearTimeout(TIMER);
    });
    function loadMenu() {
        if (TIMER) clearTimeout(TIMER);
        TIMER = setTimeout(function () {
            //do someting
        }, TIMER_STEP);
    }
})();