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>

常见事件

相关推荐
程序员小续2 分钟前
React 官方严令禁止:Hook 不能写在 if/else,真相竟然是…
前端·javascript·程序员
懒得不想起名字2 分钟前
flutter_riverpod: ^2.6.1 应用笔记
前端
CrabXin3 分钟前
让网页在 PC 缩放时“纹丝不动”的 4 个技巧
前端·react.js
@半良人10 分钟前
Deepseek+python自动生成禅道测试用例
开发语言·python·测试用例
Juchecar13 分钟前
Naive UI 学习指南 - Vue3 初学者完全教程
前端·vue.js
用户81686947472514 分钟前
从0到1教你开发一个Mini-ESLint
前端·开源
coding随想14 分钟前
JavaScript中的DOM事件对象Event全解析
前端
专研狂15 分钟前
React 的闭包陷阱 + 状态异步更新机制
前端
一只鲲18 分钟前
48 C++ STL模板库17-容器9-关联容器-映射(map)多重映射(multimap)
开发语言·c++
zabr19 分钟前
AI黑箱解密:开发者必须了解的AI内部机制真相,原来我们一直被忽悠了
前端·aigc·ai编程