BOM小操作

BOM操作

javascript 技术下包含：ecmascript , dom , bom . 现在来了解一下dom操作

• BOM 的意思就是浏览器对象模型，全称为：Brower Object Model , 其下有四个属性：

  • window
  • navigator
  • location
  • screen
  • history
  • document

windows

我们在控制台打印 console.log(windows) ，控制台会输出很多属性，事实上，navigator ， location ， screen ， history ， document 这几个属性也是 window 下的属性。

来看看几个小例子：

btn.onclick=function(){
    window.open("https://www.baidu.com")
}

在上面的代码中，点击按钮，会在浏览器的新窗口内打开百度的首页。

btn.onclick=function(){
    window.open("https://www.baidu.com","_self")
}

如上，点击按钮之后，会在当前浏览器窗口打开百度首页。

window.open()的默认属性为 _blank ，即在新窗口打开新页面。
window.close()是用来关闭又程序打开的新窗口，直接在地址栏输入地址打开的页面不适用。

系统对话框

系统对话框有如下三种类型：

• alert 弹出框
• confirm 确认对话框
• prompt 提醒对话框，含有一个输入框

alert

confirm

promit

• 输入框内也可以设置默认显示的文字，只需要写两个参数就行了。

Navigator 对象包含有关浏览器的信息

Navigator 属性

appCodeName  返回浏览器的代码名
appMinorVersion  返回浏览器的次级版本
appName  返回浏览器的名称
appVersion  返回浏览器的平台和版本信息
browserLanguage  返回当前浏览器的语言
cookieEnabled  返回知名浏览器中是否启用cookie的布尔值
cpuClass  返回浏览器系统的CPU等级
onLine : 返回致命系统是否处于脱机模式的布尔值
platform  返回运行浏览器的操作系统平台
userAgent  返回浏览器版本等信息

loaction 包含有关当前ulr的信息

loaction 属性

hash  设置返回哈希值，以(#)开头的字符
host  设置或返回主机名和当前url的端口号
hostname  设置或返回当前ulr的主机名
href  设置或返回完整的url
pathname  设置或返回当前url的路径部分
port  设置或返回当前url的端口号
protocol  设置或返回当前的url的协议
search  设置或返回从(?)开始的url

location 方法

assign()  加载新的文档
reload()  重新加载当前文档
replace()  用新的文档替换当前文档

screen 对象包含有关客户端显示屏幕的信息

screen 属性

availHeight  返回显示屏幕的高度 (除 Windows 任务栏之外)
availWidth  返回显示屏幕的宽度 (除 Windows 任务栏之外)
bufferDepth  设置或返回调色板的比特深度。
colorDepth  返回目标设备或缓冲器上的调色板的比特深度
deviceXDPI  返回显示屏幕的每英寸水平点数
deviceYDPI  返回显示屏幕的每英寸垂直点数。
fontSmoothingEnabled : 返回用户是否在显示控制面板中启用了字体平滑
height : 返回显示屏幕的高度。
logicalXDPI  返回显示屏幕每英寸的水平方向的常规点数
logicalYDPI  返回显示屏幕每英寸的垂直方向的常规点数。
pixelDepth    返回显示屏幕的颜色分辨率（比特每像素）。
updateInterval    设置或返回屏幕的刷新率。
width    返回显示器屏幕的宽度。

history 对象包含用户（在浏览器窗口中）访问过的 URL。

history 属性

length  返回浏览器历史列表中的 URL 数量。

history 方法

back()  加载 history 列表中的前一个 URL。
forward()  加载 history 列表中的下一个 URL。
go()  加载 history 列表中的某个具体页面。

下面这段代码也能执行后退操作

history.go(-2)//执行两次后退

如果给定正值，则为前进

document 文档

btn.onclick=function(){
    var a = window.open('');
    a.document.write("hello world")
}

在如上代码中，点击按钮可以在新的窗口显示hello world。