JavaScript BOM其他对象

screen对象

availWidth	显示器屏幕可用宽度，除任务栏外
availHeight	显示器屏幕可用高度，除任务栏外
Width	实际宽
Height	实际高

location对象

对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。

 

属性	描述
hash	表示URL地址中的锚点部分，包括前导符“#”。可读可写
host	表示URL中的主机名和端口，即IP地址或者域名端口，可读可写
hostname	表示URL中的主机名部分。可读可写
href	表示当前页面完整的URL地址，可读可写。
pathname	表示URL中的页面路径部分，包含页面文件名称，可读可写
port	表示URL地址中的端口部分，可读可写
protocol	表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http:
search	表示URL中的参数部分，可读可写。如：?name=mary
方法	描述
assign()	该方法为浏览器指定新的URL地址，与设置href属性的值相同。该方法同样会在history对象的浏览列表中增加一条记录。
replace()	replace()方法所做的操作与assign()方法一样， 但它多了一步操作，即从浏览器的历史记录中删除了包含脚本的页面， 这样就不能通过浏览器的后退按钮和前进按钮来访问它了， assign()方法却可以通过后退按钮来访问上个页面， 如：location.replace(“http://www.sina.com.cn”);
reload()	用于刷新当前文档 。 location.reload()刷新页面：相当于按F5键  默认false location.reload(false)   刷新页面：相当于按F5键   location.reload(true)    强制刷新页：shift+F5键

history对象

该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。

length	整数值，表示浏览器历史列表中的URL的个数
back()	返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同
forward()	前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同
go(1)	访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。

navigator对象

该对象提供有关浏览器的各种信息，所有浏览器都支持该对象

userAgent	返回由客户机发送服务器的 user-agent 头部的值。
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值。

DOM文档对象 

DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。

W3C DOM提供了一套用于HTML和XML文档的标准对象，以及访问这些文档的标准接口(方法)。

DOM与具体的编程语言无关，可以在C、JavaScript、ActionScript、Java等语言中实现。

DOM分类

DOM可分为三个部分

核心DOM：是用于XML与HTML的共用接口； （操作节点树，如创建，删除，查找等）

XML DOM：XML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口； (操作XML文档文件)

HTML DOM：HTML专用接口，其实就是DOM进行增强，加入了一些适用于自己的接口；(HTML DOM适合操作属性，如读取或修改属性的值)

HTML节点树

HTML文档是一种树状的结构化文档、各标记之间是一种树状的层次关系。

 

 

节点：
   *  由结构图中我们可以看到，整个文档就是一个文档节点。 document
   *  而每一个HTML标签都是一个元素节点。 element 
   *  标签中的文字则是文本节点(回车，空格也是文本节点)。Text
   *  标签的属性是属性节点。 Attribute
   *  一切都是节点……  Node
 DOM 是针对xml(html)的基于树的API。
 DOM树:节点（node）的层次。
 DOM 把一个文档表示为一棵家谱树（父，子，兄弟）
 DOM定义了Node的接口以及许多种节点类型来表示XML节点的多个方面

节点树

     节点树的概念从图中一目了然，最上面的就是“树根”了。节点之间有父子关系，祖先与子孙关系，兄妹关系。这些关系从图中也很好看出来，直接连线的就是父子关系了。而有一个父亲的就是兄妹关系……

HTML  DOM

HTML DOM为HTML文档定义了一些专用的接口，称为HTML DOM，这些接口使对HTML文档的访问与操作更加方便。

HTML DOM访问HTML元素更方便的特性

一个HTML标记对应一个相应类型的元素对象(Element Object)，如<img>标记对应一个image对象；

HTML标记的属性对应于元素对象的一个同名属性。例如id_img.src=“images/01.jpg”

可以直接通过HTML标记的id属性的值访问标记对应的元素对象。

HTML DOM中提供的现成的对象来访问到里面的元素

 

HTML DOM中访问HTML元素方法

使用getElementById()方法

功能：在文档中查找指定的id节点，如果找到则返回该节点

例如：var id_img=document.getElementById(“id_img”)

说明：所有浏览器都支持。

getElementsByTagName()

功能：返回带有指定标签名的对象的数组

例如：var list=ulObj.getElementsByTagName(“li”)

说明：节点列表length属性表示了节点列表中节点的个数

getElementsByName()

功能：返回带有指定名字（name）对象的数组

例如：var hobby=document.getElementsByName(“hobby”)
<input type=”radio” vlaue=”写代码” name=”hobby”/>
<input type=”radio” vlaue=”玩游戏” name=”hobby”/>
<input type=”radio” vlaue=”看小说” name=”hobby”/>

getElementsByClassName(类名)

功能：返回带有指定类名（className）对象的数组

例如：
	var box = obj.getElementsByClassName(‘box’);
	<div class=”box”></div>
<div class=”box”></div>
<div class=”box”></div>

快速访问方式

通过 name属性访问
•在表单中，可以通过name属性进行访问。
•例如：document.myform.username.value
注意：主要是访问表单中的元素
通过元素数组访问
•常用的数组：images、links、forms等
•例如：document.images[0].src=“images/01.jpg”;

HTML5 选择器访问

1.document.querySelector(“选择器”);//返回页面中的第一个元素
比如:document.querySelector(“div”); //获取页面中的第一个div;
document.querySelector(“#username”);
//获取页面中id为username的元素

2.document.querySelectorAll(“选择器”);//返回页面中所有匹配的元素
比如：document.querySelectorAll(“div”);
//获取页面中所有的div，返回值是一个数组；

兼容性（》=版本）：