DOM学习笔记一

来源：互联网发布：java项目业务流程图编辑：程序博客网时间：2024/05/14 07:16

Dom:
document object model(文档对象模型)
增强页面的动态效果
用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签，文本，属性等)封装成对象，这样就更方便的操作这些文档以及文档中的内容。对象的出现就可以有属性和行为被使用。

文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记型文档都具备一些共性的体现
标记型文档(标签，属性，标签中封装的数据)
只要是标记型文档，都可以用DOM进行操作，HTML，XML

DOM的解析方式：
/*dom解析将按照标签的层次关系体现出标签的所属，形成一个树状结构-DOM树
树中标签以及文本甚至属性称为节点，节点也成对象，标签通常也成为页面中的元素*/
将标记型文档解析一颗DOM树，并将树中的内存封装成对象
好处：可以对树中的节点进行任意操作，(增删改查)
缺点：这种解析需要将整个标记型文档加载进内容，意味着如果标记型文档的体积很大，会浪费内存空间

另一种解析：SAX，非W3C标准
基于事件驱动的解析，获取数据的速度很快，但是，不能进行增删改查

DOM和SAX解析方法的区别：

dom解析方式优点：对文档的增删改查比较方便，缺点是占用内存比较大

SAx解析优点：占用内存比较少，缺点是只适合做文档的读取，不适合做文档的增删改查crud

DOM三级模型：

DOM level 1：将html文档封装成对象
DOM level 2：在level1基础上添加新功能，比如解析名称空间
DOM level 3：将XML封装成对象

而DOM可以形成一棵树：

DHTML：动态的HTML，不是一种语言，是多项技术综合体的简称
其中包含了HTML，CSS，DOM，JavaScript
这四个语言在动态html页面定义时，是如何负责的？

html：负责提供标签，对数据进行封装，目的是便于对标签中的数据进行解析
简单说：html是用标签封装属性
css：负责提供样式属性，对标签中的数据进行样式的定义
简单说：对数据进行样式定义
DOM：负责将标签型文档以及文档中所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象进行操作。
简单说：将文档和标签以及其他内容变成对象
JS：负责提供程序设计语言，对页面中的对象进行逻辑操作。
简单说：负责页面的行为定义,也就是页面的动态效果，所以Js是动态效果的主力编程语言

DHTML + XMLhttpRequest = AJAX 通讯服务端
BOM ， Navigator，History对象
BOM：Browser Object Model：浏览器对象模型
这个模型方便于操作浏览器
而浏览器对应的对象就是window对象，API文档查看Window

<!--定义个一个事件源，通过对事件源的触发，获取想要结果，点击按钮获取信息-->    <!--    <input type="button" value="演示Window" onclick="alert('xx')"/>    -->    <script type="text/javascript" src="out.js"></script>    <script type="text/javascript">        function MyWindow(){            alert("nihao");            //如果想知道浏览器中的信息，就需要使用Window对象navigator            var name = window.navigator.appName;//浏览器名            var version = window.navigator.appVersion;//平台版本，常见XX版本过低，要升级            /*document.writeln(name);            document.write("<hr>")            document.writeln(version);*/            out(name);            out(version);            /*History            * back:从历史列表中装入前一个URL，就是浏览器的后退            * forward：从历史列表中装入下一个URL            * go：指定一个            * */            history.back();        }        function goBack(){            window.history.back();        }     </script>    <!--定义事件源，注册事件相关联的动作-->    <input type="button" value="演示Window" onclick="MyWindow()"/>    <input type="button" value="返回上一页" onclick="goBack()"/>

Location对象：

<body>    <script type="text/javascript" src="out.js"></script>    <script type="text/javascript">               function WindowLacation(){            //var pro = location.protocol;            var text = location.href;            //alert(text);            //给Location的href属性设置一个值,并对其值进行解析，如果是http，进行链接访问            location.href = "http://www.sina.com.cn";        }     </script>    <!--定义事件源，注册事件相关联的动作-->    <input type="button" value="演示Lacation" onclick="WindowLacation()"/>   </body>

DOM中window常见方法：

 <script type="text/javascript">        var timeid;        function windowMethod(){//            var flag = window.confirm("确定退出？");//弹出一个窗口，确定/取消//            alert(flag);         //window.setTimeout("alert('time out run')",4000);//4秒后弹出           timeid =  window.setInterval("alert('time out run')",2000);//每两秒弹出            //关闭，对应的clearInteval        }        //window.open(...);//流氓广告的原理        function windowopen(){            window.open("Adventor.html","_blacnk","height=500","width=500","status=yes",                        "toolbar=yes","menubar=yes","location=yes");//放外面，不用点直接打开          /* window.open("","_blacnk","height=200","width=200","status=no",                    "toolbar=no","menubar=no","location=no");传说中的广告*/            //close();当前窗口，执行close关闭，会有提示，因为当前窗口是你打开，close执行的是，自动打开的窗        }        function windowclose(){            window.close();        }        function Stop(){                clearInterval(timeid);        }        function windowMove(){       //  moveBy(10,10);//点一下横坐标移到10,纵坐标移到10，指的是整个窗口           // moveTo(20,20);//移到指定的坐标点            //resizeBy()调整窗口尺寸            //resizeTo()            /*for(var x = 1;x<50;x++){                moveBy(10,0);                moveBy(0,10);                moveBy(-10,0);                moveBy(0,-10);            }//QQ抖动窗口，就是这个原理，返回一个程序，使对方的窗口执行*/           // scrollBy(10,10);//将窗口滚动x和y的偏移量           // scrollTo();        }     </script>    <input type="button" value="window方法" onclick="windowMethod()" />    <input type="button" value="窗口移到" onclick="windowMove()" />    <input type="button" value="窗口打开" onclick="windowopen()" />    <input type="button" value="停止" onclick="Stop()" />

DOM的常见事件：

 <script type="text/javascript">        /*//事件的使用：        //定义好 事件 = 处理方式        onunload = function(){// 对象卸载完触发 3            alert("onunload run");        }        onload = function(){//浏览器打开，对象一加载完触发 1            alert("onload run");        }        onbeforeunload = function(){            alert("onbeforeunload run");//对象卸载前触发 2        }*/        onload = function(){            window.status("加载完啦");//状态栏，状态栏中的文字，可以使用JS每隔一秒显示一个字        }    </script>

弹出广告练习：

 <script type="text/javascript">    //演示弹窗，页面一加载，就执行        //在当前页面中定义广告页面脚本，在onload事件中完成广告的弹窗        onload = function(){            window.open("Adventor.html","_blacnk","height=200","width=200","status=no",                    "toolbar=no","menubar=no","location=no");        }    </script>

Adventor.html：

<body>        <h1>广告</h1>        <h2>打广告</h2>        <script type="text/javascript" >            //setTimeout("close()",3000);            onunload = function(){//关掉就弹                window.open("Adventor.html","_blacnk","height=200","width=200","status=no",                        "toolbar=no","menubar=no","location=no");            }            setInterval("focus()",1000);//focus()，使焦点放在当前广告窗口，管不了，也不能最小化        </script></body>

0 0