【JavaScript】Bom对象和Dom对象

BOM:Browser Object Model(浏览器对象模型)

就是在JS代码中可以直接使用的对象，但是对象都是和浏览器有关的

Example:

<script>

window.close();

</script>

(1)Window:对象表示浏览器中打开的窗口 最顶层对象（******）

window的方法都可以省略window

常用：

alert(); :弹出一个提示框.

confirm(); :弹出一个确认框

prompt(); :输入框

setTimeout();定时 执行一次就ok了

setInterval();定时 循环执行

clearTimeout();清除定时

clearInterval();清除定时

open():打开一个新窗口

close():窗口关闭了.

(2)Navigator :浏览器对象（获取浏览器=客户机的信息）

常用：

navigator.appName 浏览器的名

(3)Screen: 屏幕对象

常用：

width

height

(4)History:浏览器历史对象

常用：

- 到访问的上一个页面

history.back();

history.go(-1);

- 到访问的下一个页面

history.forward();

history.go(1);

(5)Location:地址对象

常用：

location.href url地址（可以获取 或 设置）

Dom：document object model: 文档对象模型

对象都是和文档相关的（html / xml）

Dom首先对HTML的解析过程：

解析完就得到一个

代表整个HTML文档的①document对象

而这些可以单独存在的标签（html / body / head / title / span）就叫做②标签对象(element对象)

而属性对象(id)和文本对象(文本)因为不能单独存在，还是要依赖标签对象，所以就没有给它们专门的对象

而不管element对象还是属性对象还是文本对象都是节点

所以③Node节点对象是这些对象的父对象

这个对象的用途：当标签对象、属性对象、文本对象找不到要的方法的时候，就去它们的父类Node节点对象去找（同java）

** Document常用方法

(1)write()方法：

向页面输出变量（值）

向页面输出html代码

var str = "abc";

document.write(str);

document.write("<hr/>");

(2)getElementById();

通过id得到元素（标签）

使用getElementById得到input标签

(3)getElementsByName();

通过标签的name的属性值得到标签

返回的是一个集合（数组）

(4)getElementsByTagName("标签名称");

通过标签名称得到元素

** Element常用方法

(1)getAttribute(“属性的名”);

获得属性的值

element.id 和 element.getAttribute("id")作用相同-->一般这么用方便，但是对于某些关键字（class）就用不了了

(2)setAttribute(“属性名”,”属性值”);

添加和修改

(3)removeAttribute(“属性名”);

移除属性

不能删除value属性

(4)在标签下查找标签

在标签下查找标签 只有getElementsByTagName(); 是唯一有效的方法

childNodes：获得所有的子节点.不是所有的浏览器都兼容（有些会把空格和换行也当做节点）

** Node常用方法

Node包括以下三种节点

元素节点(element)

nodeName：标签名

nodeType: 1

nodeValue:没有 null

属性节点(element.getAttributeNode("属性名"))

nodeName: 属性名

nodeType: 2

nodeValue:属性的值

文本节点(element.firstChild)

nodeName: #text

nodeType: 3

nodeValue:文本内容

PS：这里的父节点、子节点只针对元素（标签）操作，属性是另外来取的

比如在此html中<span >haha</span>

var span = document.getElementById("spanid");

alert(span.firstChild.nodeValue);

就会得到haha

所以firstChild指的是代表text