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>

常见事件

相关推荐
weixin_53944678几秒前
使用Java HttpServletResponse和JavaScript Fetch下载文件
java·javascript·python
每天吃饭的羊7 分钟前
LeetCode JS 常用辅助数据结构
前端
wb0430720111 分钟前
外卖大战——从阿明的“3 秒生死线“,看系统性能优化的全链路方法论
开发语言·性能优化·架构·php
小的~~11 分钟前
Java线程及线程池的相关的问题
java·开发语言·多线程
丑过三八线12 分钟前
【无标题】
前端
CTA终结者15 分钟前
Python 写期货自动交易:行情下单与成交回报怎么组织
开发语言·python·区块链
yuananyun18 分钟前
APP 图标规范与设计全攻略:iOS/Android/Web 一次设计多端合规,快速出图
android·前端·ios
李剑一18 分钟前
面试问网络?问到我的软肋了。面试官:讲一下HTTP强缓存与协商缓存
前端·面试
小雨下雨的雨21 分钟前
近视度数模拟器鸿蒙PC Electron框架技术实现详解
前端·javascript·electron
TE-茶叶蛋22 分钟前
Next.js中App Router 全部特殊文件一览
开发语言·javascript·网络