BOM对象

2017-09-16  本文已影响0人  流着万条永远的河

现在学到的JS算是种语言,是工具,运行环境可以是浏览器,可以不是浏览器,只要符合它的语言环境的平台,就可以用。
放到浏览器上,JS就跟数组产生了关联了,用JS操作当前document里的element了,也就是用户当前打开页面的东西,所以叫DOM的文档对象模型了,文档就是document,document就是当前页面根节点。
这时候,浏览器本身也有自己的特性,位置,大小,宽高,当前系统环境,,,这些就是BOM,跟页面没关啊,跟当前的window相关。

BOM

它的核心是window对象,表示浏览器的一个实例。
全局变量都是window对象的一个属性。

var a =1
undefined
window.a
1       //document也就是window.document,声明的函数也是。

window对象属性

window.innerHeight,window.innerWidth

页面css布局占据浏览器窗口的宽高,单位是像素,包括滚动条的占地。

scrollX,scrollY

滚动条的横向,竖向偏移。

scrollTo,scrollBy,scroll

window.scrollTo(0,300)     //滚动条移动到300px处,参数分别是水平,垂直上的偏移,scroll也可以达到效果。
window.scrollBy(0,100)   //下移100px,相对当前来算。

window.frames

返回类数组对象,成员是页面内所有的框架,包括frame 元素、frame元素。

navigator

指向包含浏览器相关信息的对象。

如图:
userAgent    //当前用户代理是什么东西:当前页面是什么工具看的,手机浏览器,微信,,,
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/59.0.3071.115 Safari/537.36"

在ipad pro上:
navigator.userAgent
"Mozilla/5.0 (iPad; CPU OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"

online    //是否在线

screen

screen.height
screen.width    //设备 不是浏览器
的宽高,像素单位。

window.getComputedStyle

var style =window.getComputedStyle('yuansu','伪类')
//没伪类,就不用写第二个参数。
var div=document.getElementById('text')
console.log(getComputedStyle(div).width)

URL编码

四种方法:

location.href
"https://zh.wikipedia.org/wiki/%E5%89%8D%E7%AB%AF%E5%92%8C%E5%90%8E%E7%AB%AF"
//实际URL: https://zh.wikipedia.org/wiki/前端和后端
//自动地做了encodeURL,把URL进行了编码,尤其是汉字,特殊字符空格等,
但是不对这些编码:1. ASCII字母
2. 数字
3. ~!@#$&*()=:/,;?+'


encodeURIComponent(location.href)
"https%3A%2F%2Fzh.wikipedia.org%2Fwiki%2F%25E5%2589%258D%25E7%25AB%25AF%25E5%2592%258C%25E5%2590%258E%25E7%25AB%25AF"
//这样绝对不会分不出拼起来的两个URL的。

有什么用呢?比如说打开淘宝,会先自动跳转到登录界面,登录了,会自动跳到淘宝首页。这时候,后台会检测请求,并是否登录了,没登陆,就会进入一个跳转页面比如说:
aliyun.com/login?redirect=刚刚请求的URL
登录成功后,后台会解析这上面这个,然后再跳转,这时候解析上面的会经常出现一些歧义,不知道字符是属于哪个URL的。所以对URL编码,把特殊符号全编码,这样就区分开了,然后再登录,再把编码转回来,再跳转。

encodeURIComponent()不会对下面字符编码:

  1. ASCII字母
  2. 数字
  3. ~!*()'

alert(),prompt().confirm()

比较老,比较丑。弹出提示框。

BOM的意思是什么呢?就是浏览器的一种运行环境,运行的机制和属性了,正好区别于前面学到的JS的太过文档性了,它存在于浏览器中,而不是依赖于外部的加载的文件了哦。

上一篇下一篇

猜你喜欢

热点阅读