JavaScript---BOM模型之window对象,DOM模型的节点获取

原创 2017年05月08日 13:28:41

javaScipt学习的第七天,

简单的描述一下本篇要学习的知识点:

  • BOM模型中window对象中部分方法学习演示。
  • BOM模型中window对象中部分事件学习演示
  • DOM模型中的节点获取

BOM模型中window对象中部分方法学习演示。

confirm方法:

返回值 true/false ,弹出一个包含两个按钮(确定/取消)的确定对话框

<body>
    <input type="button" value="演示confirm方法按钮" onclick="demo1()">  <br/>
    <script type="text/javascript">
        function demo1(){
            var boo=window.confirm("演示confirm方法对话框");
            alert(  "接收confirm方法的返回值:"+boo);
        }
    </script
  </body>

这里写图片描述
这里写图片描述

moveBy(x1,y1)方法

:把窗口相对于当前位置移动 — 相对移动

<body>
    <input type="button" value="演示confirm方法按钮" onclick="demo1()">  <br/>
    <input type="button" value="演示moveBy方法按钮" onclick="demo2()">  <br/>
    <script type="text/javascript">
        function demo1(){
            var boo=window.confirm("演示confirm方法对话框");
            alert(  "接收confirm方法的返回值:"+boo);
        }
         function demo2(){
               moveBy(10,10);//把当前窗口的位置相对移动(10,10)
               alert("dem02")
              // moveTo(120,210);//把当前窗口的位置移至位置:(120,210)
           }
    </script>
  </body>

结果就不演示了,因为我发现很多浏览器好像没有用耶!
moveTo方法

:把窗口移动到某一位置— 绝对移动

<body>
        <input type="button" value="演示moveTo方法按钮" onclick="demo3()">  <br/>
    <script type="text/javascript">         
         function demo3(){
               moveTo(120,210);//把当前窗口的位置移至位置:(120,210)
         }
    </script>

setTimeout(参数1,参数2)方法:

:参数一为函数指针或者代码,参数二为毫秒数。经过参数二毫秒数后,执行参数一代码,或者函数指针所引导的函数。且只会执行一次

<body>
        <input type="button" value="演示setTimeout方法按钮" onclick="demo4()">  <br/>
    <script type="text/javascript">         
         function demo4(){
             setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次
         }
    </script>
  </body>

经过3秒后自然会弹出对话框
这里写图片描述

setInterval(参数1,参数2)方法:

:参数一为函数指针或者代码,参数二为毫秒数。经过参数二毫秒数后,执行参数一代码,或者函数指针所引导的函数。会一直执行

<body>
    <input type="button" value="setInterval方法" onclick="demo()">  <br/>
    <script type="text/javascript">
        function demo(){

             setInterval("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次
         }
    </script>

结果和上面类似,但是会一直弹,就和闹钟一直每次到这个时候就“闹”

clearTimeout( setTimeoutID )
clearInterval ( setIntervalID )

两个用来清除前面定时器的方法,参数是给定时器设置的ID

function demo(){

         var setIntervalID=setInterval("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次
         var setTimeoutID=setTimeout("alert('时间到!');",1000);//1秒之后会执行第一个参数中的代码即alert(),,,只执行一次

          clearTimeout(setTimeoutID);
          clearInterval(setTimeoutID);

         }

接下来是前面几个知识点的HTML代码,

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>BOM模型演示</title>
    </head>
    <body>
        <input type="button" value="演示window中的方法" onclick=" demo1();">  <br />
        <input type="button" value="演示window中的方法2" onclick=" demo2();"> <br />
        <input type="button" value="演示window中的方法3---定时器" onclick=" demo3();">   <br />
        <input type="button" value="演示window中的方法4---定时器2" onclick=" demo4();">  <br />

        <script type="text/javascript">
           function println(str){
               document.write(str+"<br/>"); 
           }
           function demo1(){
               //close();//关闭窗口   window.close();  window.alert("aa");
               var boo = window.confirm("你真的想关闭窗口??");
               //println(boo);1
               if(boo){
                  window.close();
               }
           }
           function demo2(){
               //moveBy(10,10);//把当前窗口的位置相对移动(10,10)
               moveTo(120,210);//把当前窗口的位置移至位置:(120,210)
           }

           //创建定时器
           function demo3(){
              window.resizeTo(20,20);
              // setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次
              setInterval(aa,50);//每隔50毫秒,会执行第一个参数中给定的函数,,,执行多次

           }
           var isFirst=true;
           function aa(){
              //println("hello定时器...");
              if(isFirst){
                 moveBy(10,10);
                 resizeBy(10,10);
              }else{
                 moveBy(-20,-20);
                 resizeBy(-10,-10);
              }
              if(window.screenTop>window.screen.height || window.screenTop<10 ){
                 isFirst=!isFirst;
              }
           }


           //清除定时器
           var idTimer,i=0;
           function demo4(){
              window.resizeTo(20,20);
              //idTimer = setTimeout("alert('时间到!');",3000);//3秒之后会执行第一个参数中的代码即alert(),,,只执行一次
              idTimer = setInterval(aa,50);//每隔50毫秒,会执行第一个参数中给定的函数,,,执行多次
           }
           // 一个让窗口到处乱移动的函数
           var isFirst=true;
           function aa(){
              i++;
              if(i==200){
                 //clearTimeout(idTimer);
                 clearInterval(idTimer);
              }

              if(isFirst){
                 moveBy(10,10);
                 resizeBy(10,10);
              }else{
                 moveBy(-10,-10);
                 resizeBy(-10,-10);
              }
              if(window.screenTop>window.screen.height || window.screenTop<10 ){
                 isFirst=!isFirst;
              }
           }

        </script>

        <hr/>
        <input type="button" value="演示window中的方法5---打开窗口" onclick="demo5();">   <br />

        <script type="text/javascript">
            var oNewWindow;
            function demo5(){
                oNewWindow = open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no,titlebar=no");
            }

        </script>
    </body>
</html>

BOM模型中window对象中部分事件学习演示

事件

  • onload: 浏览器完成整个页面加载时,就会触发。
  • onblur: 浏览器中,从获得焦点到失去焦点时触发
  • onfocus:在浏览器中,从失去焦点到获得焦点时触发
  • onbeforeunload: 当窗口将要关闭时,就会触发。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>BOM模型演示</title>
    </head>
    <body>
        <input type="button" value="演示window中的方法" onclick=" demo1();">  <br />
        <script type="text/javascript">
           //该事件在整个页面加载完毕之后会激活
           onload=function(){
               alert("窗口加载完毕.....");
           };


           onblur=function(){//获得焦点状态 变成 失去焦点状态 时
              alert("失去焦点了.....");
           };
           onfocus=function(){//失去焦点状态 变成  获得焦点状态 时
              alert("获得焦点了.....");
           };


          //窗口将要关闭时
//        onbeforeunload=function(){
//           var boo = confirm("你确认要关闭吗?");
//           if(!boo){
//              //下面这句,如果浏览器中存在一个其它页面,下面的新开窗口有效,否则无效
//              open("2_bom_window_event.html","_blank");
//           }
//           //alert("窗口马上要关闭了...做数据备份或其它善后处理...");
//        }

        </script>

        <hr/>

        <script type="text/javascript">
            //alert("aaaa");
        </script>
    </body>
</html>

DOM模型中的节点获取

前面我们知道DOM模型可以把HTML网页封装是树,里面的标签、属性、文本都是树的节点,对于节点我们如何获取,以及节点有哪些属性呢?

innrText:

纯文本格式输入页面(不会去解析)

innrHTML:

将内容写入页面会解析
演示代码

oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出,不会解析
oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示

这里写图片描述这里写图片描述

//文本内容中innerText和innerHTML的对比
            function demo4(){
                var oDivElement = document.getElementById("div2");


                var text = oDivElement.innerText;
                alert(text); //纯文本: 湖南城市学院
                var html = oDivElement.innerHTML;
                alert(html);//整个HTML内容: <font color="red">湖南城市学院</font>


                //写
                oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出,不会解析
                alert("暂停一下...");
                oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示
            }   
            //页面文档对象中的任意组成部分都是一个节点
            //元素(Element):标签       节点(Node):标签、属性、文本内容
            //所有节点(Node)都有3个属性:nodeName、nodeType、nodeValue
            /*
              1.nodeName:  标签为标签名,属性为属性名, 文本内容为"#text"
              2.nodeType:  标签为1,属性为2,文本内容为3
              3.nodeValue: 标签为null, 属性为属性值, 文本内容为纯文字
             */
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>DOM模型演示---通过document获取页面节点</title>
    </head>
    <body>
        <input type="button" value="演示节点的3个属性1" onclick=" demo1();">    <br />
        <input type="button" value="演示节点的3个属性2" onclick=" demo2();">    <br />
        <input type="button" value="演示节点的3个属性3" onclick=" demo3();">    <br />
        <input type="button" value="演示文本内容中innerText和innerHTML的对比" onclick=" demo4();"> <br />

        <div id="div1">湖南城市学院</div>

        <div id="div2"> <font color="red">湖南城市学院</font></div>

        <script type="text/javascript">                    
            //标签对象的3个属性
            function demo1(){
                var oDivElement = document.getElementById("div1");
                alert("nodeName:"+oDivElement.nodeName);//DIV
                alert("nodeType:"+oDivElement.nodeType);//1
                alert("nodeValue:"+oDivElement.nodeValue);//null
            }

            //属性对象(oAttribute)的3个属性
            function demo2(){
                var oDivElement = document.getElementById("div1");
                var oAttr = oDivElement.getAttributeNode("id");

                alert("nodeName:"+oAttr.nodeName);//id
                alert("nodeType:"+oAttr.nodeType);//2
                alert("nodeValue:"+oAttr.nodeValue);//div1
            }   

            //文本内容对象的3个属性
            function demo3(){
                var oDivElement = document.getElementById("div1");
                var oInnerContent = oDivElement.childNodes[0];

                alert("nodeName:"+oInnerContent.nodeName);//#text
                alert("nodeType:"+oInnerContent.nodeType);//3
                alert("nodeValue:"+oInnerContent.nodeValue);//湖南城市学院
            }

            //文本内容中innerText和innerHTML的对比
            function demo4(){
                var oDivElement = document.getElementById("div2");

                /*读
                var text = oDivElement.innerText;
                alert(text); //纯文本: 湖南城市学院
                var html = oDivElement.innerHTML;
                alert(html);//整个HTML内容: <font color="red">湖南城市学院</font>
                */

                //写
                oDivElement.innerText="<font size=18>Hello马上下课....</font>";//只是原样(纯文本)输出,不会解析
                alert("暂停一下...");
                oDivElement.innerHTML="<font size=18>Hello马上下课....</font>"; //会当作HTML解析显示
            }   


        </script>

    </body>
</html>
版权声明:本文为博主原创文章,大家一起学习进步。

JavaScript---DOM技术、BOM模型演示、window对象

什么是DOM技术。。 DOM—Document Object Model 文档对象模型 dom技术: 把标记文档变成对象树,通过对这棵树中的对象进行操作(增删改查),实现对文档内容的操作。 对dom...

javascript学习六~BOM和DOM简介,window,screen,navigator,location,history,节点增删改查

BOM和DOM BOM(Brower Object Model,浏览器对象模型),主要用来访问和操作浏览器各组件的一种方法。 BOM对象有:window、location、history、scre...

JAvaScript和DOM(文档对象模型)和BOM(浏览器对象模型)

DOM是针对XML但经过扩展用于HTML的应用程序编程接口DOM把整个页面映射成一个多层节点结构,HTML页面中的每一个组成部分都是某种类型的节点,这些节点也包含这不同类型的数据...

32-JavaScript-DOM-BOM简介-node常用方法和属性-window对象常用方法

- BOM 介绍 - dom 对象    - dom对象简介    - 常用dom对象层次图 - dom对象详解    - window    - event    - document...

浏览器对象模型BOM之window对象

1.BOM的概述     browser object modal :浏览器对象模型。     浏览器对象:window对象。     Window 对象会在 或 每次出现时被自动创建。 2....

第5天(就业班) BOM、window对象、事件、location对象、screen对象、Dom编程根据属性找节点、通过关系找节点、添加附件、联动框、操作元素的css样式、正则表达式

1.BOM编程 BOM全称 Browser Object Model,浏览器对象模型。 JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的...

JavaScript之 ------ 浏览器对象模型 (BOM)

一、BOM功能 提供了访问浏览器各个功能部件,如浏览器窗口本身、浏览历史等的操作方法。。。。。关不掉的广告...

JavaScript的浏览器对象模型BOM

浏览器JavaScript一般是运行在浏览器的,所以浏览器的一些信息我们也是需要了解的。主流浏览器(重点) IE 6~11:国内用得最多的IE浏览器,内核是Trident,历来对W3C标准支持差。从I...
  • Noneyes
  • Noneyes
  • 2017年04月03日 20:01
  • 408

JavaScript学习之 BOM(浏览器对象模型)

在全局作用域中声明的所有变量和函数,都会成为window对象的成员。 1、窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集...
  • hslhy
  • hslhy
  • 2012年06月11日 16:41
  • 660

javascript浏览器对象模型一(BOM)

BOM提供了一组以windows为核心的对象,实现了对浏览器窗口访问的控制, BOM中定义了六种对象 window对象表示浏览器打开的窗口 document对象表示浏览器加载页面的文档对象 l...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript---BOM模型之window对象,DOM模型的节点获取
举报原因:
原因补充:

(最多只允许输入30个字)