JavaScript学习总结（三）BOM和DOM详解

发表于 | 分类于 |

DOM部分

DOM：Document Object Model : 文档对象模型

文档：HTML页面

文档对象：页面中的元素

文档对象模型： 为了让程序（JS）去操作页面中的元素

DOM树由节点构成

1
节点种类：元素节点、文本节点和属性节点

DOM（文档对象模型）是HTML 和 XML 的应用程序接口（API）。DOM代表着被加载到浏览器窗口里的当前网页：浏览器向我们提供了当前网页的地图（或者说模型），而我们可以通过js去读取这张地图。

BOM主要处理浏览器窗口和框架，不过通常浏览器特定的 JavaScript扩展都被看做BOM的一部分。这些扩展包括：

1
2
3
4
5
6
弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，可以通过 JavaScript 实例化 ActiveX 对象

window对象对应着浏览器窗口本身，这个对象的属性和方法通常被称为BOM

DOM包含：window

1
2
3
Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口。

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

将HTML代码分解为DOM节点层次图：

image

1
2
3
4
 HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。
2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。
3. 属性节点:元素属性，如<a>标签的链接属性href="www.xxx.com"。

查找元素

W3C提供了比较方便的定位节点的方法和属性，如下所示：

方法 说明
getElementById() 获取特定ID元素的节点
getElementsByTagName() 获取相同元素的节点列表
getElementsByName 获取相同名称的节点列表
getAttribute() 获取特定元素节点属性的值
setAttribute() 设置特定元素节点属性的值
removeAttribute() 移除特定元素节点属性

元素节点属性

属性 说明
tagName 获取原酸节点的标签名
innerHTML 获取元素节点的内容
nodeName 返回一个字符串，其内容是节点的名字
nodeType 返回一个整数，这个数值代表给定节点的类型
nodeValue 返回给定节点的当前值

遍历节点树

节点 说明
childNodes 返回一个数组，这个数组由给定元素的子节点构成
firstChild 返回第一个子节点
lastChild 返回最后一个子节点
parentNode 返回一个给定节点的父节点
nextSibling 返回给定节点的下一个子节点
previousSibling 返回给定节点的上一个子节点

DOM操作

DOM操作 说明
creatElement(element) 创建一个新的元素节点
creatTextNode() 创建一个包含给定文本的新文本节点
appendChild() 指定节点的最后一个节点列表后添加一个新的子节
insertBefore() 将一个给定节点插入到一个给定元素节点的给定子节点的前面
removeChild() 从一个给定元素中删除子节点
replaceChild() 把一个给定父元素里的一个子节点替换为另外一个节点

DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。

DOM事件

1
2
3
4
5
6
7
8
9
10
DOM同时两种事件模型：冒泡型事件和捕获型事件  
    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发  
    <body onclick="handleClick()">  
        <div onclick="handleClick()">Click Me</div>  
    </body>  
    触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)  
      
    捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确  
    上面例子触发的顺序是：document、div  
    DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

事件处理/监听函数

DOM0级事件绑定

1
2
3
4
oDiv.onclick=function(){

};
oDiv.onclick=null           //删除onclick属性
  • 这种事件监听方法，只能监听冒泡过程。事件发生顺序：最内层→最外层
  • 用这种方法绑定的监听，this指的是触发这个事件的元素，无浏览器兼容问题

DOM2级事件绑定

addEventListener(“事件”,函数,Boolean); //绑定

removeEventListener(“事件名”，函数，Boolean)//解除

  • 第一个参数：事件名不用写on。click、mouseover、mouseout
  • 第二个参数：可以是匿名函数，也可以是有名函数
  • 第三个参数：true表示监听捕获，false表示监听冒泡阶段

IE的事件绑定

  • IE6、7、8不支持addEventListener（）方法；

oDiv.attachEvent(“onclick”,函数) //只能监听冒泡

detachEvent(事件名，函数) //解除绑定

  • 第一个参数必须写on

有关HTML DOM Event 对象

BOM部分

BOM的核心是window，而window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。

document对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document对象：实际上是window对象的属性，document == window.document为true，是唯一一个既属于BOM又属于DOM的对象  

document.lastModified  //获取最后一次修改页面的日期的字符串表示  

document.referrer  //用于跟踪用户从哪里链接过来的  

document.title  //获取当前页面的标题，可读写  

document.URL  //获取当前页面的URL，可读写  

document.anchors[0]或document.anchors["anchName"] //访问页面中所有的锚  

document.forms[0]或document.forms["formName"]  //访问页面中所有的表单  

document.images[0]或document.images["imgName"]  // 访问页面中所有的图像  

document.links [0]或document.links["linkName"]  //访问页面中所有的链接 

document.applets [0]或document.applets["appletName"]  //访问页面中所有的Applet  

document.embeds [0]或document.embeds["embedName"]  //访问页面中所有的嵌入式对象  

document.write(); 或document.writeln();  //将字符串插入到调用它们的位置

location对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
location对象：表示载入窗口的URL，也可用window.location引用它  

location.href  //当前载入页面的完整URL，如http://www.somewhere.com/pictures/index.htm  

location.portocol  //URL中使用的协议，即双斜杠之前的部分，如http 

location.host  //服务器的名字，如www.wrox.com  

location.hostname  //通常等于host，有时会省略前面的www  

location.port  //URL声明的请求的端口，默认情况下，大多数URL没有端口信息，如8080 

location.pathname  //URL中主机名后的部分，如/pictures/index.htm  

location.search  //执行GET请求的URL中的问号后的部分，又称查询字符串，如?param=xxxx  

location.hash  //如果URL包含#，返回该符号之后的内容，如#anchor1  

location.assign("http:www.baidu.com");  //同location.href，新地址都会被加到浏览器的历史栈中  

location.replace("http:www.baidu.com");  //同assign()，但新地址不会被加到浏览器的历史栈中，不能通过back和forward访问  

location.reload(true | false);  //重新载入当前页面，为false时从浏览器缓存中重载，为true时从服务器端重载，默认为false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 navigator对象：包含大量有关Web浏览器的信息，在检测浏览器及操作系统上非常有用，也可用window.navigator引用它  

navigator.appCodeName //浏览器代码名的字符串表示  

navigator.appName  //官方浏览器名的字符串表示  

navigator.appVersion  //浏览器版本信息的字符串表示  

navigator.cookieEnabled  //如果启用cookie返回true，否则返回false  

navigator.javaEnabled  //如果启用java返回true，否则返回false  

navigator.platform  //浏览器所在计算机平台的字符串表示  

navigator.plugins  //安装在浏览器中的插件数组  

navigator.taintEnabled  //如果启用了数据污点返回true，否则返回false  

navigator.userAgent  //用户代理头的字符串表示

screen对象

1
2
3
4
5
6
7
8
9
10
11
screen对象：用于获取某些关于用户屏幕的信息，也可用window.screen引用它  

screen.width/height  //屏幕的宽度与高度，以像素计  

screen.availWidth/availHeight  //窗口可以使用的屏幕的宽度和高度，以像素计 

screen.colorDepth  //用户表示颜色的位数，大多数系统采用32位  

window.moveTo(0, 0);  

window.resizeTo(screen.availWidth, screen.availHeight);  //填充用户的屏幕

window对象方法

方法 描述
alert() 显示带有一段消息和一个确认按钮的警告框。
blur() 把键盘焦点从顶层窗口移开。
clearInterval() 取消由 setInterval() 设置的 timeout。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
close() 关闭浏览器窗口。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup() 创建一个 pop-up 窗口。
focus() 把键盘焦点给予一个窗口。
moveBy() 可相对窗口的当前坐标把它移动指定的像素。
moveTo() 把窗口的左上角移动到一个指定的坐标。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
print() 打印当前窗口的内容。
prompt() 显示可提示用户输入的对话框。
resizeBy() 按照指定的像素调整窗口的大小。
resizeTo() 把窗口的大小调整到指定的宽度和高度。
scrollBy() 按照指定的像素值来滚动内容。
scrollTo() 把内容滚动到指定的坐标。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。

BOM和DOM的结构关系示意图

image

------ 本文结束 ------
0%