C#编程--JavaScript操作DOM

最新推荐文章于 2022-07-23 10:43:55 发布

溪午X

最新推荐文章于 2022-07-23 10:43:55 发布

阅读量653

点赞数

本文链接：https://blog.csdn.net/qq_37855507/article/details/87893762

版权

一、通过ID获取页面上的元素对象

document.getElementById(‘data’).value = ‘Hello World’; //获取到DOM元素

<body>
    <form id="form1" runat="server">
    <div class="base1" style="text-align:center;margin-top:10em;height:20em;">
        <div class="a" style="margin-bottom:1em;">
            <span>测试显示数据：</span>
            <input id="data" type ="text"/>
            <input id="button" type="button" value="按钮"/>
        </div>
       <div id="hightChart" style="margin:0 auto 0 auto;width:40%;height:100%;">
       </div>
    </div>
    </form>

</body>
    <script type="text/javascript">
                document.getElementById('data').value = 'Hello World';   //获取到DOM元素
    </script>

二、为元素对象注册事件

    //尽量写匿名函数，使用动态注册事件。
    <script type="text/javascript">
        //通过动态注册事件的方式实现js代码与html网页代码相分离。
        window.onload = function () {
            document.getElementById('button').onclick = function () {
                alert('按钮被单击了');
            };
        }

    </script>

    <script type="text/javascript">
        //通过动态注册事件的方式实现js代码与html网页代码相分离。
        window.onload = function () {
            //这种写法相当于是将整个函数赋值给button按钮的onclick
            document.getElementById('button').onclick = f1;
            //这种写法相当于是将函数f1()的返回值赋值给button按钮的onclick，没有任何意义。
            document.getElementById('button').onclick = f1();       //错误
        }
        function f1(){
            alert('11111111111');
        }
    </script>

三、window对象的一些常用函数

1. confirm对话框：

window.confirm(‘确定要删除吗？’)； //确定、取消对话框，放回true或false；

    <script type="text/javascript">
        window.onload = function () {
            document.getElementById('button').onclick = function () {
                if (confirm('确定要删除吗？'))
                {
                    alert('删除成功！')
                }
                else
                {
                    alert('取消删除！')
                }
            };
        }
    </script>

2. window.setInterval(code,delay):

每隔一段时间执行指定的代码（类似于winform中的Timer控件）

第一个参数：指定的代码字符串
第二个参数：时间间隔；
var intervalld = setInterval(“alter(‘Hellow’);”,1000);

3. window.clearInterval(intervalld) 停止计时器

clearInterval()取消setInterval的定时执行，相当于Timer中的Enable=Flase。因为setInterval可以设定多个定时，所以clearInterval要指定清除那个定时器的标识，即setInterval的返回值。

<body>
    <form id="form1" runat="server">
    <div class="base1" style="text-align:center;margin-top:10em;height:20em;">
        <div class="a" style="margin-bottom:1em;">
            <span>测试显示数据：</span>
            <input id="text1" type ="text" value="0"/>
            <input id="button1" type="button" value="开始"/>
            <input id="button2" type="button" value="停止"/>
        </div>
       <div id="hightChart" style="margin:0 auto 0 auto;width:40%;height:100%;">
       </div>
    </div>
    </form>
</body>
    <script type="text/javascript">
        var intervalID;
        window.onload = function () {
            document.getElementById('button1').onclick = function () {
                //启动一个计时器
                intervalID = setInterval(function () {
                    //获取文本框对象，以后不用打document.getElementById('text1')
                    var texObj=document.getElementById('text1')
                    //每隔一秒钟，让文本框中的数字累加
                    //1.获取文本框中的值；
                    var v1 = texObj.value;
                    //2. 值加一
                    v1 = parseInt(v1) + 1;
                    //3，将新值重新赋值给文本框
                    texObj.value = v1;
                }, 1000);
            }
            document.getElementById('button2').onclick = function () {
                clearInterval(intervalID);
            }
        }
    </script>

4. setTimeout 超时执行，执行一次。

5. 页面加载/卸载完毕后执行的事件

    <script type="text/javascript">
        window.onload = function () {
            alert('页面加载完成');
        }
        window.onbeforeunload = function () {
            alert('页面即将卸载');
        };
    </script>