js关于DOM和BOM
关于BOM和DOM
BOM
下面一幅图很好的说明了BOM和DOM的关系
BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和关闭窗口,弹出对话框,进行导航以及获取客户的一些信息如:浏览器品牌版本,屏幕分辨率。但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象,以使得我们可以通过这个入口来使用DOM的强大功能!!!
window对象是BOM中所有对象的核心。window对象表示整个浏览器窗口,但不必表示其中包含的内容。此外,window还可用于移动或调整它表示的浏览器的大小,或者对它产生其他影响。JavaScript中的任何一个全局函数或变量都是window的属性!!!!!!!!!!
window对象关系属性
- parent:如果当前窗口为frame,指向包含该frame的窗口的frame (frame)
- self :指向当前的window对象,与window同意。 (window对象)
- top :如果当前窗口为frame,指向包含该frame的top-level的window对象
- window :指向当前的window对象,与self同意。
- opener :当窗口是用javascript打开时,指向打开它的那人窗口(开启者)
window对象定位属性
IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置,但未提供任何判断窗口大小的方法。用document.body.offsetWidth和document.body. offsetHeight属性可以获取视口的大小(显示HTML页的区域),但它们不是标准属性。Mozilla提供window.screenX和window.screenY属性判断窗口的位置。它还提供了window.innerWidth和window.innerHeight属性来判断视口的大小,window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。
window对象的方法
窗体控制
moveBy(x,y)——从当前位置水平移动窗体x个像素,垂直移动窗体y个像素,x为负数,将向左移动窗体,y为负数,将向上移动窗体
moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点,当使用负数做为参数时会吧窗体移出屏幕的可视区域
resizeBy(w,h)——相对窗体当前的大小,宽度调整w个像素,高度调整h个像素。如果参数为负值,将缩小窗体,反之扩大窗体
resizeTo(w,h)——把窗体宽度调整为w个像素,高度调整为h个像素窗体滚动轴控制
scrollTo(x,y)——在窗体中如果有滚动条,将横向滚动条移动到相对于窗体宽度为x个像素的位置,将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollBy(x,y)—— 如果有滚动条,将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素),将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)窗体焦点控制
focus()—— 使窗体或控件获取焦点blur()——与focus函数相反,使窗体或控件失去焦点新建窗体
open()——打开(弹出)一个新的窗体
window.open(url, name, features, replace);
open方法参数说明
url -- 要载入窗体的URL
name -- 新建窗体的名称(目标,将在a 标签的target属性中用到,当与已有窗体名称相同时将覆盖窗体内容).open函数默认的打开窗体的方式为target的_blank弹出方式,因此页面都将以弹出的方式打开
features -- 代表窗体特性的字符串,字符串中每个特性使用逗号分隔
replace -- 一个布尔值,说明新载入的页面是否替换当前载入的页面,此参数通常不用指定
open函数features参数说明,如果不使用第三个参数,将打开一个新的普通窗口
参数名称 | 类型 | 说明 |
---|---|---|
height | Number | 设置窗体的高度,不能小于100 |
left | Number | 说明创建窗体的左坐标,不能为负值 |
location | Boolean | 窗体是否显示地址栏,默认值为no |
resizable | Boolean | 窗体是否允许通过拖动边线调整大小,默认值为no |
scrollbars | Boolean | 窗体中内部超出窗口可视范围时是否允许拖动,默认值为no |
toolbar | Boolean | 窗体是否显示工具栏,默认值为no |
top | Number | 说明创建窗体的上坐标,不能为负值 |
status | Boolean | 窗体是否显示状态栏,默认值为no |
width | Number | 创建窗体的宽度,不能小于100 |
特性字符串中的每个特性使用逗号分隔,每个特性之间不允许有空格
open方法返回值为一个新窗体的window对象的引用
close()——关闭窗体opener属性——新建窗体中对父窗体的引用,中文"开启者"的意思
- 对话框
- alert(str)—— 弹出消息对话框(对话框中有一个“确定”按钮)
- confirm(str)—— 弹出消息对话框(对话框中包含一个“确定”按钮与“取消”按钮)
- prompt(str,defaultValue)——弹出消息对话框(对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框),由于各个浏览器实现的不同,若没有第二个参数(文本框中的默认值)时也最好提供一个空字符串
- 状态栏
- window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时),浏览器底部的区域称为状态栏,用于向用户显示信息
- window.status 属性——临时改变浏览器状态栏的显示
- 时间等待与间隔函数
- setTimeout()—— 暂停指定的毫秒数后执行指定的代码
- clearTimeout()——取消指定的setTimeout函数将要执行的代码
- setInterval()——间隔指定的毫秒数不停地执行指定的代码
- clearInterval()——取消指定的setInterval函数将要执行的代码
setTimeout与setInterval方法有两个参数,第一个参数可以为字符串形式的代码,也可以是函数引用,第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID
var tid = setTimeout("alert('1')",1000);
alert(tid);
clearTimeout(tid);
History对象,在浏览器历史记录中导航
History 对象的属性:length 返回浏览器历史列表中的 URL 数量
History 对象的方法
- back() 加载 history 列表中的前一个 URL
- forward() 加载 history 列表中的下一个 URL
- go(num) 加载 history 列表中的某个具体页面
Location 对象
Location 对象的属性
- hash 设置或返回从井号 (#) 开始的 URL(锚)
- host 设置或返回主机名和当前 URL 的端口号
- hostname 设置或返回当前 URL 的主机名
- href 设置或返回完整的 URL
- pathname 设置或返回当前 URL 的路径部分
- port 设置或返回当前 URL 的端口号
- protocol 设置或返回当前 URL 的协议
- search 设置或返回从问号 (?) 开始的 URL(查询部分)
Location 对象的方法
- assign() 加载新的文档,这与直接将一个URL赋值给Location对象的href属性效果是一样的
- reload()重新加载当前文档,如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
- replace() 用新的文档替换当前文档,replace() 方法不会在 History 对象中生成一个新的纪录。当使用该方法时,新的 URL 将覆盖 History 对象中的当前纪录。
Navigator对象
Navigator 对象的属性
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
- browserLanguage 返回当前浏览器的语言
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
- cpuClass 返回浏览器系统的 CPU 等级
- onLine 返回指明系统是否处于脱机模式的布尔值
- platform 返回运行浏览器的操作系统平台
- systemLanguage 返回 OS 使用的默认语言
- userAgent 返回由客户机发送服务器的 user-agent 头部的值
- userLanguage 返回 OS 的自然语言设置
框架与多窗口通信
子窗口与父窗口
只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中,可以通过window.open方法的返回值来访问打开的窗口!
框架
window.frames集合:在框架集或包含iframe标签的页面中,frames集合包含了对有框架中窗口的引用
alert(frames.length);//框架的数目
alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用
//不但可以使用下标,还可以使用frame标签的name属性
alert(frames["frame1"].document.title);
在框架集中还可以使用ID来获取子窗口的引用
var frame1 =document.getElementById("frame1");//这样只是获取了标签
var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用
//还可以直接获取框架中document的引用
var frameDoc = frame1.contentDocument;
alert(frameDoc);//但IE不支持contentDocument属性
子窗口访问父窗口——window对象的parent属性
子窗口访问顶层——window对象的top属性
浏览器检测
市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天。历史上已经有不少方法来解决浏览器兼容问题了,主要分为两种:1.userAgent字符串检测,2.对象检测;当然,也不能考虑所有的浏览器,我们需要按照客户需求来,如果可以确信浏览网站的用户都使用或大部分使用IE浏览器,那么你大可放心的使用IE专有的那些丰富的扩展,当然,一旦用户开始转向另一个浏览,那么痛苦的日子便开始了。下面是市场上的主流浏览器列表:
- Internet Explorer
- Mozilla Firefox
- Google Chrome
- Opera
- Safari
注意,浏览器总是不断更新,我们不但要为多种浏览器作兼容处理,还要对同一浏览器多个版本作兼容处理。比如IE浏览器,其6.0版本和7.0版本都很流行,因为微软IE随着操作系统绑定安装(之前也是同步发行,微软平均每两年推出一款个人桌面,同样IE也每两年更新一次;直到现在,由于火狐的流行,IE工作组才加快IE的更新),所以更新的较慢,6.0版和7.0版有很大差别。
市场上还存在一些其它浏览器,但由于它们都是使用的上面所列浏览器的核心,或与上面浏览器使用了相同的解释引擎,所以无需多作考虑。下面是主流的浏览器解释引擎列表:
利用userAgent检测
下面是各大浏览器使用弹窗显示的userAgent字符串
IE浏览器:Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 2.0.50727)
火狐浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.0.4) Gecko/2008102920 Firefox/3.0.4
Opera浏览器:Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1
Safari浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
Google Chrome浏览器:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/530.5 (KHTML, like Gecko) Chrome/2.0.172.33 Safari/530.5
可以使用下面的代码进行浏览器检测
var Browser = {
isIE:navigator.userAgent.indexOf("MSIE")!=-1,
isFF:navigator.userAgent.indexOf("Firefox")!=-1,
isOpera:navigator.userAgent.indexOf("Opera")!=-1,
isSafari:navigator.userAgent.indexOf("Safari")!=-1
};
但这样做并不是万无一失的,一个特例便是Opera可以使用userAgent伪装自己。下面是伪装成IE的userAgent:Mozilla/5.0 (Windows NT 5.1; U; Edition IBIS; zh-cn; rv:1.8.1) Gecko/20061208 Firefox/2.0.0 Opera 9.64;在完全伪装的情况下,最后的“Opera 9.64”这个字符串也不会出现,但Opera也有特殊的识别自身的方法,它会自动声明一个opera全局变量!
不但如此,我们的检测还忽略了一点,就是那些使用相同引擎而品牌不同的浏览器,所以,直接检测浏览器是没有必要的,检测浏览器的解释引擎才是有必要的!
var Browser = {
isIE:navigator.userAgent.indexOf("MSIE")>-1 && !window.opera,
isGecko:navigator.userAgent.indexOf("Gecko")>-1 && !window.opera
&& navigator.userAgent.indexOf("KHTML") ==-1,
isKHTML:navigator.userAgent.indexOf("KHTML")>-1,
isOpera:navigator.userAgent.indexOf("Opera")>-1
};
DOM
document对象有三个强大的方法,可以获取页面的任何元素
1.document.getElementById("p1");//获取ID为p1的那个元素 2.document.getElementsByTagName("p");//获取文档中所有p标签 返回是一个集合
getElementsByTagName还可以使用通配符*来获取所有的元素
var allTags = document.getElementsByTagName("*");
更强大的是,getElementsByTagName不但可以在document对象上调用,也可以在其它HTML元素上调用
var p2 = document.getElementById("p2"); var p2ps = p2.getElementsByTagName("em");//将获取p2下面的em元素,而不获取p2之外的em 3.document.getElementsByName("check");//获取所有name为check的元素
由于name可以重复,getElementsByName方法始终返回一个集合,不管页面中name是否是唯一的。IE 6.0和Opera 7.5在这个方法的使用上还存在一些错误。首先,它们还会返回id等于给定名称的元素。第二,它们仅仅检查<input/>和<img/>元素。
转自 http://blog.csdn.net/x6587305x/article/details/7045285#t3
js关于DOM和BOM的更多相关文章
- day 52 js学习 DOM 和BOM
前戏 到目前为止,我们已经学过了JavaScript的一些简单的语法.但是这些简单的语法,并没有和浏览器有任何交互. 也就是我们还不能制作一些我们经常看到的网页的一些交互,我们需要继续学习BOM和DO ...
- JS中DOM以及BOM
一.bom对象 1screen对象 console.log(screen.width);// 屏幕宽度 console.log(screen.height);// 屏幕高度 console.log(s ...
- JS的DOM和BOM
* JavaScript分三个部分: ECMAScript标准:JS的基本的语法 DOM:Document Object Model --->文档对象模型----操作页面的元素 BOM:Brow ...
- js之 DOM与BOM
JavaScript HTML DOM (文档对象模型)(Document Object Model) 什么是DOM? DOM是W3C标准. DOM定义了访问文档的标准: “W3C文档对象模型(DOM ...
- JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前 言 絮叨絮叨 这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
- JS(DOM 和 BOM)
JS(DOM 和 BOM) 常说的JS(浏览器执行的JS)包含两部分:1.JS基础知识(语法)(ECMA262标准)2.JS-Web-API(W3C标准) W3C 标准中关于 JS 的规定有:(只管定 ...
- 前端(十六)—— JavaScript盒子模型、JS动画、DOM、BOM
JS盒子模型.JS动画.DOM.BOM 一.JS盒模型 1.width | height parseInt(getComputedStyle(ele, null).getPropertyValue(' ...
- js的DOM对象
1.js的Array对象 ** 创建数组(三种) - var arr1 = [1,2,3]; ...
- JS之DOM编程
为什么学dom编程? 通过dom编程,我们可以写出各种网页游戏 dom编程也是我们学习ajax技术的基础,所以我们必需掌握好dom编程. dom编程简介 DOM=Document Object Mo ...
随机推荐
- 高等数学(拉格朗日乘子法):NOI 2012 骑行川藏
[NOI2012] 骑行川藏 输入文件:bicycling.in 输出文件:bicycling.out 评测插件 时间限制:1 s 内存限制:128 MB NOI2012 Day1 Des ...
- 动态规划(模型转换):uvaoj 1625 Color Length
[PDF Link]题目点这里 这道题一眼就是动态规划,然而貌似并不好做. 如果不转换模型,状态是难以处理的. 巧妙地转化:不直接求一种字母头尾距离,而是拆开放到状态中. #include <i ...
- hihoCoder 1392 War Chess 【模拟】 (ACM-ICPC国际大学生程序设计竞赛北京赛区(2016)网络赛)
#1392 : War Chess 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 Rainbow loves to play kinds of War Chess gam ...
- 动态规划——概率dp
所谓概率dp,用动态规划的思想找到一个事件中可能发生的所有情况,然后找到符合要求的那些情况数,除以总数便可以得到符合要求的事件发生的概率.其核心思想还是通过dp来得到事件发生的所有情况,很类似在背包专 ...
- Break、continue、return用法(C++)
(1)break 直接调出当前循环体.如果是嵌套循环,他只能调出一层循环体. Exp-1: 程序: #include<iostream> using namespace std; int ...
- [转载]Linux服务器性能评估与优化
转载自:Linux服务器性能评估与优化 一.影响Linux服务器性能的因素 1. 操作系统级 CPU 内存 磁盘I/O带宽 网络I/O带宽 2. 程序应用级 二.系统性能评估标准 影响性 ...
- poj1065
题目大意: 木棍(好吧,承认确实做过这个题,嘎嘎) 有一堆木棍大约有n根,木棍的长度和重量都预先知道,这些木棍会在一个木工机械上一个接一个的处理,这需要一些时间,称为设置时间,为机械准备处理一根木头, ...
- Fiddler 模拟post 提交
在使用Fiddler 提交post表单的时候, 一定要加上以下code: Content-Type: application/x-www-form-urlencoded 意思为: 窗体数据被编码为名称 ...
- selenium webdriver启动IE浏览器失败的解决办法
通过selenium webdriver启动IE浏览器失败,报错:selenium.common.exceptions.WebDriverException: Message: Unexpected ...
- PHP学习之[第10讲]PHP 的 Mysql 数据库函数 (微型博客系统)II
mysql结构如下: -- phpMyAdmin SQL Dump -- version 4.4.1.1 -- http://www.phpmyadmin.net -- -- Host: localh ...