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. STM32 mdk软件仿真时过不去时钟的问题

    stm32的程序用MDK软件仿真时,由于系统时钟初始化函数里有个等待系统时钟准备好的循环,所以过不去. 设置方式如下:这么设置之后仿真时就可以直接进入main函数了.

  2. OpenGl学习 glenable()函数理解

    glEnable用于启用各种功能.功能由参数决定.与glDisable相对应.glDisable是用来关闭的.两个函数参数取值是一至的. 参数说明:void glEnable(GLenum cap)G ...

  3. SpringDaoSupport

    @Component public class SuperDAO extends HibernateDaoSupport { @Resource(name="sessionFactory&q ...

  4. UVA 1264 - Binary Search Tree(BST+计数）

    UVA 1264 - Binary Search Tree 题目链接 题意:给定一个序列,插入二叉排序树,问有多少中序列插入后和这个树是同样的(包含原序列) 思路:先建树,然后dfs一遍,对于一个子树 ...

  5. 一处疑难杂症的术后总结：WebView和JavaScript之间的交互

    近期在公司里參与了M3项目的开发,这个项目是使用HTML5开发的前端页面,在开发完成后,把项目地址写入Android.iOS的壳源代码里面,这样当应用被打开时候自己主动加载项目首页的URL.这样的做法 ...

  6. 【Maven】Maven的安装与入门使用

    它也是实现项目各个环节的好帮手,如编译.单元测试.打包.发布,等等.按照它的流程走,可以让我们养成严谨的习惯. 同时,我们用得很多的是用它下载JAR,想想以前,以前框架的包都是自己一个一个爬官网下载的 ...

  7. struts2文件下载的编写步骤(文件导出)和输入流转换的方法

    strut2文件下载三部曲:一个流.两个头信息 说明: ①一个流,在Action中需要一个getInputStream()的方法来获取下载的内容,其中inputStream是默认的,他会指示Strea ...

  8. maven jetty指定端口启动

    eclipse里修改 Goals值 Tomcat -Dmaven.tomcat.port=8080 tomcat:run Jetty -Djetty.port=8081 jetty:run

  9. sql 判断

    sql server select expertId,mail= ( CASE mail WHEN '' THEN ' ' else mail end ) from Siemens.dbo.tblEx ...

  10. Elasticsearch的javaAPI之get,delete,bulk

    Elsasticsearch的javaAPI之get get API同意依据其id获得指定index中的基于json document.以下的样例得到一个JSON document(index为twi ...