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>

常见事件

相关推荐
zczlsy1127 分钟前
webpack介绍
前端·webpack·node.js
六个点29 分钟前
关于vue的面试考点总结🤯
前端·vue.js·面试
浪遏1 小时前
今晚揭开单例模式的面纱~
前端·设计模式·面试
驯龙高手_追风2 小时前
谷歌Chrome或微软Edge浏览器修改网页任意内容
前端·chrome·edge
luckyext2 小时前
Postman发送GET请求示例及注意事项
前端·后端·物联网·测试工具·小程序·c#·postman
dorabighead2 小时前
重构版:JavaScript 的 new 操作符——从“黑箱仪式”到“亲手造物”的认知跃迁
开发语言·javascript·重构
小满zs2 小时前
React第三十章(css原子化)
前端·react.js
一直在学习的小白~2 小时前
前端项目中创建自动化部署脚本,用于 Jenkins 触发 npm run publish 来完成远程部署
前端·自动化·jenkins
Humbunklung2 小时前
C#中通过Response.Headers设置自定义参数
开发语言·c#
Trouvaille ~3 小时前
【Java篇】一法不变,万象归一:方法封装与递归的思想之道
java·开发语言·面向对象·javase·递归·方法·基础入门