回顾
上一篇中我们初步了解了一下 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 操作元素来改变元素里面的内容、属性等。注意以下都是属性
改变元素的内容
// 点击按钮 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'
复制代码
// innerHTML 改变元素和内容 -> W3C推荐var btn = document.getElementById("btn");var div = document.getElementById("div");btn.onclick = function () {// 点击改变元素和内容div.innerHTML = '<strong style="color: blue">七里香</strong>'console.log('元素和内容都被改变了')}
复制代码
常见元素的属性操作
注意：连接需要修改属性，例如 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 修改元素的大小、颜色、位置等样式
<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>
复制代码
<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 会直接更改元素的类名，会覆盖原先的类名
评论