学习笔记之Dom_01

最新推荐文章于 2021-07-24 10:38:00 发布

有意思的经Jerry编程小课堂

最新推荐文章于 2021-07-24 10:38:00 发布

阅读量427

点赞数

分类专栏： .Net 文章标签： function input javascript button 文档 html

本文链接：https://blog.csdn.net/J_adam/article/details/7049862

版权

.Net 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、DOM（Document Object Model，文档对象模型）

dom是浏览器解释完html标签后，为每个标签生成的对应的标签对象。这些对象储存在浏览器缓存中，一旦网页关闭，这些dom对象就会被销毁。（JavaScript与DOM之间的关系就是C#与.Net之间的关系

（一）DOM的意义

它的意义就是映射相应的文档对象，HTML DOM映射一个网页的方方面面的内容，他映射一个网页有什么用？其实他不仅仅是映射文档，同时他动态的提供了访问和操作文档的功能。因为有这样一种需求，例如，对于已经编写好的网页需要改写他的背景颜色，这样就需要改写他的bgcolor，怎么改写？对于已经编写好的网页，DOM正是提供了这样的一种方法，他不仅能访问读取bgcolor，他还可以改。

（二）DOM就是HTML的模型

（三）JavaScript+DOM+CSS=DHTML

HTML：只是标记网页，比如标记了一个文本框、设定了背景颜色是红色、宽度为多少像素等等

CSS：网页的“美丽外衣”，在HTML标签的Style属性中为标签设置很多属性，给网页穿上了“美丽的外衣”

DOM：获取网页中标签元素的对象，并且提供动态修改的方法

JavaScript：

二、window对象

代表当前浏览器窗口

（一）方法

1.alert()方法

2.confirm()方法

显示“确定”、“取消”对话框，按【确定】返回true，否则返回false

3.navigate()方法

重新导航到指定地址，在本网页跳转

4.setInterval()

每隔一段时间执行一段代码

5.clearInterval()

取消setInterval的定时执行，需要传入setInterval的变量名

<head>
    <title></title>
    <script type="text/javascript">
        var myInterval;
           function mySetInterval() {
           myInterval= setInterval("alert('Hi')", 2000);
       }
            
    </script>
</head>
<body>
<input type="button" value="问候" οnclick="mySetInterval()" />
<input type="button" value="停止" οnclick="clearInterval(myInterval)" />
</body>

6.setTimeout()、clearTimeout()

定时执行，只执行一次。

（二）属性

1.location.href

重新导向新地址

2.event

用来获得发生事件时的信息

<input type="button" value="按Ctrl" οnclick="location.href='Default.aspx';event.returnValue=false;" />

三、body、document对象

（一）事件

1.onload()

网页加载完毕时触发

2.onunload()

网页关闭（或离开）后触发

3.onbeforeunload()

网页准备关闭（或离开）前触发

4.其他事件

onclick（单击）、ondbclick（双击）、onkeydown（按键按下）、onkeypress（点击按键）、onkeyup（按键释放）、onmousedown（鼠标按下）、onmousemove（鼠标移动）、onmouseout（鼠标离开元素范围）、onmouseover（鼠标进入元素范围）、onmouseup（鼠标按键释放）等

（二）document对象的方法

1.write()方法

向文档中写入内容，可以在head里，也可以在body里

    <script type="text/javascript">
        document.write("<a href='http://www.baidu.com'>你好啊，亲！</a>");
    </script>

注意：在onclick等事件中写document.write()会冲掉原页面的内容，只有在页面加载过程中write才不会冲掉

2.getElementById()方法

根据输入的Id值返回一个对象

        function btnclick() {
            var txt = document.getElementById("textbox1");
            alert(txt.value);
        }

3.getElementsByName()方法

返回对象数组

        function btnclick() {
            var radios = document.getElementsByName("gender");
            for (var i = 0; i < radios.length; i++) {
                alert(radios[i].value);
            }
        }//用foreach只能得到索引值

4.getElementsByTagName()方法

返回相同标签名的对象数组

    <script type="text/javascript">
        function intiEvent() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                input.onclick = btnClick;
            }
        }
        function btnClick() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input == window.event.srcElement) {
                    input.value = "呜呜";
                }
                else {
                    input.value = "哈哈";
                }
            }
        }
    </script>

5.同意协议案例

    <script type="text/javascript">
    var time=10;
        function countDown() {
            var btnreg = document.getElementById("btnreg");
            if (btnreg) {//判断btnreg是否被加载
                if (time > 0) {
                    btnreg.value = "请阅读该协议，剩余" + time + "秒";
                    time--;
                }
                else {
                    btnreg.value = "同意";
                    btnreg.disabled = "";
                }
            }
        }
        setInterval("countDown()", 1000);
    </script>