什么是DOM?
    文档对象模型(document object model)
    可以像操作对象那样, 去操作咱们的页面(结构 \ 样式 \ 内容) , 是一个接口

DOM树(文档树)
    把整个页面当做是一个文档对象, 页面中的标签 \ 属性 \ 注释\ 文本内容 , 这些都是这个文档的节点,节点对象
    想改变页面 就是去操作document文档

操作元素
    1.获取元素对象

        1.1 根据ID来获取元素对象, document.getElementById()
            a. 获取到, 返回元素对象
            b. 获取不到, 返回 null

        1.2 根据标签名获取对象
            a. 从文档中获取, document.getElementsByTagName()
            b. 从指定标签中获取 父元素对象.getElementsByTagName()
            c. 返回值   获取时以伪数组方式的存储数据,
                            获取不到时返回空的伪数组

        1.3 H5新增的方式[有兼容性问题]
            a. 根据class来获取, getElementsByClassName()
            b. 根据选择器来获取, querySelector(), 返回第一个对象
            c. 根据选择器来获取, querySelectorAll(), 返回所有对象
            d. 返回值   获取时以伪数组方式的存储数据

        1.4 特殊元素对象的获取
            a. 获取 body 元素, document.body
            b. 获取 html 元素, document.documentElement

    2.操作元素内容

        2.1 获取内容
            a. 元素对象.innerText [过滤html标签 \ 空格 \ 换行]
            b. 元素对象.innerHTML[原封不动的获取标签中间的内容]

        2.2修改内容
            a. 元素对象.innerText = 新内容; [不识别html标签]
            b. 元素对象.innerHTML= 新内容;[识别html标签]
   
    3.操作元素属性
        a. 获取属性
            (1) 元素对象.属性名 (只能获取标签自带的属性)
            (2)
        b. 修改属性
            元素对象.属性名 = 新值;
        c. 表单元素的状态属性
            例如 :
                disabled \ checked , js中用 true 和 false 来设置其状态.

    4.操作元素的样式
         a. 元素对象.style.样式名 = 样式值;[样式少时用]
        b. 通过修改class属性来设置  元素对象.className = 类名;[样式多时用]
        



    生活中的事件 :
        a. 时间
        b. 人物
        c. 事

    网页中的事件 :
        a. 标签(事件源对象)
        b.用户对这个标签做了什么操作(事件类型)
        c. 出现了什么特效(事件处理程序)

页面中的事件
    1.当用户做了某个操作, 出现了相应的特效

    2.事件三要素
        a. 事件源对象(标签对象)
        b. 事件类型(用户的操作)
        c. 事件处理程序(函数, 特效代码)

    3.常用的事件类型
        a. 单机事件, onclick
        b. 获得焦点事件, onfocus
        c. 失去焦点事件, onblur
        d. 鼠标移入事件, onmouseover
        e. 鼠标移出事件, onmouseout

    4.注册事件
        元素对象.事件类型 = function() {    // 特效代码;};

    5.事件处理函数中的this
        a. 事件处理函数中有一个关键字 this
        b. this 代表事件源对象

什么是DOM?
    文档对象模型(document object model)
    可以像操作对象那样, 去操作咱们的页面(结构 \ 样式 \ 内容) , 是一个接口

DOM树(文档树)
    把整个页面当做是一个文档对象, 页面中的标签 \ 属性 \ 注释\ 文本内容 , 这些都是这个文档的节点,节点对象
    想改变页面 就是去操作document文档

操作元素
    1.获取元素对象

        1.1 根据ID来获取元素对象, document.getElementById()
            a. 获取到, 返回元素对象
            b. 获取不到, 返回 null

        1.2 根据标签名获取对象
            a. 从文档中获取, document.getElementsByTagName()
            b. 从指定标签中获取 父元素对象.getElementsByTagName()
            c. 返回值   获取时以伪数组方式的存储数据,
                            获取不到时返回空的伪数组

        1.3 H5新增的方式[有兼容性问题]
            a. 根据class来获取, getElementsByClassName()
            b. 根据选择器来获取, querySelector(), 返回第一个对象
            c. 根据选择器来获取, querySelectorAll(), 返回所有对象
            d. 返回值   获取时以伪数组方式的存储数据

        1.4 特殊元素对象的获取
            a. 获取 body 元素, document.body
            b. 获取 html 元素, document.documentElement

    2.操作元素内容

        2.1 获取内容
            a. 元素对象.innerText [过滤html标签 \ 空格 \ 换行]
            b. 元素对象.innerHTML[原封不动的获取标签中间的内容]

        2.2修改内容
            a. 元素对象.innerText = 新内容; [不识别html标签]
            b. 元素对象.innerHTML= 新内容;[识别html标签]
   
    3.操作元素属性
        a. 获取属性
            (1) 元素对象.属性名 (只能获取标签自带的属性)
            (2)
        b. 修改属性
            元素对象.属性名 = 新值;
        c. 表单元素的状态属性
            例如 :
                disabled \ checked , js中用 true 和 false 来设置其状态.

    4.操作元素的样式
         a. 元素对象.style.样式名 = 样式值;[样式少时用]
        b. 通过修改class属性来设置  元素对象.className = 类名;[样式多时用]
        



    生活中的事件 :
        a. 时间
        b. 人物
        c. 事

    网页中的事件 :
        a. 标签(事件源对象)
        b.用户对这个标签做了什么操作(事件类型)
        c. 出现了什么特效(事件处理程序)

页面中的事件
    1.当用户做了某个操作, 出现了相应的特效

    2.事件三要素
        a. 事件源对象(标签对象)
        b. 事件类型(用户的操作)
        c. 事件处理程序(函数, 特效代码)

    3.常用的事件类型
        a. 单机事件, onclick
        b. 获得焦点事件, onfocus
        c. 失去焦点事件, onblur
        d. 鼠标移入事件, onmouseover
        e. 鼠标移出事件, onmouseout

    4.注册事件
        元素对象.事件类型 = function() {    // 特效代码;};

    5.事件处理函数中的this
        a. 事件处理函数中有一个关键字 this
        b. this 代表事件源对象