DOM操作

Web APIs——DOM：document object model.

    -应用领域：网页特效、特效

    -文档

事件：三要素包括，事件源 事件类型   事件处理函数

    事件源.事件类型 = 事件处理函数

    事件类型： onclick onmouseover onmouseout onfocus onblur

            onmousemove onmouseup onmousedown

            ondbclick  

行内样式为： 建议双引号，“”

元素查找——>元素操作

    获取元素地内容

    innnerHTML  支持标签

    innerText   不支持

操作元素属性

    固有属性

        disabled:表示禁用

        checked：true-选中，false-不选中

    1：元素内容

    2：与三俗属性

    3：表单元素属性

    4：样式属性

        -行内样式

            -style.width === style['width']

            -style.height

            -style.backgroundColor

            -className:更改类名 ；应用：更多是灵活切换css中地样式   默认为""

            [class 名称连字符较多]

            -style.display:"none";

work:

    按钮切换图片：1234，支持随机切换 ——Math

    登录密码：源码与掩码 显示 ——input:password/text || 来回切换

        input && label（设置图片）

    网页换肤效果

    新浪下拉列表

=========================================================

自定义属性操作

    标签自带属性：id\class\onclick等固有属性

    支持添加属性：获取固有属性，undefined

    获取属性（自定义、固有均支持）：  -getAttribute('自定义id名')

    设置属性                        -setAttribute('id名',"vale")

    移除属性：          removeAttribut('属性名')    或者：box.class='';[将值设为空]

    元素.属性   一般只对固有属性进行操作。

    h5设置： data-自定义属性名  data=idx -->  但是获取自定义属性： box.dataset.idx [ie11开始支持]

                                                                box.dataset[idx]

        data-student-name='zs'  --->   采用驼峰访问

                         box.dataset[studentName]                                                            

jq

element

声明式编程

==============================================================================

    element.parentNode      父亲节点

    //获取html元素——父亲为 #document  [document无上一级，返回null]

    var oHtml = document.documentElement

                document.html

    //不同浏览器兼容性问题：考虑版本问题【完全跟金融领域，又是另一种思维】或者期本质一样，不同金融工具

    //孩子节点 a instanceof Array:并不是数组，只是类数组对象

    ul.childNodes   //注意：包含所有儿子：文本、li、注释、回车换行{

        即： 其长度问题注意！

        ele.nodeType : {

            1:li，元素节点

            3:文本节点，回车换行

            8:注释节点

        }

    }

    // children属性：得到元素的所有子元素-->具体定位某个节点     重点掌握：得到元素的所有元素子节点

    ul.children.length

    // firstChild : 所有孩子的第一个节点【所有儿子包括文本节点中选择第一个】 --- lastChild

    // firstElementChild : ie9+以后支持，

==============================================================================

删除元素：