写点什么

JavaScript 操作 DOM 的这些事件基础

作者:前端史塔克
  • 2021 年 12 月 16 日
  • 本文字数:2240 字

    阅读完需:约 7 分钟

回顾

上一篇中我们初步了解了一下 WebApi 这些接口,知道了支撑 WebApi 的两个核心点 DOM 和 BOM,上一篇主要聊的是获取元素的这些方法,这一篇中会着重说一下操作元素的这些方法。

事件基础

概述:简而言之,js 让我们有能力创建动态页面,事件使可以被 js 侦测到的行为一般分为三步


  • 第一步:获取事件源

  • 第二步:注册事件(绑定事件)

  • 第三步:添加事件处理程序(采取函数赋值形式)


// 点击一个按钮,弹出对话框// 1、事件有三部分组成  事件源  事件类型  事件处理程序  称之为:事件三要素// (1)、事件源 事件倍触发的对象// (2)、事件类型 如何触发 什么事件 比如鼠标点击(onclick) 还是鼠标经过 键盘按下等// (3)、事件处理程序 通过一个函数赋值的方式完成
var btn = document.getElementById("air")btn.onclick = function () {alert("空气")}
复制代码



除了这些点击的之外还有以下这几种常用的


  • onclick:鼠标点击左键触发

  • onmouseover:鼠标经过触发

  • onmouseout:鼠标离开触发

  • onmouseover:鼠标经过触发

  • onfocus:获得鼠标焦点触发

  • onblur:失去鼠标焦点触发

  • onmousemove:鼠标移动触发

  • onmouseup:鼠标弹起触发

  • onmousedown:鼠标按下触发


var btn = document.getElementById("btn");// 鼠标点击btn.onclick = function () {console.log('我被选中了')}
// 鼠标经过btn.onmouseover = function () {console.log('你经过了我');}
// 鼠标离开btn.onmouseout = function () {console.log('你离开了我')}
// 鼠标移动btn.onmousemove = function () {console.log('你在移动');}
复制代码



操作元素

js 的 DOM 操作可以改变网页内容、结构和样式。我们可以利用 DOM 操作元素来改变元素里面的内容、属性等。注意以下都是属性

改变元素的内容
  • element.innerText:从起始位置到终止位置的内容,但它去除 html 标签,同时空格和换行也会去掉(innerText 不识别 html 标签)


// 点击按钮 div 中内容发生变化// element.innerText -> 改变元素内容(不改变标签)// element.innerHTML -> 改变元素内容和标签
var btn = document.getElementById("btn");var time = document.getElementById("time");
btn.onclick = function () {time.innerText = "2021-12-08"console.log('当前事件日期')}
// 如果页面打开直接显示的话,不需要添加注册时间 onclick// time.innerText = '2021-12-08'
复制代码



  • element.innerHTML(推荐):从起始位置到终止位置的全部内容,包括 html 标签,同时保留空格和换行(w3c 推荐)


// innerHTML 改变元素和内容  -> W3C推荐var btn = document.getElementById("btn");var div = document.getElementById("div");btn.onclick = function () {// 点击改变元素和内容div.innerHTML = '<strong style="color: blue">七里香</strong>'console.log('元素和内容都被改变了')}
复制代码



常见元素的属性操作

  • innerText、innerHTML 修改元素内容

  • src、href

  • id、alt、title


注意:连接需要修改属性,例如 img.src、img.title



<body>
<button id="left">向左</button><button id="right">向右</button><img id="img" src="./img/l.png" alt="">
</body><script>var left = document.getElementById("left");var right = document.getElementById("right");var image = document.getElementById("img");
// 点击左,更改图片向左left.onclick = function () {image.src = './img/l.png'}
// 点击右,更改图片向右right.onclick = function () {image.src = "./img/r.png"}</script>
复制代码
表单元素属性操作

利用 DOM 可以操作如下表单元素的属性


type、value、checked、selected、disabled


  • display:none(隐藏)

  • display:block(显示)


<body><button id="btn">点击按钮</button><input id="ipt" type="text" value="请输入内容"></body><script>var btn = document.getElementById("btn");var ipt = document.getElementById("ipt");
btn.onclick = function () {// 改变 input 中 value 的值ipt.value = '你还没输入内容'
// 如果想要点击之后被禁用 也可以用 this(指的是事件函数的调用者)btn.disabled = true
// this.disabled = true}</script>
复制代码



样式属性操作

通过 js 修改元素的大小、颜色、位置等样式


  • element.style —— 行内样式操作(如果样式较少,推荐这种)


<body>  <div id="container"></div></body>
<script> // 获取 div 元素 var container = document.getElementById("container");
// 点击之后更改颜色和宽度 container.onclick = function () { // 更改颜色 container.style.backgroundColor = 'red' // 更改宽度 this.style.width = '250px' }
</script>
<style> #container { width: 200px; height: 200px; background-color: skyblue; }</style>
复制代码



  • element.className —— 类名样式操作(如果样式较多,推荐这种)


<body><div class="cls1"></div></body>
<script>var cls = document.querySelector('div');// 点击修改样式名cls.onclick = function () {cls.className = 'cls2'}</script>
<style>.cls1 { width: 200px;height: 200px;background-color: skyblue;}
.cls2 {width: 200px;height: 200px;background-color: orange;}</style>
复制代码



注意:


  • 如果样式修改较多,可以采用操作类名方式更改元素样式

  • class 因为是个保留字,因为使用 className 来操作元素类名属性

  • className 会直接更改元素的类名,会覆盖原先的类名

发布于: 2 小时前阅读数: 5
用户头像

还未添加个人签名 2019.09.04 加入

普及从学校到工作怎么快速转变,更高效学习前端知识及后续发展趋向,更好快速的融入到工作中 关注公号:前端史塔克

评论

发布
暂无评论
JavaScript操作 DOM 的这些事件基础