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>

常见事件

相关推荐
牢七9 分钟前
jfinal_cms-v5.1.0 白盒 nday
开发语言·python
LXXgalaxy9 分钟前
`摸鱼决策轮盘`【vue3+ts前端实战小项目】
前端
这是个栗子14 分钟前
关于 TypeScript 的介绍
前端·javascript·typescript
亿元程序员21 分钟前
亿元Cocos小游戏实战合集指南和答疑
前端
开开心心就好24 分钟前
伪装文件历史记录!修改时间的黑科技软件
java·前端·科技·r语言·edge·pdf·语音识别
饼干哥哥29 分钟前
聊了50个AI出海的市场团队,我总结了达人营销的7宗罪
前端
词元Max29 分钟前
2.5 Python 类型注解与运行时类型检查
开发语言·python
qq_4275060830 分钟前
vscode使用kimi code的简单经验分享
前端·vscode·ai编程
恋猫de小郭32 分钟前
Claude Code 源码里有意思设定:伪造、投毒、卧底、封号
前端·人工智能·ai编程
福楠44 分钟前
现代C++ | C++14甜点特性
linux·c语言·开发语言·c++