【学习笔记】：DOM对象及事件绑定

前端开发作者： 2024-08-20 23:30:01

[toc] 一、DOM的概念 DOM的英文全称是 Document Object Model ，即文档对象模型，是用以操作 HTML文档和XML文档的API。 W3C将DOM分为三个不同的部分，分别

一、DOM的概念

二、DHTML与HTML DOM

三、Document对象

四、Element对象

document.getElementByTagName("input")[0].setAttribute("type","button");

document.getElementById("city").removeAttribute("style");

五、对DOM对象的操作

document.createElement("节点类型");//为指定的标签创建一个元素的实例。

parentElement.appendChild(childElement);//在父元素最后位置添加子元素。
parentElement.insertBefore(newElement,oldElement);//将元素作为父对象的子元素插入其中。

parentElement.removeChild(chileElement);//删除父元素的指定子元素。

newElement = oldElement.cloneNode(boolean);//默认为false，即不克隆节点中的子节点。

六、调整元素样式的方式

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function changeStyle() {
                document.getElementById("p1").style.border= "red 1px solid";
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="changeStyle()" value="点击更改样式">
    </body>

    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <style>
            .change {
                border: red 1px solid;
            }
        </style>
        <script>
            function changeStyle() {
                document.getElementById("p1").className = "change";
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="changeStyle()" value="点击更改样式">
    </body>

七、Event对象

点击事件

onclick：单击事件
ondbclick：双击事件

焦点事件

onblur：失去焦点，一般用于表单校验。
onfocus：获得焦点。

加载事件

onload：图片或页面加载完成。

鼠标事件

onmousedown：鼠标按下。
onmouseup：鼠标松开。
ommousemove：鼠标移动。
onmouSEOver：鼠标移到元素上。
onmouSEOut：鼠标从元素上移开。

键盘事件

onkeydown：键盘按下。
onkeyup：键盘松开。
onkeypress：键盘按下并松开。

选中和改变事件

onchange：域的内容被改变
onselect：文本被选中

表单事件

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            function fun() {
                alert("!!");
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" onclick="fun()" value="点击触发">
    </body>
</html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            window.onload = function () {
                var ele = document.getElementsByTagName("input")[0];
                ele.onclick = function () {
                    alert("!!");
                }
            }
        </script>
    </head>
    <body>
        <p id="p1">hello</p>
        <input type="button" value="点击触发">
    </body>
</html>

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65777.html

相关资讯：【学习笔记】：DOM对象及事件绑定