• dom编程


    JavaScript可以让用户对网页元素进行改变。

    dom编程,也是学习ajax的基础。 

    为什么要学习dom编程

    (1)通过dom编程,我们可以写出各种网页游戏。

    (2)dom编程也是ajax的重要基础。

    DOM=Document Object Model(文档对象模型),把文档当做一个对象来处理。

    DOM=Document Object Model(文档对象模型),把文档 当做一个对象来处理。

    DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。

    JavaScript操作HTML文件是HTML dom编程

    JavaScript操作XML文件是XML dom编程。

    java语言也实现w3c的xml dom编程。

    table  Dom table(对象)。

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

    <script language="javascript" type="text/javascript">
    function test(){
    var mytab=document.getElementById("mytable");
    window.alert(mytab.rows[1].cells[1].innerText);
    mytab.rows[1].cells[1].innerText="顺平";
    window.alert(mytable.constructor);
    //mytable.deleteRow(1);
    }
    </script>

    <title>Document</title>
    </head>
    <body>
    <table id="mytable">
    <tr>
    <td><input type="submit" value="按钮" onclick="test()" /></td>
    </tr>

    <tr>
    <td>第二行</td>
    <td>shunping</td>
    </tr>
    </table>
    </body>
    </html>

     

    bom(The Browser Object Model)-浏览器对象模型。

    如何把一个HTML文档映射成一个dom树。

    从dom编程的角度,就会把该HTML文档当做dom树,

    dom树如下所示:

    bom(browser object model)浏览器对象模型。

    因为做浏览器的厂家很多,w3c定义一个做浏览器的规范,规定

    bom如下所示:

    一定要支持window对象。

    bom为纲,dom为目,我们可以简单地理解,dom就是bom的具体体现。

    js把浏览器,网页文档和网页文档中的html元素都用响应的内置对象来表示,这些内置对象就是dom对象,编程人员通过访问dom对象就可以实现对浏览器本身、网页文档、网页文档中元素的控制,从而控制浏览器和网页元素的行为和外观。

    Window对象表示一个浏览器窗口或一个框架。在客户端JavaScript中,Window对象是全局对象,要引用当前窗口根本不需要特殊的语法,可以把那个窗口的属性作为全局变量来用。

    在使用window对象的方法和属性的时候,可以不带window,比如window.alert("shunping")可以写成alert("shunping");

    1.confirm()函数

    根据不同选择返回不同的布尔值。

    function test(){
    var res=window.confirm("你要删除!");
    if(res){
    window.alert("删除");
    }else{
    window.alert("放弃删除");
    }
    }
    <input type="button" value="删除记录" onclick="test()"/>

    (2)setInterval()

    该函数可以根据指定的时间,循环地执行某个函数,或者表达式,

    语法:setInterval(code, millisec,[,"lang"]).

    function sayHello(){
    window.alert("hello");
    }
    setInterval("sayHello()",1000);

    案例2:

    function showTime(){
    //在元素键的文本就是用过innerText获得的
    //document.writeln(new Date());
    document.getElementById("myspan").innerText=new Date().toLocaleString();
    //myspan.innerText=new Date().localetoString();
    }
    setInterval("showTime()",1000);
    <span id="myspan"></span>

    扩展要求:图片连续变动10次就停止。

    3.clearInterval():取消由setInterval设的timeout.

    var n=1;
        var count=0;
        //让静态图片动
        function runChild(){
            //得到img对象
    
            count++;
            if(count==11){
                //停止这个计时器
                clearInterval(myTimer);
            }
    
            var myimg=document.getElementById("myimg");
            myimg.src=((n++%7)+1)+".jpg";
        }
        //返回计时的次数
        var myTimer=setInterval("runChild()",1000);

    4.setTimeout()

    在指定的毫秒数后调用函数或计算表达式(但是只调用一次)

    setTimeout("sayHello()",5000);

    setTimeout的一种用法。

    var n=1;
        var count=0;
        //让静态图片动
        function runChild(){
            //得到img对象
    
            count++;
            if(count==11){
                //停止这个计时器
                clearInterval(myTimer);
                setTimeout("reRun()",5000);
                count=0;
            }
    
            var myimg=document.getElementById("myimg");
            myimg.src=((n++%7)+1)+".jpg";
        }
        //返回计时的次数
        var myTimer=setInterval("runChild()",1000);
    
        //5秒后调用sayHello
        //setTimeout("sayHello()",5000);
        function reRun(){
            myTimer=setInterval("runChild()",1000);
        }

    让setTimeout()方法和setInterval()切换调用,实现在10次后,停止运行setInterval(),在等待5秒后再次调用setInterval().

    (5)clearTimeout()

    function test(){
            window.alert("abc");
        }
        var mytimer=setTimeout("test()",3000);

    使用clearTimeout()来取消setTimeout()的设置。

    原本上述代码过3秒后会弹出abc,但是添加下面代码后就不会了。

    clearTimeout(mytimer);
  • 相关阅读:
    技嘉H81M-DS2 主板安装 XP方法,及网卡驱动安装
    XCode5无法设置Deployment Target的解决办法
    CALayer的contentsRect
    有道词典for mac不能取词解决方案
    应用沙盒(Application Sandbox)
    模态视图控制对象
    UUID(即GUID)
    UIView的endEditing:方法
    让UITableView进入编辑模式
    presentModalViewController方法,present一个透明的viewController,带动画效果
  • 原文地址:https://www.cnblogs.com/liaoxiaolao/p/9790399.html
Copyright © 2020-2023  润新知