09 BOM对象 DOM对象

//查看对象详细信息
console.dir();

.BOM Browser Object model 浏览器对象模型

BOM对象是没规范,每个浏览器厂商按照自己的理解去实现与用户交互的功能

• 1.浏览器窗口进行交互的对象，用于访问浏览器的功能
  操作浏览器对象的接口 前进,后退,刷新,历史记录
• 2.顶级对象是window

• 3. window对象的组成 (
     document 文档对象
     history 历史 (访问页面的历史记录)
     location 本地,url的相关信息
     screen 屏幕
     navigator 导航,浏览器的版本,操作系统的信息

     // 1.浏览器 ---请求---> 2服务器
     // 4.浏览器 <---响应--- 3.服务器提供资源
     )

3. DOM document object model 文档对象模型 doc遵循w3c的规范

DOM对象是BOM的子项

window的基本常用方法

        // alert() 确认框
        // confirm("你确定要删除吗?") true/false
        // prompt("请输入一个数");  返回字符串
        // setTimeout 延时器
        // clearTimeout 取消延时
        // setInterval()
        // clearInterval()

        // print() 调用浏览器的打印功能
        // open()  打开新的浏览器窗口
        // close() 关闭浏览器窗口

        //浏览器能不能操作磁盘上任何文件 不可以 

BOM方法

 //一个页面只有一个window对象
        //对象的组成有哪些?  属性 + 方法

        //google浏览器对于open,如果不是用户的交换行为
        //就会判断恶意广告
        // window.open("http://www.baidu.com");

        //single page web application SPA 单页面应用程序
        var oBtn = document.getElementById("btn");
        oBtn.onclick = function () {
            //_self
            //_blank
            //_parent
            //  window.open("http://www.baidu.com")
            // open("http://www.baidu.com", "新的子窗口",
            //     "height=300,width=300,left=100,top=300");

            // open("http://www.baidu.com", "_self",
            // "height=300,width=300,left=100,top=300");

            open("http://www.baidu.com", "_parent",
                "height=300,width=300,left=100,top=300");
        }

location对象

// window.location

        // console.log(location);

        //location url导航信息
        //属性 (重点)
        console.log(location.protocol); //http: 协议 http 80, https 443
        console.log(location.host);     // 主机 = 主机名称+端口  等价于域名 
        console.log(location.hostname); //主机名称 baidu.com
        console.log(location.port); //端口
        console.log(location.pathname);
        console.log(location.search); // ?name=abc&&pwd=123
        console.log(location.hash);  // #hash
        console.log(decodeURIComponent(location.pathname));


        //方法 跳转
        jump.onclick = function () {
            // location="http://www.baidu.com"
            // location.assign("http://qq.com")
            // location.replace("http://sina.com.cn")
            // location.href="http://1000phone.com"
            
            // location.reload(true) 强制刷新  

        }

history对象

back(); //加载 history 列表中的前一个 URL
forward();//加载 history 列表中的下一个 URL
go(); //-1;0;1

选择器:

1 document.getElementById() 根据id获取页面上1个dom对象
2 document.getElementsByClassName() 根据指定类名称获取页面上dom元素 多个
3 document.getElementsByTagName() 根据指定的标签名称获取页面上多个dom对象
4 docuemnt.getElementsByName() 在元素上必须指定一个name属性 (了解)h5新增
6 document.querySelectorAll() 支持类名称,支持id,支持属性选择器 返回多个
7 document.querySelector() 支持类名称,支持id,支持属性选择器 返回1个