DOM、BOM

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删除

BOM

window对象

窗口位置
    screenLeft 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF浏览器
    screen Top 返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器
    screenX 功能screenLeft,兼容FF
    screenY功能同screenTop,兼容FF
窗口大小（IE9一下不兼容）
    innerWidth 返回网页在当前窗口中可见部分的宽度，包含滚动条宽度
    innerHeight 返回网页在当前窗口中可见部分的高度，包含滚动条高度
    outerWidth 返回浏览器窗口宽度，包含浏览器菜单和边框
    outerHeight 返回浏览器窗口的高度，包含浏览器菜单和边框
打开窗口
    window.open()
        打开一个新的浏览器窗口，接受四个参数
（URL/打开方式/窗口函数/是否取代当前页面历史记录的布尔值）
        第三个参数示例
            width=500,height=500
    window.close()
        关闭新打开的窗口（仅限open()打开的窗口）

window子对象

screen对象
    功能:包含显示设备的信息
    个别属性列举：
        screen.height、screen.width返回设备的分辨率
        screen.availWidth、screen.availHeight返回屏幕可用宽高，值为屏幕实际大小减去操作系统某些功能占据的空间，如系统任务栏
location对象
    功能
        保存当前文档信息、将URL解析为独立片段
    属性
        href
            返回当前页面完整的URL
            修改这个属性，即跳转新页面
        hash
            返回URL中的hash(#号后跟零或多个字符)
        host
            返回服务器名称的端口号
        port
            返回服务器端口号
        pathname
            返回URL中的目录和文件名
        hostname
            返回不带端口号的服务器名称
        protocol
            返回页面使用的协议(http://或https://)
        search
            返回URL的查询字符串，字符串以问号开头
navigator对象
    提供一系列属性用于检测浏览器
    onLine
        是否联网
    userAgent
        浏览器嗅探
        检测浏览器的类型
history对象
    功能：保存用户上网的历史记录
    方法、属性：
        go()在用户历史记录中任意跳转，接受一个参数，表示前后跳转页数的整数值（后退一页-1，前进一页1）,也可传字符串参数，跳转到第一个包含该字符串的位置
        back()后退
        forward()后退
        length属性保存历史记录的数量