当前位置：网站首页>Document Object Model

Document Object Model

2022-08-05 23:20:00 【是柴哎】

一.DOM简介

文档

-文档表示的就是整个的HTML网页文档

对象

-对象表示将网页中的每一个部分都转换为了一个对象

模型

-使用模型来表示对象之间的关系，这样方便我们获取对象

<body>
    <button id="btn">我是一个按钮</button>
    <script type="text/javascript">
        var btn = document.getElementById("btn")
        btn.innerHTML="我是修改后的按钮"
    </script>
</body>

 

 二.事件的简介

1.获取按钮对象

2.可以为按钮的对应事件绑定处理函数的形式来响应事件。这样当事件被触发时，其对应的函数将会被调用

3.绑定一个事件

<body>
    <button id="btn">我是一个按钮</button>
    <script>
        //获取按钮对象
        var btn = document.getElementById("btn")
        /*
         * 可以为按钮的对应事件来绑定处理函数的形式来响应事件
         * 这样当事件被触发时，其对应的函数将会被调用
         */
       
        //绑定一个单击事件
        //像这种为单击事件绑定的函数，我们称为单击响应函数
        btn.onclick = function () {
            alert("你又点")
        }
    </script>
</body>

3.1

1.将<script>写在<head>里

onload事件会在整个页面加载完成之后才触发为window绑定一个onlead事件

        该事件对应的响应函数将会在页面加载完成之后执行

        这样可以确保我们的代码执行所以的DOM对象已经加载完毕了

<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        window.onload = function () {
            var btn = document.getElementById("btn");
            btn.onclick = function () {
                alert("hello")
            }
        }
    </script>
</head>
<body>
    <button id="btn">点我一下</button>
</body>
</html>

        

4.获取元素节点

-通过document对象调用

1.getElementByld()

-通过id属性获取一个元素节点对象

2.getElementsByTagName()

-通过标签名获得一组元素节点对象

3.getElementsByName()

-通过name属性获取一组元素节点对象

原网站

版权声明
本文为[是柴哎]所创，转载请带上原文链接，感谢
https://blog.csdn.net/qq_64131715/article/details/126081002

边栏推荐

猜你喜欢

随机推荐