关闭

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

标签: dom对话框
364人阅读 评论(0) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:29572次
    • 积分:2813
    • 等级:
    • 排名:第12902名
    • 原创:262篇
    • 转载:2篇
    • 译文:0篇
    • 评论:8条