作为前端这些你不能不知道--浏览器基础篇
来源:互联网 发布:地理所用数据 高分 编辑:程序博客网 时间:2024/06/16 15:53
浏览器对象BOM与 DOM
BOM 也就是浏览器对象模型(Browser Object Model)
先上图:
BOM ???
- BOM是Browser Object Model的简写,既浏览器对象模型。
- BOM由一系列对象组成,是访问、控制、修改客户端(浏览器)的属性的方法。
- BOM没有统一的标准(每种客户端都可以自定标准)。
- BOM的顶层是window对象(BOM对象模型见上图)。
DOM ???
- DOM是Document Object Model的简写,既文档对象模型。
- DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。
- DOM是跨平台与跨语言的。
- DOM用于XHTML、XML文档的应用程序接口(API)。
- DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。
- DOM标准是由w3c制定与维护的 。
- DOM的顶层是document对象。
window 对象:
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成 员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一
1. Window 尺寸
window.innerHeight // - 浏览器窗口的内部高度window.innerWidth // - 浏览器窗口的内部宽度var w=window.innerWidth//ie8 及其以下,下面写法兼容所有浏览器|| document.documentElement.clientWidth|| document.body.clientWidth;var h=window.innerHeight|| document.documentElement.clientHeight|| document.body.clientHeight;
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
window.navigator
window.navigator 对象包含有关访问者浏览器的信息。
<div id="navigator"></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("navigator").innerHTML=txt;</script>
window.location 对象
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
location.hash //如果URL包含#,该方法将返回该符号之后的内容location.host //服务器的名字(如www.mcdnf.com)location.hostname //通常等于host,有时会省略前面的wwwlocation.href //当前载入的页面的完整URLlocation.pathname //URL中的主机名后面的部分location.port //返回 web 主机的端口 (80 或 443)location.protocol //返回所使用的 web 协议(http:// 或 https://)location.search //执行GET请求的URL中的问号后面的部分(查询字符串)location.assign() //方法加载新的文档。location.assign('http://www.mcdnf.com/')//运行时当前页面会被替换为:http://www.mcdnf.comlocation.replace('http://www.mcdnf.com/') //同assign()方法一样,只不过从浏览器历史中删除包含脚本的页面,这样就不能通过浏览器的后退和前进按钮访问它。
window.document
属性
集合
事件
window.screen
screen对象可以获取某些关于屏幕的信息
screen.availWidth // 可用的屏幕宽度,以像素计。screen.availHeight // 可用的屏幕高度,以像素计。availHeight //窗口可以使用的屏幕的高度(以像素计),基路包括操作系统需要的空间availWidth //窗口可以使用的屏幕的宽度(以像素计)。colorDepth //用户表示颜色的位数,大多系统采用32位。
window.history
window.history 对象包含浏览器的历史。
history.back() //与在浏览器点击后退按钮相同history.forward() //与在浏览器中点击按钮向前相同
本文整理了一些常用的浏览器基础知识,可能大部分你都用过,也可能有些你很想用却不知道他是是么,算是工作经历中的积累,课可以说是笔记,有时候忘记了还可以打开看看.可能有的地方不全,或者错误的地方请及时指正。
参考文献:
http://www.w3cschool.com/
http://www.w3cschool.cn/
http://www.yiiyaa.net/?p=761
…我的博客地址http://www.mcdnf.com/2015/10/webBase_bom/
0 0
- 作为前端这些你不能不知道--浏览器基础篇
- 喜欢三国的您 不能不知道这些
- 你不能不知道的免费软件
- 搞IT,你不能不知道
- as3常识,你不能不知道
- 作为程序员,你知道这些顶级开发社区吗?
- 作为一名微信运营 你不可以不知道这些.....
- 作为java程序员,这些面试问题你一定要知道!
- 你不能不知道的经典问题
- 你不能不知道的经典问题
- 网站发外链,你不能不知道的事!
- 你不能不知道到的Hook!
- 你不能不知道到的Hook!
- 你不能不知道到的Hook!
- 你不能不知道的 经典历史典故
- 你不能不知道的演讲技巧
- 关于HTTP 你不能不知道的
- ARP协议 你不能不知道的
- 扩展欧几里德算法(附证明)
- 10个基于DOCKER的顶尖开发工具
- ios CAEmitterCells学习文档
- IOS--UIAlertViewDelegate对对话框的事件处理方法
- Elasticsearch集群入门2
- 作为前端这些你不能不知道--浏览器基础篇
- 安卓 OnLongClickListener接口简介 以及案例
- OpenS-CAD, a simple 2D CAD application
- java的接口
- linux sed指令 sed 's/^\n/&\n/g'
- 《WEB前端黑客技术揭秘》基础知识(一)
- bootstrap经验http://v3.bootcss.com/
- Objective-C新特性
- android robolectric 单元测试的简单使用