PS:虽然自己JS基本语法算是掌握了，但是其实在JS掌握的只是远远还不够，网页上有太多好看的动态效果都是用JS

做出来的，自己也就仅仅会那么一两个动态的效果，学的只是皮毛。。。等有空的时候一定要好好的研究那些动态效果

的制作，实在是太炫酷了。。。先开始DOM的基本语法吧。。。等DOM和JQuery的基本语法和用法搞定后就去深入的研究

研究那些动态效果的制作。。。

DOM编程

学习内容

1.DOM简单介绍

2.DOM解析方式

3.在网页中使用DOM编程

4.DOM window对象以及Loaction对象的使用...

1.为什么使用DOM编程？DOM编程的使用可以增强界面的动态效果。。起初的时候是没有DOM编程的...

由于HTML语言以及JS的出现，JS的建立与HTML的建立并非是一个人，那么我们在使用JS操作HTML的时候

就需要一个规定，规定JS如何去操作HTML文档，因此W3School为此制定了规范，同时W3school也制定了

一套XML的DOM编程的规范。。。。

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

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

DOM和SAX解析方法的区别：

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

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

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

DHTML + XMLhttpRequest = AJAX 通讯服务端 
BOM ， Navigator，History对象
BOM：Browser Object Model：浏览器对象模型

这个模型方便于操作浏览器
而浏览器对应的对象就是window对象，API文档查看Window

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script language="javascript" type="text/javascript">

     function test()

     {

         alert("HELLO");

         var name=window.navigator.appName;//浏览器的名称

         var version=window.navigator.appVersion;//平台版本

         document.write(name);

         document.write(version);

         history.back();//回到上一个界面

     }

     function goback()

     {

         window.history.back();

     }

</script>

</head>

<body>

     <input type="button" value="演示Window" onclick="test()" />

     <input type="button" value="back" onclick="goback()" />

</body>

</html>

上面的代码定义了两个按钮来触发window事件..

1.window对象的使用：

confirm（）；

<script type="text/javascript" language="javascript">

      function test()//网页上用来删除的对话框

      {

          var res=window.confirm("删除");

          if(res)

          {

              window.alert("ok!");

          }else

          {

              window.alert("no");

          }

      }

</script>

setInterval（"要执行的内容或者函数"，"设置执行的时间"）； 

clearInterval（"setInterval的函数名"）；

setTimeout（"要执行的函数或者内容"，"设置执行的时间"）；

clearTimeout（setTimeout的函数名）；

<script language="javascript" type="text/javascript">

       var num=0;

       function say()

       {

           if(num==5)

           {

               clearInterval(say);//终止setInterval的执行...

           }else{

               window.alert("hello world");

               num++;

           }

       }

       function test()

       {

           setInterval(say,1000);//每隔一秒输出一次,使用按钮触发即可

       }

       function test1()

       {

           setTimeout(say1,1000);//设置一个函数，是这个函数在指定的时间后执行,使用按钮触发即可..

       }

       var num1=0;

       function say1()

       {

           if(num1==2)

           {

               clearTimeout(say1);//终止了setTimeout函数的执行...

           }else{

               window.alert("你好");

               num1++;

           }

       }

</script>

moveTo（x,y）；

moveBy（x,y）；

resizeto（x,y）；

resizeby（x,y）；   -->这几种方法都可以使用按钮来触发完成

<script language="javascript" type="text/javascript">

     function test()

     {

         window.moveTo(100,100);//相对于屏幕的左上角移动100 100像素

         }

     function test1()

     {

         window.moveBy(100,100);//相对于当前窗口的左上角移动100 100像素

         }

     function test2()

     {

         window.resizeTo(100,100);//把窗口调整为100*100个像素

         }

     function test3()

     {

         window.resizeBy(100,100);//把窗口增加100 *100 个像素

         }

</script>

来个综合例子：

 <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","_blank","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()" />

2.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>

3.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>

<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>

 

DOM编程 学习笔记（一）的更多相关文章

  1. DOM编程 学习笔记（二）

    学习内容: 1.document对象 2.event对象 该对象将标记型文档进行封装 该对象的作用,是对可标记型文档进行操作 常见操作,想要实现动态效果,需要对节点操作,那么先获取到这个节点,想获取节 ...

  2. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  3. HTML DOM（学习笔记二）

    嗯,在HTML DOM(学习笔记一)中简单描述了一下HTML DOM 是什么,这一篇将记录下来有关HTML DOM的内容! 1:DOM节点 首先,再来看一下HTML DOM的树状结构,如下图所示: 这 ...

  4. Linux Shell编程学习笔记——目录（附笔记资源下载)

    LinuxShell编程学习笔记目录附笔记资源下载 目录(?)[-] 写在前面 第一部分 Shell基础编程 第二部分 Linux Shell高级编程技巧 资源下载 写在前面 最近花了些时间学习She ...

  5. DirectX 11游戏编程学习笔记之8: 第6章Drawing in Direct3D(在Direct3D中绘制)(习题解答)

            本文由哈利_蜘蛛侠原创,转载请注明出处.有问题欢迎联系2024958085@qq.com         注:我给的电子版是700多页,而实体书是800多页,所以我在提到相关概念的时候 ...

  6. 多线程编程学习笔记——async和await（一）

    接上文 多线程编程学习笔记——任务并行库(一) 接上文 多线程编程学习笔记——任务并行库(二) 接上文 多线程编程学习笔记——任务并行库(三) 接上文 多线程编程学习笔记——任务并行库(四) 通过前面 ...

  7. 多线程编程学习笔记——async和await（二）

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

  8. 多线程编程学习笔记——async和await（三）

    接上文 多线程编程学习笔记——async和await(一) 接上文 多线程编程学习笔记——async和await(二) 五.   处理异步操作中的异常 本示例学习如何在异步函数中处理异常,学习如何对多 ...

  9. 多线程编程学习笔记——使用异步IO（一）

    接上文 多线程编程学习笔记——使用并发集合(一) 接上文 多线程编程学习笔记——使用并发集合(二) 接上文 多线程编程学习笔记——使用并发集合(三) 假设以下场景,如果在客户端运行程序,最的事情之一是 ...

随机推荐

  1. TDR，阻抗匹配，反射，源端匹配，终端匹配

    什么是阻抗 阻抗分三种,电阻.电容.电感,三者阻抗表达式如下: 符号 单位 表达式 备注 电阻 R 欧姆 Ω 电压电流相位相同 电容 C 法拉 F 电压相位落后电流90度 电感 L 亨利 H 电压相位 ...

  2. kafka工作原理简介

    消息队列 消息队列技术是分布式应用间交换信息的一种技术.消息队列可驻留在内存或磁盘上, 队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可独立地执行--它们不需要知道彼此的位置.或在继续执行 ...

  3. opencv源代码之中的一个：cvboost.cpp

    我使用的是opencv2.4.9.安装后.我的cvboost..cpp文件的路径是........\opencv\sources\apps\haartraining\cvboost.cpp.研究源代码 ...

  4. apache配置，禁止指定后缀访问

    每天都有人来服务器上扫描点什么,想下载点数据库或者什么的 服务器是java的,没有asp或者mdb这样的访问 用一下配置,可以禁止asp或者mdb访问,也可以加上zip和rar禁止 <Direc ...

  5. 编译Sqoop2错误解决

    Sqoop2的代码结构相对于Sqoop做了大幅度调整,当中编译方式也从ant+maven杂糅的方式变为依赖maven3.今天将源码下下来,放到linux測试机器/export/build下后,执行&q ...

  6. Azure Redis

    https://azure.microsoft.com/en-us/blog/mvc-movie-app-with-azure-redis-cache-in-15-minutes/ https://a ...

  7. 工作流模式 (zhuan)

    http://www.cnblogs.com/soundcode/archive/2010/12/30/1922283.html *********************************** ...

  8. 安装Tomcat配置环境变量

    我是从官网下载的zip,没有用installer. 从目前的情况来看,只要你配置好了JAVA_HOME, CLASSPATH, PATH,那么剩下的,目前看来,就只要配置好CATALINA_HOME即 ...

  9. 【转载】LeetCode 题目总结/分类

    引自:http://www.douban.com/note/330562764/ 注:此分类仅供大概参考,没有精雕细琢.有不同意见欢迎评论~ 利用堆栈:http://oj.leetcode.com/p ...

  10. python 字典格式嵌套，相同项做叠加

    all_dict = {} for tg_id in ['com.qq_a','com.qq_b','com.qq_c','com.qq_c']: tmp_dict = all_dict.get(tg ...