web前端知识总结-BOM和DOM

BOM：我们都知道JavaScript是运行在浏览器中的，所以JavaScript提供了一些列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen等，通常统称为浏览器对象模型browser object model  BOM

Window对象是整个JavaScript脚本运行的顶层对象常用属性如下：

Document-返回窗口内装载的HTML文档

Location-返回窗口装载的HTML文档的URL

Navigator-返回浏览当前页面的浏览器

Screen-返回当前浏览者屏幕对象

History-返回该浏览窗口的历史

Window对象的常用方法：

Alert、confirm、prompt

Close

moveBy、moveTo

resizeBy、resizeTO

scrollBY、scrollTo

Open

setInterval、clearInterval

History方法：

Back-后退到上一个浏览的页面

Forward-前进到下一个浏览页面

Go(intValue)-可以指定前进或后退多少个页面

DOM：DOM是文档对象模型 document object model 当页面加载时，可以将结构文档在内存中转换成对象的树。

DOM中常用三种节点：元素节点、文本节点、属性节点

JavaScript提供的核心DOM功能：

根据ID访问HTML元素

利用节点关系访问HTML元素：

parentNode-返回当前节点的父节点

previousSibling-返回当前节点的前一个兄弟节点

nextSibling-返回当前节点的后一个兄弟节点

childNodes-返回当前节点的所有子节点

firstChild-第一个子节点

 

lastChild-最后一个子节点

getElementByTagName-返回当前节点的具有指定标签名的所有子节点

DOM访问表单控件的常用属性和方法：

Action-返回表单的提交地址

Elements-返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件

Length-返回表单内表单域的个数

Method-返回表单内的method属性，主要有get和post

Target-确定提交表单时的结果窗口，主要有_self   _blank   _top

Reset（） submit（）-重置表单和确定表单方法

在elements返回的数组中访问具体的表单控件语法如下：

.elements[index]-返回该表单中第index个表单控件

.elements[elementName]-返回表单内ID或name为elementName的表单控件

.elementName-返回表单中ID或name为elementName的表单控件

DOM访问表格子元素的常用属性和方法：

Caption-返回表格的标题对象

Rows-返回表格的所有表格行

Tbodies-返回表格里所有<tbody>元素组成的数组

Tfoot-返回表格里所有<tfoot>元素

Thead-返回表格里所有<thead>元素

通过rows[index]-返回表格指定的行所对应的属性：

Cells-行内所有的单元格

rowIndex-行在表格内索引

通过cells[index]返回表格指定的列所对应的属性

cellIndex

DOM创建节点方法：

document.createElement(tag)，tag必须是合法的HTML元素

DOM复制节点的方法：

节点cloneNode(boolean deep),deep为true，复制当前节点以及当前节点的全部后代节点。False时只复制当前节点。

DOM添加、删除节点方法：

appendChild（newNode）

insertBefore(newNode,refNode)

replaceChild(newNode,oldNode)

removeChild(oldNode)

事件概念：事件是可以被JavaScript侦测到的一种行为

事件流：冒泡型事件、捕获型事件。IE只支持冒泡，支持标准DOM的浏览器两者都支持

通用性事件监听：

绑定HTML元素属性-onclick

绑定DOM对象属性-document.getElementById().onclick=函数

IE中的事件监听方法：

obj.attachEvent(“事件类型”，“处理函数”)-添加监听

obj.detachEvent(“事件类型”，“处理函数”)-取消监听

标准DOM中的事件监听方法：

obj.addEventListener（“事件类型”，“处理函数”，“冒泡事件或捕获事件”）

obj.removeEventListener（“事件类型”，“处理函数”，“冒泡事件或捕获事件”）

IE监听方法中的事件类型和标准DOM监听方法中的事件类型写法有不同，前者需要加on开头，后者不需要，直接写click、mousemove就行

为了兼容不同的浏览器，通常采用下面的方法得到事件对象:

Op.onclick=function(oEvent){

   If(window.event){

     oEvent=windwo.event;

   }

}