JavaScript操作 DOM 的这些事件基础

最新推荐文章于 2024-11-16 14:11:26 发布

前端史塔克

最新推荐文章于 2024-11-16 14:11:26 发布

阅读量1.2k

点赞数

分类专栏： javascript 基础文章标签： javascript 前端开发语言 es6 dom操作

本文链接：https://blog.csdn.net/qq_42799488/article/details/121985356

版权

javascript 基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

回顾

上一篇中我们初步了解了一下 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>