原生JavaScript第五篇

原生js学习笔记5——BOM操作

 什么是BOM

  BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构,BOM由多个对象构成,其中代表浏览器窗口的window对象是BOM的顶层对象,其他对象都是该对象的子对象。

  目前主流浏览器介绍

  IE——11: 国内用得最多的IE浏览器,历来对W3C标准支持差。从IE10开始支持ES6标准;

  Sarafi:Apple的Mac系统自带的基于Webkit内核的浏览器,从OS X 10.7 Lion自带的6.1版本开始支持ES6,目前最新的OS X 10.10 Yosemite自带的Sarafi版本是8.x,早已支持ES6;

  Firefox:Mozilla自己研制的Gecko内核和JavaScript引擎OdinMonkey。早期的Firefox按版本发布,后来终于聪明地学习Chrome的做法进行自升级,时刻保持最新;

  移动设备上目前iOS和Android两大阵营分别主要使用Apple的Safari和Google的Chrome,由于两者都是Webkit核心,结果HTML5首先在手机上全面普及(桌面绝对是Microsoft拖了后腿),对JavaScript的标准支持也很好,最新版本均支持ES6。

  这里为什么没有说到360浏览器、搜狗浏览器呢?其实这一类浏览器只是在以上列举出来的浏览器的内核基础上,换了一个包装,添加了一些个性功能而已,本质上并没有什么区别。

  可以操作的BOM对象

  window对象

  所有浏览器都支持 window 对象。它表示浏览器窗口。

  所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

  全局变量是 window 对象的属性。

  全局函数是 window 对象的方法。

  甚至 HTML DOM 的 document 也是 window 对象的属性之一:

window.document.getElementById("header");

  与此相同:

document.getElementById("header");

  window尺寸

  有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。

  对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:

  window.innerHeight - 浏览器窗口的内部高度

  window.innerWidth - 浏览器窗口的内部宽度

  对于 Internet Explorer 8、7、6、5:

  document.documentElement.clientHeight

  document.documentElement.clientWidth

  或者

  document.body.clientHeight

  document.body.clientWidth

  实用的 JavaScript 方案(涵盖所有浏览器):

<!DOCTYPE html><html><body>

<p id="demo"></p>

<script>var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

x=document.getElementById("demo");

x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"</script>

</body></html>

  该例显示浏览器窗口的高度和宽度:(不包括工具栏/滚动条)

  除此之外,还有一个outerWidth和outerHeight属性,可以获取浏览器窗口的整个宽高。

  其他操作window方法(不常用)

  window.open() - 打开新窗口

  window.close() - 关闭当前窗口

  window.moveTo() - 移动当前窗口

  window.resizeTo() - 调整当前窗口的尺寸

  navigator

  navigator对象表示浏览器的信息,最常用的属性包括:

  navigator.appName:浏览器名称;

  navigator.appVersion:浏览器版本;

  navigator.language:浏览器设置的语言;

  navigator.platform:操作系统类型;

  navigator.userAgent:浏览器设定的User-Agent字符串。

  window.navigator 对象在编写时可不使用 window 这个前缀。

  示例:

<!DOCTYPE html><html><body><div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";

txt+= "<p>Browser Name: " + navigator.appName + "</p>";

txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";

txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";

txt+= "<p>Platform: " + navigator.platform + "</p>";

txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";

txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

</body></html>

  注意

  来自 navigator 对象的信息具有误导性,不应该被用于检测浏览器版本,这是因为:

  navigator 数据可被浏览器使用者更改

  浏览器无法报告晚于浏览器发布的新操作系统

  screen

  screen对象表示屏幕的信息,常用的属性有:

  screen.width:屏幕宽度,以像素为单位;

  screen.availWidth:屏幕的可用宽度,以像素为单位

  screen.height:屏幕高度,以像素为单位;

  screen.availHeight:屏幕的可用高度,以像素为单位

  screen.colorDepth:返回颜色位数,如8、16、24。

  window.screen 对象在编写时可以不使用 window 这个前缀。

<script type="text/javascript">document.write( "屏幕宽度:"+screen.width+"px<br />" );document.write( "屏幕高度:"+screen.height+"px<br />" );document.write( "屏幕可用宽度:"+screen.availWidth+"px<br />" );document.write( "屏幕可用高度:"+screen.availHeight+"px" );</script>

  Location

  location对象表示当前页面的URL信息。例如,一个完整的URL:

http://www.example.com:8080/path/index.html?a=1&b=2#TOP

  可以用location.href获取:

<script>

document.write(location.href);

</script>

  要获得URL各个部分的值,可以这么写:

location.protocol; // ‘http‘

location.host; // ‘www.example.com‘

location.port; // ‘8080‘

location.pathname; // ‘/path/index.html‘

location.search; // ‘?a=1&b=2‘

location.hash; // ‘TOP‘

  要加载一个新页面,可以调用location.assign()。如果要重新加载当前页面,调用location.reload()方法非常方便。

  示例:加载一个新页面

<!DOCTYPE html><html><head><script>function newDoc()

{

window.location.assign("http://www.w3school.com.cn")

}</script></head><body>

<input type="button" value="加载新文档" onclick="newDoc()">

</body></html>

  History

  history对象保存了浏览器的历史记录,JavaScript可以调用history对象的back()或forward (),相当于用户点击了浏览器的“后退”或“前进”按钮。

  History Back

  history.back() 方法加载历史列表中的前一个 URL。

  这与在浏览器中点击后退按钮是相同的:

<html><head><script>function goBack()

{

window.history.back()

}</script></head><body>

<input type="button" value="Back" onclick="goBack()">

</body></html>

  History Forward

  history forward() 方法加载历史列表中的下一个 URL。

  这与在浏览器中点击前进按钮是相同的:

<html><head><script>function goForward()

{

window.history.forward()

}</script></head><body>

<input type="button" value="Forward" onclick="goForward()">

</body></html>

  注意

  这个对象属于历史遗留对象,对于现代Web页面来说,由于大量使用AJAX和页面交互,简单粗暴地调用history.back()可能会让用户感到非常愤怒。

  新手开始设计Web页面时喜欢在登录页登录成功时调用history.back(),试图回到登录前的页面。这是一种错误的方法。

  任何情况,你都不应该使用history这个对象了。

  拓展

  系统对话框

  alert()警告框,没有返回值

  confirm(‘提问的内容‘)返回boolean

  prompt(),输入框,返回字符串或null

  window对象常用事件

  onload:当页面加载时

  onscroll:当页面滚动时

  onresize:页面重新定义大小时

时间: 2024-11-05 06:26:00

原生JavaScript第五篇的相关文章

原生JavaScript第七篇

原生js学习笔记7--本地存储之cookie操作 什么是cookie ? 用来保存页面信息的,如用户名.密码 ? cookie的特性:同一个网站中所有的页面共享一套cookie:数量.大小限制:过期时间 ? js中使用cookie:document.cookie 如何设置cookie? 在js中,使用document.cookie = "键=值"即可,但是这种方式设置的cookie由于没有添加过期时间,所以关闭浏览器,cookie就丢失,我们要在后边继续加上expires=时间设置上过

原生JavaScript第八篇

原生js学习笔记8--Ajax基础   什么是Ajax 不刷新页面的情况下从服务器获取.提交数据的一种数据交互方式. Ajax使用步骤 1.创建Ajax对象 var httpRequest = new XMLHttpRequset可以创建一个Ajax请求对象. 注意:浏览器的兼容问题 IE6以及之前的IE不支持上边的创建爱你方法,这些版本的浏览器并没有集成Ajax,而是当做一个插件来处理,所以在创建时需要做兼容性处理: if (window.XMLHttpRequest) { xmlHttp =

原生JavaScript第六篇

原生js学习笔记6--事件 事件对象 鼠标事件 event.clientX在可视区中,鼠标点击的x坐标 event.clientY在可视区中,鼠标点击的y坐标 示例: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/jav

原生JavaScript第四篇

原生js学习笔记4--BOM操作 什么是DOM DOM:Do 1. js的组成部分 2. 一套标准,目前有DOM1和DOM2这两种标准 我们可以使用DOM操作来操作页面中的元素. DOM节点 子节点 ? childNode:返回值一个数组,放的是父节点中所有的子节点 ? nodeType:返回值是一个数组,1表示元素节点,3表示文本节点 在某些浏览器中,如火狐,使用childNode获取所有元素节点时会把空格等一起或取出来,此时就需要使用nodeType来判断. 示例: <!DOCTYPE ht

原生JavaScript第三篇

原生js学习笔记3--数组 定义数组 两种方式定义一个数组: 1. var array1 = new array(1, 2, 3, 4); 2. var array2 = [1, 2, 3, 4]; 数组元素的插入删除 ? push(元素):从尾部添加新元素 ? unshift(元素): 从头部添加新元素 ? pop(),从尾部弹出元素 ? shift(),从头部弹出元素 从某个位置连续删除若干个元素 splice(起始位置,长度)该方法从起始位置开始,删除长度个元素 数组元素的插入插入若干个元

原生JavaScript运动功能系列(五):定时定点运动

原生JavaScript运动功能系列(一):运动功能剖析与匀速运动实现 原生JavaScript运动功能系列(二):缓冲运动 原生JavaScript运动功能系列(三):多物体多值运动 原生JavaScript运动功能系列(四):多物体多值链式运动 这篇博客剖析一个问题,就是怎么实现将元素指定时间运动到目标位置?前面的博客都是在处理运动行为,没有对运动时间做任何限定,只是因为清晰的分析运动行为和实现原理,要想一个动画函数具备健全的功能,并且可以随意使用,通过参数设定动画执行时间是非常有必要的一个

原生JavaScript技巧大收集(11~20)-(终于又被我找到这篇文章了)

11.原生JavaScript加入收藏夹 function AddFavorite(sURL, sTitle) { try { window.external.addFavorite(sURL, sTitle) } catch(e) { try { window.sidebar.addPanel(sTitle, sURL, "") } catch(e) { alert("加入收藏失败,请使用Ctrl+D进行添加") } } }   12.原生JavaScript设为

第十五篇:JavaScript 之 Dom操作

一.后台管理页面布局 二.JavaScript函数 三.eval以及时间操作 四.JavaScript作用域 五.JavaScript面向对象模型 六.DOM选择器 七.DOM事件操作 八.DOM绑定事件的分离绑定方法 原文地址:https://www.cnblogs.com/hanfuming/p/8359285.html

使用原生JavaScript实现对select增加option标签并附加value属性

好久没有写原生的东西了,今天写了一个小项目里面包含着option选项,所以我决定使用原生JavaScript动态生成, 本着互联网分享精神,我将本篇文章分享给大家. html代码(就是一个select) <select name="" id="reg-select"></select> json数据 var json = [ { "cc": "86", "code": "C