web前端开发学习

    >> 基本概念；
    Document Object Model 文档对象模型；
    Document 标记型文档(HTML XML)
    Object 有对象就有方法和属性，那就可以进行操作；
    Model 吧共有的特性封装并抽象，然后进行描述，这就是模型；

    >> 作用：
    通过DOM的方式把文档的所有成分封装成对象；
    封装成对象之后就可以提供操作，
    DOM要操作文档之前要先进行解析--- 解析器：浏览器/dom4j ；

    >> DOM的解析方式 --- DOM树；
        >>> 按照文档的格式，按照标签的嵌套格式将所有成分封装成了对象；
        例如：
        html
          |-- head
            |-- title
                |-- 文本
          |-- body
            |-- h1
                 |-- 文本
            |-- p
                |--a -- 属性
                   |--文本

        >>> 树中的各种对象；
        document：整个文档对象；
        element：元素对象；
        text：文本对象；
        Attribute：属性对象；

        Node：节点对象(最顶端的节点)；

    >> DOM的三种级别，可以自行了解；

    >> DHTML
        > HTML --- 使用标签封装数据；
        > CSS --- 设置样式；
        > DOM --- 将文档元素封装成对象；
        > JavaScript --- 提供事件驱动，控制语句；
        


#DOM的API和常用对象；
    >> Dcoument对象；
        1)方法；
          |-- getElementById("id的值");
          |-- getElementsByName("name");
          |-- getElementsByTagName("标签名");
          |-- createElement(字符串形式的标签); -- 创建元素对象；
          |-- createTextNode(字符串形式的标签); -- 创建文本对象；
          |-- appendChild(note); -- 创建子节点；

    >> Element对象；
        1)方法；
          |-- 操作属性相关；
            |-- setAttribute(属性名称，属性值)； -- 设置或修改属性的值；
            |-- getAttribute(属性名称) -- 获取属性的值；
            |-- removeAttribute(属性名称) -- 删除属性；
          |-- 获取子节点(重点)；
            |-- getElementsByTagName(元素名称)； -- 获取元素下面的所有子节点，用Element调用；
                案例：通过该方法获取子节点；

                var ul= document.getElementsByTagName("ul");
                var lis= ul.getElementsByTagName("li");
                alret(lis.length);

    >> Node 节点对象；
        1)基本概念；node可以使用所有的方法（？）
        2)三个基本属性；
            |-- nodeName 属性名称；
            |-- nodeType 属性类型；
            |-- nodeValue 属性值；
            注意：它们获取的内容是固定的；
            参见截图（1146）

        3)节点之间的关系；
            3.1)父节点只有一个；
            3.2)子节点有若干个；
                |-- 同级节点之间称作兄弟节点；

            3.3)方法；
                |-- firstElementChild; -- 获取第一个元素子节点；
                    |-- firstChild; -- 获取第一个子节点（注意，在火狐或者Chrome上会获取到文本节点；

                |-- 其他参考老师笔记；

    >> Node 节点对象的方法；
        |-- hasChildNodes(); -- 判断是否包含子节点；
        |-- hasAttributes(); -- 判断是否包含指定属性；
        |-- appendChild(); -- 在末尾添加子节点；
        |-- insertBefore(new,old); -- 在指定位置添加子节点；
        参考案例：添加子节点.html；
        |-- removeChild(node); -- 删除指定节点,使用父节点调用该方法；
        参考案例：操作Node节点.html; （参考截图1429）；
        |-- replaceChild(new,old); -- 替换指定节点，使用父节点调用该方法；
        |-- cloneNode(boolean); -- 复制节点， 参数是false则不复制，默认为false；

#innerHTML属性；
    >> 基本概念：不是官方标准，但几乎所有浏览器都支持该属性，
    可以用来获取和设置标签的文本内容；

    >> 实际案例：获取和失去焦点；
        |-- 两种事件；
            |-- onfocus -- 获取焦点
            |-- onblur -- 失去焦点

    >> 实际案例：全选/反选/全不选；


#案例；
    参考案例：全选练习.html；
    参考案例：下拉列表左右选择.html；
    参考案例：省市联动.html；
        事件 -- onchange= show();


#常见的事件总结；
    
    >> onclick -- 点击事件；
    >> ondblclick -- 双击事件；
    >> ondload -- 加载事件，HTML文件加载完后触发的事件；
    >> onunload -- 卸载事件，关闭浏览器后触发的事件；
    >> onfocus -- 获取焦点事件；
    >> onblur -- 失去焦点事件；
    >> onchange -- 改变事件；