BOM和DOM
- 格式：docx
- 大小：43.94 KB
- 文档页数：4
一、什么是 BOM、什么是 DOM
BOM 即浏览器对象模型，主要用了访问一些和网页无关的浏览器功能。
如： window、location、navigator、screen、history 等对象。
DOM 即文档对象模型， 针对 HTML （或 XML） 文档的 API （应用程序编程接口） 。
描绘的一个层次化的节点树，开发人员可以添加、修改和删除页面的某一部分。
二、细说 BOM 对象 1、window 对象
window 对象表示浏览器的一个实例， 同时也是 ECMAScript 规定的 Global 对 象。
（Global ：所有在全局作用域中定义的属性和函数，都是 Global 对象的属 性。
在浏览器中 Global 对象实际上就是 window 对象实现的 ） 全局作用域(所有全局对象都可以通过 window 来访问)
varstr = "张三";function fun() { alert(str); }//全局对象都可以通过 window 的属性方式来访问 alert(window.str); window.fun();
弹出窗口
window.open("", "NewWin", "height=400,width=400"); 第三个参数还可能有的值如：
间歇调用和超时调用（setTimeout、setInterval） 我们都知道 javascript 是单线程的，但我们可以通过间歇调用和超时调用在特 定时间执行指定的代码。
间歇调用（setTimeout） 如： setTimeout(function() { alert("Hello world!"); }, 1000);//会在 1000 毫秒后执行 如果在间歇时间之前想要取消执行，我们可以
//设置超时调用 vartimeoutId = setTimeout(function() {
alert("Hello world!"); }, 1000);//注意：把它取消 clearTimeout(timeoutId);
同样我们也可以通过间歇调用模拟实现超时调用
function fun() { } fun();
//....这里可以实现某些逻辑
setTimeout(fun(), 100);
当然通过模拟的超时调用和实际的 setInterval 还是有区别的， 下面我们会分析。
超时调用（setInterval）
setInterval (function() { alert("Hello world!"); }, 1000);//每隔 1 秒 执行一遍 如果想要取消执行，我们可以
vari = 1;vartimeId = setInterval(function () { i++; //...这里可以执行某些逻辑 }, 1000);//每隔 1 秒 执行一遍 if (1 >= 100) { } clearInterval(timeId);//注意和取消间歇调用不一样（clearTimeout）
我们仔细看看上面的代码，如果说执行逻辑的部分的运行时间超过了间隔时间 （1000 毫秒）会是什么情况。
这里我们需要谨记 javascript 是当线程的。
不能说 到了 1000 又开启一个进程来执行循环，上一个进程接着执行正在运行的逻辑。
而 是到了 1000 毫秒后直接断开了正在执行的逻辑部分，开始执行下一次的调用。
当 然这肯定不是我们想要看到的情况。
所以，我们可以使用上面的 setTimeout 模拟 的超时调用，这样就是调用是中间逻辑执行时间不算，等到执行完成后，再等待间 隔时间接着执行下一次调用。
（所以， 在实际开发中， 我们也是建议使用 setTimeout 来模拟超时调用的）
2、location 对象
location 对象说来也是奇怪，它既是 window 的属性也是 document 属性，且 同时指向了同一个对象。
window 和 document 的关系：浏览器中的 html 成为了 document 对象，使 我们可以通过 javascript 来访问、操作 html 的元素。
且，documnet 对象是 window 对象的一部分，可以通过 window.document 属性来访问。
我们来看看 location 都有哪些属性：
有了上面这些属性，我们可以非常方便的修改 url，如：
//假设初始 URL 为 /WileyCDA///将 URL 修改为 "/WileyCDA/#section1"location.hash = "#section1";// 将 URL 修改为 "/WileyCDA/?q=javascript"location.search = "?q=javascript";//将 URL 修改为 "/WileyCDA/"location.hostname = "";// 将 URL 修改为 "/mydir/"location.pathname = "mydir";//将 URL 修改为 ":8080/WileyCDA/"location.port = 8080;
每次修改 location 的属性（ hash 除外），页面都会以新 URL 重新加载。
也 就是说，浏览器会生成一天后退的历史记录。
如果我们不想能够回退可以使用 replace（）方法，如： location.replace(""); 如此就不会有回退记录了。
除了 replace 方法外还有个比较重要的方法。
reload，用来刷新。
location.reload(); //重新加载（有可能从缓存中加载） location.reload(true); //重新加载（从服务器重新加载）也就是强制刷新
3、navigator 对象、screen 对象
navigator 对象主要用来识别客户端浏览器， 但是由于各类浏览器对 navigator 对象的实现各有不同，这里就不细分析了。
screen 对象基本上只用来表明客户端的能力，其中包括浏览器窗口外部的显示 器的信息，如像素宽度和高度等。
每种浏览器对其的支持程度也是不同的，这里也 不分析了。
5、history 对象
history 对象主要保存当前也网页的历史记录。
但出于安全考虑，程序员不能够 知道详细的 url。
我们可以得到或操作如下：
history.length//历史记录的数量 //后退一页 history.back();//前进一页 history.forward();
//后退一页 history.go(-1);//前进一页 history.go(1);//前进两页 history.go(2);
//跳转到最近的 页面 history.go("");//那么可能是前进 也可能是后退，如果历史记录中不存在 那么这个方法什么也不会做
。
