超级实习生学习打卡——DOM

DOM
概述：DOM是将文档（页面）表现为结构化的表示方法、 使每一个页面元素都是可操控，DOM将网页和脚本以及其他的编程语言联系了起来。

增
新建
    创建元素节点
        createElement(标签名)
    直接设置属性
        setAttribute(name,value)
    cloneNude(true、false)
        true包含子节点
        false 不包含

插入
    拼接节点
        appendChild()
    插入节点
        insertBefore(new,old)

删
删除子节点
    removeChild()

删除属性节点
    removeAttributeNode()

改
替换节点
    需要用父级来调用
        replaceChild(new,old)

修改属性值
    setAttribute()

查
getElementById()
    通过id名称获取元素
    返回类数组集合
getElementsByTagName()
    通过标签名获取元素
    返回类数组集合
getElementsByClassName()
    通过class名获取元素
    返回类数组集合
    ie6,ie7不适用
getElementsByName()
    表单常用,通过表单的name名获取元素
    返回类数组集合
querySelector()
    新的ECMA6标准
    通过CSS选择器获取元素
    返回匹配元素
querySelectorAll()
    新的ECMA6标准
    通过CSS选择器获取元素
    返回类数组集合
获取下一个兄弟节点
    nextSibling
        有兼容问题，ie9以上及safari、chrome、firefox会将后边的换行部分作为节点进行处理
        可以使用nodeType来查看节点类型
        nodeType返回值
            1.元素节点
            2.属性节点
            3.文本节点
            8注释
        兼容使用
            dEl.nextSibling.nodeType==1?dEl.nextSibling:dEl.nextSibling.nextSibling
    nextElementSibing
        可以忽略文档节点，只获取元素节点，但是，ie6,7,8不认
获取上一个兄弟节点
    previousSibling
        同上 兼容使用
            dEl.previousSibling.nodeType==1?dEl.previousSibling:dEl.previousSibling.previousSibling;
    previousElementSibling
        直接获取元素节点，问题同上
获取子节点
    第一个子节点
        firstChild
            ie6,7,8没问题，现代浏览器有问题
        fistElementChild
            ie6,7,8不兼容
        判断当前浏览器的版本
    最后一个子节点
        lastChild
        lastElementChild
        问题同上
    获取子节点
        childNodes
            会获取非元素类型的子节点
        pro children
            获取元素子节点，没有兼容问题
            推荐使用
获取父节点
    pro parentNode
获取节点后的操作
    1.通过点语法调用标签属性
    2.通过style属性 控制样式
    3.通过classList控制样式
        add(class1,class2,......)   添加类名
        remove(class1,class2,.....)  删除类名
        replace(oldClass,newClass) 替换类名
        contains(class)  是否包含某个类名，返回布尔值
        toggle(class,true|false)
            如果类名存在就删除，不存在就添加，第二个参数代表强制，ture添加，false删除