BOM和DOM学习总结

BOM 浏览器对象模型(地址栏上面的)

      1.什么是BOM?(BOM体系结构图)

          1.BOM是Browser Object Model的缩写，简称浏览器对象模型

          2.BOM提供了独立于内容而与浏览器窗口进行交互的对象

          3.由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

          4.BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性

          5.BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C.

          6.BOM最初是Netscape浏览器标准的一部分

      2.BOM的作用

          BOM提供了一些访问窗口对象的一些方法，我们可以用它来移动窗口位置，改变窗口大小，打开新窗口和关闭窗口，

          弹出对话框，进行导航以及获取客户的一些信息如：浏览器品牌版本，屏幕分辨率。

          但BOM最强大的功能是它提供了一个访问HTML页面的一入口——document对象，

          以使得我们可以通过这个入口来使用DOM的强大功能！！！

      3.window对象.

        1.window对象是BOM中所有对象的核心.window还可用于移动或调整它表示的浏览器的大小

        2.window子对象

          document 对象,frames对象,history对象,location对象,navigator对象,screen对象.

        3.window对象关系属性

          parent：如果当前窗口为frame，指向包含该frame的窗口的frame（frame）

          self ：指向当前的window对象，与window同义。（window对象）

          top ：如果当前窗口为frame，指向包含该frame的top-level的window对象

          window ：指向当前的window对象，与self同意。

          opener ：当窗口是用javascript打开时，指向打开它的那人窗口（开启者）

      4.window对象的方法

        1.窗体控制

          moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体

          moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域

          resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体

          resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素

        2.窗体焦点控制

          focus()——使窗体或控件获取焦点

          blur()——与focus函数相反，使窗体或控件失去焦点

        3.新建窗体

          open()——打开(弹出)一个新的窗体window.open(url, name, features, replace);

          close()——关闭窗体

          opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思

      5.对话框

          alert(str)——弹出消息对话框（对话框中有一个“确定”按钮）

          confirm(str)——弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）

          prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框）

      6.Location 对象 -jsp页面进行数据传送

           window.location.href = "3_success.html#id=123,name=sss";

          1.hash 设置或返回从井号 (#)开始的 URL（锚）

           var str = window.document.location.hash;

          2.search 设置或返回从问号 (?)开始的 URL（查询部分）

           var str = window.document.location.search;

      7.Navigator对象

          1.appName 返回浏览器的名称

          2.appVersion 返回浏览器的平台和版本信息...

      8.框架

          alert(frames.length);//框架的数目

          alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用

          //不但可以使用下标，还可以使用frame标签的name属性

          alert(frames["frame1"].document.title);

      在框架集中还可以使用ID来获取子窗口的引用

          var frame1 =document.getElementById("frame1");//这样只是获取了标签

          var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用

          //还可以直接获取框架中document的引用

          var frameDoc = frame1.contentDocument;

          alert(frameDoc);//但IE不支持contentDocument属性

      子窗口访问父窗口——window对象的parent属性

      子窗口访问顶层——window对象的top属性

           IFrame可以局部刷新

 

    DOM 文本对象模型(地址栏下面的范围框里面的)

    通过正则表达式对输入框进行校验,利用焦点事件(onblur在对象失去输入焦点时触发。)

    DOM 文本对象模型

      1.什么是DOM?

          1.Document Object Model (DOM)是HTML和XML文档的编程接口。它提供了上述文档的一种结构化表示，

          同时也定义了一种通过程序来改变文档结构，风格，以及内容的方式。DOM用一组结构化的节点以及对象来表示文档。

          本质上就是将网页和脚本语言以及编程语言连接起来。

          2.DOM是网页的一种完全的面向对象的表示方法，可以通过脚本语言（比如说JavaScript）来改变。

          DOM标准主要要为：微软DOM与W3C DOM，一般IE实现的是微软DOM，而其它浏览器则不同程度的实际了W3C DOM

      2.DOM发展史---...

          DOM Level Zero ,事实上从来不存在DOM 0版本，只是人们的戏称。

          DOM Level 1 包括DOM Core和DOM HTML。前者提供了基于XML的文档结构图。

          DOM Level 2 引入几个新模块：DOM视图，事件，样式，遍历和范围。IE只实现了一部分，火狐浏览器几乎全部实现，

          DOM Level 3 引入了以统一的方式载入和保存文档的方法(firefox只实现了一部分)。

           API（网页或者XML页面）＝DOM＋ JS（脚本语言）

      3.DOM与BOM关系结构图,文档对象模型-DOM,树型结构图.(BOM包括DOM)

      4.document有三个方法，可以获取页面的任何元素.

          对三种获取页面元素方法的使用：

          1.getElementById  //通过ID获取对象

           var sss = document.getElementById("ddd");

           //alert(sss);

 

          2.getElementsByName //通过name获取对象

           var sss=document.getElementsByName("firstName");

           //alert(sss[1].value);

 

          3.getElementsByTagName //通过目标获取对象

           var sss = document.getElementsByTagName("*"); //*代表所有的节点元素.

           //alert(sss.length); //火狐和IE所输出的length值不同.

           for(var i =0;i<sss.length;i++){

                 //alert(sss[i].tagName);

           }

          //4.getElementsByClassName

           //var m = document.getElementsByClassName("xxx");//兼容firefox 不兼容ie

      5.节点(ie与火狐Firefox的兼容性-ie6.0有些属性不支持)

          1.获取根节点 var de = document.documentElement; //输出html

          2.获取head与body var head = document.getElementsByTagName("head")[0];//输出head,body的获取方式与得到head一样的.

     

          3.元素节点——文档中具有标签的节点1,文本节点——标签中不是注释的文本块3

          4.常用的节点属性

           1.nodeType——节点类型，元素节点是1，文本节点是3.

           2.nodeValue——节点值，元素节点为空，文本节点的nodeValue属性即为文本内容.

           3.firstChild——该元素节点包含的第一个子节点.

           4.lastChild——该元素节点包含的最后一个子节点.

           5.nextSibling——该节点的后一个兄弟节点.

           6.nodeName——节点名称，对于元素节点，返回tagName,对于文本，则返回#text

          function nextSibling(node) {

           var n=node.nextSibling;

           if (n!=null && n.nodeType===3 && /^\s+$/.test(n.nodeValue)) {

                 return n.nextSibling;

           }

           return n;

           }

           6.previousSibling——该节点的前一个兄弟节点(火狐在打开firebug的时候，浏览器自动加一个div，关闭就可以了)

           7.childNodes——子节点列表,可以通过node.childNodes[index]（或node.childNodes.item(index)）来获取子节点

    事件(Event)

      6.一般事件

          onclick  鼠标点击时触发此事件

          ondblclick    鼠标双击时触发此事件

          onmousedown   按下鼠标时触发此事件

          onmouseup 鼠标按下后松开鼠标时触发此事件

          onmouseover    当鼠标移动到某对象范围的上方时触发此事件

          onmousemove  鼠标移动时触发此事件

          onmouseout      当鼠标离开某对象范围时触发此事件

          onkeypress 当键盘上的某个键被按下并且释放时触发此事件.

          onkeydown 当键盘上某个按键被按下时触发此事件

          onkeyup     当键盘上某个按键被按放开时触发此事件

      7.页面相关事件

          onabort 图片在下载时被用户中断

          onbeforeunload 当前页面的内容将要被改变时触发此事件

          onerror 出现错误时触发此事件

          onload  页面内容完成时触发此事件

          onmove      浏览器的窗口被移动时触发此事件

          onresize      当浏览器的窗口大小被改变时触发此事件

          onscroll 浏览器的滚动条位置发生变化时触发此事件

          onstop  浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断

          oncontextmenu  当弹出右键上下文菜单时发生

          onunload     当前页面将被改变时触发此事件

      8.表单相关事件

          onblur   当前元素失去焦点时触发此事件

          onchange    当前元素失去焦点并且元素的内容发生改变而触发此事件

          onfocus 当某个元素获得焦点时触发此事件

          onreset 当表单中RESET的属性被激发时触发此事件

          onsubmit    一个表单被递交时触发此事件

          onselect      当元素被选择时执行

 

      9.解决每一个对象只能注册一个事件的问题

          1.需要将所有函数一次添加进去，但不能在运行时添加.

           obj.onclick = function () { //不能重复进行函数互用.

                 fn1();

                 fn2();

                 fn3();

           };

          2.利用事件覆盖原理，切换事件

           oDiv.onclick = toBig;

           function toBig(){

                 oDiv.className = "big";

                 oDiv.onclick = toSmall;

           }

           function toSmall(){

                 oDiv.className = "small";

                 oDiv.onclick = toBig;

           }

          3.把this指针注册给toBig对象

           oDiv.onclick = function(){

                 toBig.call(this);//把this指针注册给toBig对象

           }

           function toBig(){

                 this.className = "big";

                 this.onclick = toSmall;

           }

           function toSmall(){

                 this.className = "small";

                 this.onclick = toBig;

           }

          //4.getElementsByClassName

           //var m = document.getElementsByClassName("xxx");//兼容firefox 不兼容ie

      10 事件传播——冒泡与捕获.

          1.介绍：DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡.Netscape选择实现了捕获事件流，

          微软则实现了冒泡事件流，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

            默认情况下，事件使用冒泡事件流，不使用捕获事件流。

          2.冒泡事件流(从小到大的冒泡)

           1.在遵从W3C标准的浏览器里可以通过调用事件对象上[事件对象.stopPropagation()]方法或通过设置事件对象的

           [事件对象.cancelBubble]属性为true，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true，

           不支持stopPropagation()。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根.

          3.捕获事件流(大到小进行捕获)

           事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，

           事件被从目标元素的所有祖先元素依次往下传递。useCapture属性为true.

          默认事件<a> <from>,-默认执行的事件.

DOM加载顺序

1.解析HTML结构。
2.加载外部脚本和样式表文件。
3.解析并执行脚本代码。
4.构造HTML DOM模型。
5.加载图片等外部文件。
6.页面加载完毕。
加载顺序实例：

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">   <title>Title</title>   <style type="text/css"> body { font-sie: 12px; } </style>   <link href="style.css" rel="stylesheet" type="text/css" media="all" />   <script src="js.js" type="text/javascript"></script>  </head>  <body>   <div>    <script type="text/javascript"> function f1() { } </script>    <img src="1.gif" />   </div>   <script type="text/javascript"> function f2() { } </script>    </body></html>

html → head → title → #text(网页标题) → style →加载样式 → 解析样式 → link →加载外部样式表文件 → 解析外部样式表 → script →加载外部脚本文件 → 解析外部脚本文件 →执行外部脚本 → body → div → script → 加载脚本 →解析脚本 → 执行脚本 → img → script →加载脚本 → 解析脚本 →执行脚本 → 加载外部图像文件 →页面初始化完毕