美文网首页
第七章:浏览器环境

第七章:浏览器环境

作者: a2ebcc3676c1 | 来源:发表于2017-06-08 11:47 被阅读3次

    本章主要包含以下内容:

    • BOM (Browser Object Model,即浏览器对象模型)
    • DOM (Document Object Model,即文档对象模型)
    • 浏览器事件
    • XMLHttpRequest对象
    7.3 BOM
    window

    BOM是页面以外事物所拥有的对象集合(即浏览器窗口和桌面屏幕)我们可以通过全局对象window来访问这些对象

    • window.navigator
      • navigator 是一个用于反映浏览器及其功能信息的对象
      • navigator.userAgent 用于识别不同的浏览器 (用户代理检测法)
      • 我们一般不用上面的方法判断浏览器版本,因为用户可以对该字符串进行修改
      • 用下面的方法判断功能在浏览器中是否可用
    if (typeof window.addEventListener === 'function') {
        // 可用
    } else {
        // 不可用
    }
    
    • window.location : 用于存储当前载入页面URL信息的对象

      • reload() : 重新载入
        • window.location.href = window.location.href;
        • location = location;
      • assign() : 加载链接,有历史记录
      • replace() : 加载链接,无历史记录
    • window.history : 允许我们以有限的权限操作同一个浏览器会话中的已访问页面

      • window.history.length : 查看之前访问了多少页面
      • history.forward(); : 前进
      • history.back(); : 后退
      • history.go(-1); : 正数为前进,负数为后退
    • window.frames : 当前页面中所有框架的集合

    window.frames === window;
    // true
    
    • frames 中每个元素都包含了一个页面,都有各自的window全局对象
    • 如果想访问iframe元素的window对象,如下:
    window.frames[0];
    window.frames[0].window;
    window.frames[0].window.frames;
    frames[0].window;
    frames[0];
    
    • window.top : 可以访问到当前最顶层页面
    • window.screen : 提供浏览器以外的环境信息
    availHeight:1093
    availLeft:0
    availTop:23
    availWidth:1920
    colorDepth:24
    height:1200
    orientation:ScreenOrientation
    pixelDepth:24
    width:1920
    
    • 其中,height指的是总分辨率,而 availHeight指的是出去系统菜单以外的子区域

    • window.open()/close() : 打开/关闭新的浏览器窗口

    • 弹窗

      • alert() : 提示,只有一个确定按钮
      • confirm() : 有两个选项 OKCancel,根据选择返回对应布尔值的结果
      • prompt() : 允许用户输入
        • Cancel 或 x图标 或 ESC退出,返回null
        • 没有输入点OK 或回车,返回""
        • 有输入点OK 或回车,返回输入的字符串
    • 计时器

      • window.setTimeout(a,2000) : 2秒后执行a , 返回id
        • clearTimeout(id); 取消计时器
      • window.setInterval(a,2000) : 每2秒执行一次a ,返回id
        • clearInterval(id); 取消计时器
    7.4 DOM
    • 节点
      • nodeType : 节点类型,有12种,分别用证书表示

        • 1 :元素
        • 2 :属性
        • 3 :文本
        • 9 :document
      • nodeName : 节点名称

      • nodeValue : 节点值

      • 根节点 :document.documentElement

      • hasChildNodes() : 检查是否有子节点

      • hasAttributes() : 检查是否有属性

      • 访问标签中的内容:

        • textContent : 只返回文本
        • innerHTML : 返回标签内的所有内容
      • 快速访问

        • getElementsByTagName()
        • getElementsByName()
        • getElementById()
        • getElementByClassName()
        • querySelector() : 通过css选择器的方式寻找元素
        • querySelectorAll()
      • 兄弟节点,body元素及收尾子节点

    document.body;
    document.body.nextSibling; // 下一个节点
    document.body.previousSibling; // 上一个节点
    document.body.firstChild; // 第一个节点
    document.body.lastChild; // 最后一个节点

    - 遍历`DOM`
    

    function walkDOM(n) {
    do {
    console.log(n);
    if (n.hasChildNodes()) {
    walkDOM(n.firstChild);
    }
    } while (n = n.previousSibling);
    }

    相关文章

      网友评论

          本文标题:第七章:浏览器环境

          本文链接:https://www.haomeiwen.com/subject/mvpzfxtx.html