BOM 和DOM

BOM

1、BOM:浏览器对象模型（Browser Object Model）尚无正式标准；

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

3、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

4、其他 Window 方法
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

 

5、Window 属性
closed 属性可返回一个布尔值，该值声明了窗口是否已经关闭。该属性为只读。当浏览器窗口关闭时，表示该窗口的 Windows 对象并不会消失，它将继续存在，不过它的 closed 属性将设置为 true。
length 设置或返回窗口中的框架数量。
name 设置或返回窗口的名称。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。
self 返回对当前窗口的引用。等价于 Window 属性。

6、例子：
function Top(){
window.scrollTo(0,0);//回到顶部

}
function Byy(){
window.scrollBy(100,100)//滚动多少
}

7、History
length 返回浏览器历史列表中的 URL 数量。
History 对象方法
back() 加载 history 列表中的前一个 URL。
forward() 加载 history 列表中的下一个 URL。
go() 加载 history 列表中的某个具体页面。

8、Location 对象
Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
Location 对象方法

assign(URL) 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。
9、location.assgin(" 页面二 .html");//加载新文档
window.open("页面二 .html")//打开新浏览器窗口，没有历史记录
location.href="页面二 .html"//更改href地址
location.replace"页面二 .html"//打开新文档代替当前文档，不能回退

 

 

DOM

DOM：Document Object Model文档对象模型
HTML DOM：它是关于如何获取、修改、添加或删除HTML元素的标准。
1、HTML DOM 树
2、 document.write(document.all);//对文档中所有 HTML 元素的访问。
console.log(document.all[2])//返回第下标为2的元素meta
console.log(document.all["name2"])//返回name为name2的标签：img
console.log(document.forms.length+"forms")//返回form的个数：3forms
console.log(document.images.length+"images")//返回images的个数：1images
console.log(document.getElementById("div1"));//方法可返回对拥有指定 ID 的第一个对象的引用:<div name="name1" id="div1"></div>
console.log(document.getElementsByName("form1"));//方法可返回可返回带有指定名称的对象的集合:[form]
function getElements()
{
var x=document.getElementsByName("form1");
alert(x.length);//:2
}
getElements();
console.log(document.getElementsByTagName("form") );//可返回带有指定标签名的对象的集合,字符串可以不区分大小写,返回元素的顺序是它们在文档中的顺序:[form, form, form, form1: form, form3: form]
document.writeln("Hello World!","Hello World!","Hello World!");
document.getElementById("id").setAttribute("type","button");//setAttribute()把指定属性设置或更改为指定值。。
console.log( document.getElementsByTagName("form")[0].getAttribute("name"));//getAttribute() 方法返回指定属性名的属性值。
3、DOM 节点
根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

整个文档是一个文档节点
每个 HTML 元素是元素节点
HTML 元素内的文本是文本节点
每个 HTML 属性是属性节点
注释是注释节点
4、element.getAttribute() 返回元素节点的指定属性值。
eg：document.getElementsByTagName("a")[0].getAttribute("target");
element.setAttribute() 把指定属性设置或更改为指定值。
eg：document.getElementsByTagName("INPUT")[0].setAttribute("type","button");