Bom和Dom

Browser Object Model

浏览器对象模型

非官方,无标准

只是个对浏览器API接口的统称

BOM提供的API都放到了window全局对象中

window代表了当前浏览器窗口

DOM属于BOM的一部分

 window.alert("你是傻逼")

window.prompt("你是傻逼吗")

以及窗口属性:

可以通过innerWidth和innerHeight来获取html页面部分的宽高

还可以通过open() 打开新窗口或选项卡

通过close()关闭新窗口或选项卡

Dom

 Document Object Model

文档对象模型

JS通过DOM控制html

浏览器将收到的html文件,通过解析器,构建出dom树,然后进行布局和绘制

dom树是一科倒长的大树

dom树是一个文档对象,文档对象里的每一个元素也可以看做一个对象,叫做节点

全部节点连起来,就是dom树

dom树是html的一个编程接口,JS可以通过dom树来控制html元素

另:dom树里不包括伪元素

原因:html里并没有相对应的伪元素,它们都是通过样式达到的效果,无法被js调用

强大的window

在全局作用域中,定义的所有变量和函数都是window的属性和方法

可用window直接调用,如:

 var count = 1;

        function add() {

            console.log(++count);

         }

         console.log(window.count);

         window.add();

js很多内置对象和函数,也是window的属性和方法

window.alert("警告");

        console.log(window.Math);

js中规定,window的属性和方法可以直接调用,省略window.

console.log(location);

使用js跳转页面,有如下几种方式

location.href = "http://www.baidu.com"(window.alert和这个的逻辑是连在一起的)

location.replace("http//www.baidu.com")

上面两个替换当前页面,没有历史记录

history.back()   返回历史记录的上一页

history.forward()    返回历史记录下一页

history.go(-1)    返回历史记录任意一页,1下一页,-1上一页

open("")   不关闭当前窗口,打开新窗口显示网页,但容易被浏览器拦截

用js刷新页面

location.reload()

location.href = ""

location.replace("")

history.go(0)

浏览器的领航员

navigator

面试题:如何解决浏览器兼容性问题

第一步:

console.log(navigator.userAgent)  可以获取浏览器信息

然后解决浏览器兼容性问题(其他以后再说)

如果在全局范围内调用this

console.log(this)

this指向的是window

所以用window调用的东西也可以用this调用