Js组成

众所周知，javascript由三部分组成，ECMAScript、DOM和BOM。根据主机(浏览器)的不同，具体形式也不同，ie和其他浏览器风格也不同。

1.DOM是W3C标准；[所有浏览器共同遵守的标准]2。BOM是每个浏览器厂商根据DOM在自己的浏览器上实现的；【不同的浏览器有不同的定义和不同的实现】3。窗口是BOM对象，不是js对象；

DOM(文档对象模型)是一种用于HTML和XML的应用程序接口。

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

弹出一个新的浏览器窗口，移动它，关闭它，并调整窗口大小。定位提供Web浏览器详细信息的对象，提供用户屏幕分辨率详细信息的屏幕对象，支持cookie，ie扩展BOM，增加ActiveXObject类。ActiveX对象可以通过JavaScript实例化。Java脚本通过访问BOM(浏览器对象模型)对象来访问、控制和修改客户端(浏览器)。因为BOM窗口包含文档，所以可以直接使用和感知窗口对象的属性和方法。因此，您可以通过直接使用窗口对象的文档属性来访问、检索和修改XHTML文档的内容和结构。因为文档对象是DOM(文档对象模型)模型的根节点。可以说，BOM包含DOM(对象)，浏览器提供对BOM对象的访问，再从BOM对象访问DOM对象，这样js就可以操作浏览器和浏览器读取的文档。其中DOM包括：窗口

窗口对象包含属性：文档、位置、导航器、屏幕、历史和框架。文档的根节点包含子节点：表单、位置、锚点、图像和链接。从window.document可以看出，DOM最基本的对象是BOM窗口对象的子对象。

区别：DOM描述的是处理web内容的方法和接口，而BOM描述的是与浏览器交互的方法和接口。

了解DOM

让我们看看下面的代码：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' XML : lang=' EN ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title DOM/title/head body h2a href=' http://www . Baidu.com ' JavaScript DOM/a/h2p对HTML元素进行操作，可以添加、更改或删除css样式等。/p ul lijavascript/Lili dom/Li licss/Li/ul/body/HTML将HTML代码分解为DOM节点级别。

**html文档可以说是由节点组成的集合，而DOM节点有：**1。元素节点：HTML、body、p等。上图中是元素节点，即标签。2.文本节点：向用户显示的内容，例如JavaScript、DOM、CSS和li中的其他文本./li3.Attribute node :元素属性，如标签a的link属性href=' http://www . Baidu.com ' node attribute nodeName返回一个字符串，其内容是节点的名称nodeType返回一个整数，该整数表示给定节点的类型nodeValue返回给定节点的当前值

遍历节点树遍历节点树子节点返回一个由给定元素的子节点组成的数组。firstChild返回第一个子级。lastChild返回最后一个子级。parentNode返回给定节点的父节点。nextSibling返回给定节点的下一个子节点。previousSibling返回给定节点的上一个子节点

DOM操作DOM操作creatElement(元素)创建一个新的元素节点creatTextNode()创建一个包含给定文本的新文本节点appendChild()在指定节点的最后一个节点列表后添加一个新的子节insertBefore()在给定元素节点的给定子节点前面插入一个给定节点。removeChild()从给定元素中移除子节点。replaceChild()用另一个节点替换给定父元素中的子节点

DOM通过创建树来表示文档，并描述了处理网页内容的方法和接口，使开发人员对文档的内容和结构有了前所未有的控制，节点可以很容易地被DOM API删除、添加和替换。

1.接入节点

` var OhTMl=document . document element；`//返回存在于XML和HTML文档中的文档根节点。oHtml包含一个HTMLElement对象` document.body` //，它代表HTML/，是Html页面的特殊扩展。提供对主体标记的直接访问/span span/span“document . getelementbyId(' id ')”//通过指定的id返回元素，getElementById()无法在XML中工作。IE6还将返回名称为指定id ' document . getelementbyname(' name ')`//的元素，以获取名称属性等于指定值的所有元素，但在IE6和Opera7.5上，它还将返回ID为给定名称的元素，并且只检查input/和img/` var x=document . getelementsbytanname(' p ')；`//使用指定的标签名返回所有的元素列表NodeList，索引号从0开始。当参数为星号时，IE6不会返回所有元素，因此必须使用document.all来代替2的特性和方法。节点节点

firstChild //Node指向子节点列表中的第一个节点lastChild //Node，子节点列表中的最后一个节点parentNode //Node，以及父节ownerDocument //Document。指向该节点所属的文档firstChild //Node，指向子节点列表中的第一个节点lastChild //Node，指向子节点列表中的最后一个节点parentNode //Node，指向父节点childNodes //NodeList，所有子节点的列表，previousing/Node，/指向上一个兄弟节点：如果该节点是第一个节点，则值为null `nextSibling` //Node，指向下一个兄弟节点；如果这个节点是最后一个节点，则值为null ` ` hasChildNodes()`//Boolean，当childnodes包含一个或多个节点时，则返回true值。

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中)。4.事件处理程序/监听器功能

* * JavaScript中的事件处理程序/侦听器函数* *:varo div=document . getelementbyid(' div 1 ')；奥迪夫。onclick=function () {//onclick只能小写使用，默认为冒泡事件提醒(' Clicked！');}在HTML:div onclick=' JavaScript : alert(' clicked！)'/div //onclick case任意IE事件处理程序attachEvent()和disconnectevent()

在IE中，每个元素和窗口对象都有两个方法：attachEvent()和disconnectevent()，它们接受两个相同的参数，事件处理程序名称和事件处理程序函数，例如：

[对象]。attach event(' name _ of _ event _ handler '，' function_to_attach') [object]。分离事件(' name_of_event_handler '，' function _ to _ remove ')var fnClick=function(){ alert(' Clicked！');} oDiv.attachEvent('onclick '，fnClick)；//添加事件处理函数odiv.attachevent ('onclick '，fnclickanother)；//可以添加多个事件处理函数odiv . separate vent(' onclick '，fnclick)；//移除事件处理程序。当使用attachEvent()方法时，事件处理程序将在全局范围内运行，因此这等于window。

跨浏览器事件处理程序

AddHandler()和removeHandler()addHandler()方法属于一个名为EventUntil()的对象，这两个方法都接受三个相同的参数，即要操作的元素、事件名称和事件处理函数。

事件类型

* *事件类型* *鼠标事件：单击、dbclick、mousedown、mouseup、mouseover、mouseout、mousemove键盘事件：键下、键下、键上HTML事件：加载、卸载、中止、错误、选择、更改、提交、重置、调整大小、滚动、聚焦、模糊事件处理程序

执行JavaScript代码的程序会在事件发生时做出响应。响应特定事件而执行的代码称为事件处理程序。

在HTML标记中使用事件处理程序的语法是：

HTML标记事件处理程序='JavaScript代码''事件处理程序

事件是由用户或浏览器本身执行的操作。点击、鼠标向上、按键向下、鼠标悬停等。是事件的名称。响应事件的函数称为事件处理程序(事件侦听器)，事件处理程序以on开头，因此click的事件处理程序是onclick

DOM 0级事件处理程序

DOM 0级事件处理程序：为事件的处理程序属性分配一个函数

input type=' button ' value=' button 2 ' id=' ben2 '/varbtn 2=document . getelementbyid(' BTN 2 ')；获取btn2按钮对象btn2.onclick //向btn2添加onclick属性，触发事件处理程序btn2.onclick=function(){} //添加匿名函数btn2.onclick=null //删除onclick属性，如何防止冒泡？

有以下方法可以防止起泡：

e.cancelBubble=truee . stopperpagation()；返回false内部文本、内部HTML、外部HTML、外部文本

InnerText，innerHTML，outerHTML，outerText innerText:表示开始标记和结束标记之间的文本innerHTML:表示元素的所有元素和文本的HTML代码，例如：divHello world/div的innerText是Hello world，innerHTML是Hello world outerText:它与前者的区别在于，它替换了整个目标节点，问题返回的内容与innerText相同。外套HTML:与前者的区别在于，它替换了整个目标节点，返回元素的完整HTML代码，包括元素本身的DOM 2事件处理程序。

DOM 2级事件定义了两种方法来指定和删除事件处理程序的动作。AddEventListener()和removeEventListener()

AddEventListener()和removeEventListener()

在DOM中，addEventListener()和removeEventListener()用于分配和移除事件处理程序。与IE不同，这些方法需要三个参数：事件名称、要分配的函数以及处理程序是用于冒泡阶段(false)还是捕获阶段(true)。默认为冒泡阶段false[对象]。AddEventListener(' name _ of _ event '，fn hander，b capture)[对象]。RemoveeventListener(' name _ of _ event '，fn hander，bcap ture)var fn Click=function(){ alert(' clicked！');} odiv . addeventlistener(' onclick '，fnClick，false)；//添加事件处理程序odiv。addeventlistener ('onclick '，fnclickanother，false)；//和IE一样，可以添加多个事件处理函数odiv . removeeventlistener(' onclick '，fnclick，false)；//移除事件处理程序如果使用addEventListener()将事件处理程序添加到捕获阶段，则必须在removeEventListener()中指明它是捕获阶段，这样才能正确删除此事件处理程序。oDiv.onclick=fnClickoDiv.onclick=fnClickAnother//使用直接赋值，后续事件处理程序将覆盖前一个处理程序oDiv.onclick=fnClickoDiv.addEventListener('onclick '，fnClickAnother，false)；//会按顺序调用，不会覆盖一张图片学习OUTHTML、innerText、innerHTML:

DOM基本操作思维导图

有关XML DOM-Element对象的更详细的属性和方法，请访问w3cshool

物料清单部分

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

window . close()；//关闭窗口window . alert(' message ')；//弹出带有确定按钮的系统消息框，显示指定的文本窗口，确认(‘确定吗？’).);//弹出一个带有“确定”和“取消”按钮的查询对话框，一个布尔值窗口.提示(‘你叫什么名字？“默认”)；//提示用户输入信息，接受两个参数，即要显示给用户的文本和文本框中的默认值，并将文本框中的值作为函数值返回给window . status .//状态栏中的文本可以临时更改默认的状态栏信息，文本window.settimeout ('alert ('XXX ')，1000)可以更改，直到用户离开当前页面。//设置指定毫秒数后要执行的指定代码，接受2个参数，要执行的代码和等待窗口的毫秒数. cleartime out(' ID ')；//取消未执行的暂停，传递给暂停ID窗口. setinterval(函数，1000)；//每隔指定的时间段无限重复指定的代码。参数与setTimeout()window . clearinterval(' ID ')相同；//取消时间间隔，将间隔ID传递给它window . history . go(-1)；//访问浏览器窗口的历史，负数为向后，正数为向前window . history . back()；//同上window . history . forward()；//同上window.history.length //您可以查看历史文档对象中的页数

Document对象：其实是窗口对象的一个属性，document==window.document为真。它是唯一同时属于BOM和DOM的对象。document.lastModified //获取页面上次修改日期的字符串表示document.referrer //，用于跟踪用户链接到document.title //的位置，以获取当前页面的标题。读/写文档。网址//获取当前页面的网址。读/写document.anchors[0]或document . anchors[' ankname ']//访问页面、文档. forms[0]或document.forms['formName'] //访问页面、文档. images[0]或document.images['imgName'] //访问页面文档中的所有图像. links [0]或document.links['linkName'] //访问页面文档中的所有链接. applets [0]或document . applets[' applet name ']//访问页面文档中的所有小程序或document . writeln()；//在调用字符串的位置对象中插入字符串

Location对象：表示加载窗口的URL，也可以被当前加载页面的window.location//the完整URL引用，比如location.portocol//in http://www.somewhere.com/pictures/index.htm.的URL中使用的协议也就是双斜线前的部分，比如http location.host //server的名称，比如www.wrox.com location.hostname//is通常等于host，有时会省略www location.port //URL声明的请求端口。默认情况下，大多数网址没有端口信息。例如，8080 location.pathname //URL中主机名后的部分，如/pictures/index中问号后的部分。htmlocation。search//用于执行GET请求的URL，也称为查询字符串，比如？Param=xxxx location.hash //如果URL包含#，则返回符号后的内容，如# anchor 1 location . assign(' http : www . Baidu.com ')；//与location.href相同，新地址将被添加到浏览器的历史堆栈位置. replace(' http : www . Baidu.com ')；//与assign()相同，但新地址不会添加到浏览器的历史堆栈中，不能通过back和forward访问location . reload(true | false)；//重载当前页面，如果为false，则从浏览器缓存中重载，如果为true，则从服务器端重载，默认值为false navigator对象

“导航器”对象包含大量关于网络浏览器的信息，这在检测浏览器和操作系统时非常有用。也可以使用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对象

Screen对象：用于获取用户屏幕的一些信息，也可以通过window.screen来引用屏幕的宽度和高度可以由screen.availWidth/availHeight//window以像素为单位来使用，颜色的位数可以由screen.colorDepth //user以像素为单位来显示。大多数系统使用32位窗口。window . resizeto(screen . avail width，screen . avail height)；//填写用户的屏幕窗口对象方法

BOM与DOM结构关系示意图

窗口对象思维导图