JS(DOM、事件)

DOM

  • 概念:Document Object Model,文档对象模型。
  • 将标记语言的各个组成部分封装为对应的对象:
  1. Document:整个文档对象
  2. Element:元素对象
  3. Attribute:属性对象
  4. Text:文本对象
  5. Comment:注释对象
  • JavaScript通过DOM,就能够对HTML进行操作:
  1. 改变 HTML 元素的内容
  2. 改变 HTML元素的样式(CSS)
  3. 对 HTML DOM 事件作出反应
  4. 添加和删除 HTML 元素

事件绑定

  • 方式一:通过HTML表签中的事件属性进行绑定

    复制代码
    <input type="button" onclick="on()" value="按钮1">
    <script>
         function on(){
             alert('我被点击了!'    );
         }
    </script>
  • 方式二:通过DOM元素属性绑定

    复制代码
    <input type="button" id="btn" value="按钮2">
    <script>
         document.getElementById('btn').onclick=function(){
             alert('我被点击了!');
    }
    </script>

常见事件

相关推荐
iCxhust1 小时前
Prj10--8088单板机C语言8259测试(1)
c语言·开发语言
kite01214 小时前
浏览器工作原理06 [#]渲染流程(下):HTML、CSS和JavaScript是如何变成页面的
javascript·css·html
крон4 小时前
【Auto.js例程】华为备忘录导出到其他手机
开发语言·javascript·智能手机
zh_xuan4 小时前
c++ 单例模式
开发语言·c++·单例模式
老胖闲聊5 小时前
Python Copilot【代码辅助工具】 简介
开发语言·python·copilot
Blossom.1185 小时前
使用Python和Scikit-Learn实现机器学习模型调优
开发语言·人工智能·python·深度学习·目标检测·机器学习·scikit-learn
曹勖之5 小时前
基于ROS2,撰写python脚本,根据给定的舵-桨动力学模型实现动力学更新
开发语言·python·机器人·ros2
豆沙沙包?6 小时前
2025年- H77-Lc185--45.跳跃游戏II(贪心)--Java版
java·开发语言·游戏
军训猫猫头6 小时前
96.如何使用C#实现串口发送? C#例子
开发语言·c#
coding随想6 小时前
JavaScript ES6 解构:优雅提取数据的艺术
前端·javascript·es6