Dom第一天学习总结

最新推荐文章于 2022-10-20 22:19:11 发布

const伐伐

最新推荐文章于 2022-10-20 22:19:11 发布

阅读量375

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/u013905744/article/details/47905959

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1. Dom作用

   JavaScript最终是要操作Html页面，让Html变为DHtml，而操作Html就要用到Dom。
   Dom就是把Html页面模拟成一个对象。就像XDocument一样，把XML模拟成了一个对象,
   提供了操作各个节点的方法，直接调用就可以了。
   如果JavaScript只是执行一些计算、循环等操作，而不能操作Html，
   也就失去了存在的意义

2. Dom入门

Dom就是Html页面的模型，将每个标签都做成一个对象，JavaScript通过调用Dom中的
属性、方法就可以对网页中的文本框、层等元素进行编程控制。

比如通过操作文本框的Dom对象，就可以读取文本框中的值、设置文本框中的值。

   JavaScript-->Dom 就相当于 c#-->.Net Framework
   没有.Net，c#就只能for, while，连writeline messagebox都不行
   Dom就是一些让JavaScript能操作Html页面控件的类、函数
   Dom也像winform一样，通过事件、属性、方法进行编程

3. 顶级对象

   这个网页就是一个window对象--window是顶级对象，window对象代表当前浏览器窗口
   使用window对象的属性、方法时可以省略window
   能不写window就不要写，这样可以减少js文字的字节数
   document并不是顶级对象

<head>
        <title></title>    
            <script type="text/javascript">
            //方法1
            window.onload = function () {
                document.getElementById('btn2').onclick = f2;     //如果写成f2() 则表示直接调用
                                                                //而不是点击调用
            };
            //获取页面的按钮并注册事件
            
            //方法2
            function f1() {
            //this代表window
                alert(this.id);
            }

            function f2() {
            //this是代表按钮
                alert(this.id);  
            }
        </script>
    </head>
    <body>
    <!--如果在标签中直接让事件执行什么方法，必须加括号-->
    <input type = "button" name = "name" value = "第一个" id = "btn1"  onclick = "f1()"/>
    <input type = "button" name = "name" value = "第二个" id = "btn2" />
    </body>

4. document 和 body范围

   document 范围大
   body范围只是body所在区域
   页面的点击事件有两个
   body的onclick       --只限于在body中点击才触发
   document.onclick    --整个页面内点击都可以触发

5. 对话框转跳

window.alert('大家好'); // 警告对话框

   window.confirm('确定要删除吗？');     // 确定取消对话框
   window.navigate(url)               // 将网页重新导航到url，只支持IE
   window.location.href = 'http://www.baidu.com'   //支持大多数浏览器

6. 计时器

   window.setInterval(code,delay) //每隔一段时间执行一次指定的代码
   类似于winform中的Timer控件

   var setId = setInterval(function () {
   alert('haha')
   }, 1000);
   //清除计时器
   clearInterval(setId);
   因为setInterval可以设定多个定时器，所以clearInterval要指定哪个定时器
   即setInterval的返回值

7. 一次性计时器

setTimeout(code,delay)
clearTimeout(timeoutID)

const伐伐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dom第一天学习总结

Dom就是一些让JavaScript能操作Html页面控件的类、函数JavaScript最终是要操作Html页面，如果JavaScript只是执行一些计算、循环等操作，而不能操作Html，也就失去了存在的意义
复制链接

扫一扫