4 操作元素
JavaScript的DOM操作可以改变网页内容、结构和样式。我们可以利用DOM操作元素来改变元素里面的内容、属性等。
4.1改变元素内容
改变元素内容有两种方法：
-
**element.innerText：**从起始位置到终止位置的内容，但是它去除html标签，同时空格和换行也会去掉
-
**element.innerHTML：**从起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行。推荐用法。
如下代码为点击按钮后div显示当前的日期。
<button id="btn">获取系统当前时间</button>
<div id="div"></div>
<script>
// 获取元素
let btn = document.getElementById('btn');
let div = document.getElementById('div');
// 给按钮注册事件
btn.onclick = function(){
var date = new Date();
// 给div设置内容，以下两种方式都可以
// div.innerHTML = getMayDate(date);
div.innerText = getMayDate(date);
};
// 封装一个函数，用来获取当前时间的年月日
function getMayDate(date){
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
let str = year+'年'+ month + '月' + day + '日'
return str
}
</script>
二者区别：
-
innerText不能识别html标签，会把标签当成普通文本。如下代码示例：
<div></div> <script> let div = document.querySelector('div'); div.innerText = "我们放<strong>暑假</strong>啦！" </script>页面效果如下：
-
innerHTML可以识别html标签，如下代码：
div.innerHTML = "我们放<strong>暑假</strong>啦！"页面效果如下：
-
二者都是可读写的。innerText会去除空格和换行，如下代码示例：
<p>
我是p标签中的文字
<span>我是span中的文字</span>
</p>
<script>
let p = document.querySelector('p');
console.log(p.innerText);
</script>
页面控制台输出如下：
-
innerHTML会保留空格和换行，如下代码:
console.log(p.innerHTML)页面控制台输出如下：
4.2 常用元素的属性操作
innerText、innerHTML改变元素内容，修改元素的src、href属性，修改元素的id、alt、title属性等等。
如下代码示例修改元素的src属性
<button id="btndog">狗</button>
<button id="btncat">猫</button>
<div><img src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407010915057.png" alt=""></div>
<script>
// 获取元素
let btndog = document.querySelector("#btndog");
let btncat = document.querySelector("#btncat");
let img = document.querySelector('img')
// 注册事件
btndog.onclick = function(){
img.src = 'https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407010915057.png'
};
btncat.onclick = function(){
img.src = 'https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407010915138.png'
}
</script>
页面运行效果如下：
4.3 分时问候案例
根据不同时间，页面显示不同图片，同时显示不同的问候语。
分析：
- 根据系统不同时间来判断，所以需要用日期内置对象。
- 利用多分支语句来设置不同的图片。
- 需要一个图片，并且根据实际修改图片，就需要用到操作元素src属性。
- 需要一个div元素，显示不同的问候语，修改元素内容。
如下代码示例：
<body>
<img src="" alt="">
<div></div>
<script>
// 1.获取元素
let img = document.querySelector('img');
let div = document.querySelector('div');
//2.获取当前时间
let date = new Date();
let h = date.getHours();
//3.判断小时数改变图片和文字信息
if (h<12){
img.src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407061021373.png";
div.innerHTML = "上午好！"
}else if(h < 18){
img.src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407061021854.png";
div.innerHTML = "下午好！"
}else{
img.src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407061022709.png";
div.innerHTML = "晚上好！"
}
</script>
</body>
4.4 表单元素的属性操作
利用DOM可以操作表单元素的属性：type、value、checked、selected、disabled。
如下代码示例，点击按钮文本输入框中的文字发生改变,并且同时按钮不能再被点击：
<body>
<button>按钮</button>
<input type="text" value="输入内容">
<script>
// 1. 获取元素
let btn = document.querySelector('button');
let input = document.querySelector('input');
// 2.注册事件，处理程序
btn.onclick = function(){
// 表单里的值 即文字内容，是通过value属性来修改的
input.value = '被点击了';
// 如果让某个表单禁用，用disabled属性
btn.disabled = true;
}
</script>
</body>
注意注册事件的处理程序也可以使用this，this指向的是程序的调用者，上面代码中btn.disabled = true可以写成this.disable = true。
4.5 显示密码小案例
实现效果如下：
如下是完整代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 引入字体图标的相关css -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4611953_pmz32rci4vn.css">
<style>
.box{
width: 400px;
height: 30px;
border-bottom: 2px solid rgb(41, 41, 41);
margin: 0 auto;
margin-top: 300px;
line-height: 30px;
}
.box input{
width: 360px;
font-size: 18px;
outline: none;
border: 0;
}
#eye{
color: #191919;
cursor: pointer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="box">
<form action="">
<input type="password" value="">
<span id="eye" class="iconfont icon-biyan"></span>
</form>
</div>
<script>
// 1.获取元素
var input = document.querySelector('input');
var eye = document.querySelector('#eye');
// 2.注册事件
// 定义一个flag变量用来记录小眼睛的当前状态
var flag = 0;
eye.onclick = function(){
// 根据flag值来做判断，根据不同条件执行不同的程序
if(flag == 0){
// 采用的是字体图标，睁开眼睛的类名
eye.className = 'iconfont icon-jurassic_openeyes';
input.type = 'text';
this.style.fontSize = "20px";
flag = 1;
}else{
eye.className = 'iconfont icon-biyan';
input.type = 'password';
this.style.fontSize = "16px";
flag = 0;
}
}
</script>
</body>
</html>
4.6 元素样式属性相关操作
我们可以通过JS修改元素的大小、颜色、位置等样式。可以通过以下两种方式修改
- element.style 行内样式操作
- element,className 类名样式操作
**案例一：**如下代码示意页面中一个蓝色盒子，鼠标点击盒子后会变成红色同时宽度变大：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>样式属性相关操作</title>
<style>
div{
height: 300px;
width: 300px;
background-color: aqua;
}
</style>
</head>
<body>
<div></div>
<script>
// 1.获取元素
let div = document.querySelector('div');
// 2.注册事件
div.onclick = function(){
this.style.backgroundColor = "red";
this.style.width = "400px";
}
</script>
</body>
</html>
注意：
- JS里的延时采取驼峰命名法，比如
fontSize、backgroundColor - JS修改style样式操作，产生的是行内样式，CSS权重比较高
**案例二：**之前在写CSS布局时写过一个案例，如下效果，用固定定位，把自己二维码一直展示在页面中。
当时只用CSS是无法实现点击关闭的功能，下面结合JS可以实现单击关闭。首先在页面中添加一个×号的符号，如下代码示例
<div class="myblog">
欢迎阅读本文章，更多内容请扫码关注我的博客！
<div class="qr-code"><img src="https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202406231100021.png" alt="我的二维码"></div>
<i class="close-btn">x</i>
</div>
对应样式如下：
.close-btn{
position:absolute;
left: -20px;
top:0;
cursor: pointer;
font-style: normal;
color:red;
}
JS代码如下：
<script>
// 1.获取元素
let myblog = document.querySelector(".myblog");
let closeBtn = document.querySelector('.close-btn');
// 2.注册事件
closeBtn.onclick = function(){
myblog.style.display = 'none';
}
</script>
运行效果如下：
**案例三：**循环精灵图
如下代码用循环的方式来设置精灵图的图纸。
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav{
background-color: rgb(240, 240, 240);
width: 290px;
height: 290px;
padding: 16px;
box-sizing: border-box;
}
.row-nav{
clear: both;
height: 70px;
margin-bottom: 20px;
}
.item-nav{
float: left;
width: 48px;
height: 70px;
margin-right: 22px;
text-align: center;
}
.row-nav :last-child{
margin-right: 0;
}
.item-nav .icon{
height: 48px;
width: 48px;
background-image:url("https://xyyhxxx.oss-cn-beijing.aliyuncs.com/picGoImg/202407071501900.png");
}
.item-nav span{
font-size: 14px;
line-height: 22px;
}
</style>
</head>
<body>
<div class="nav">
<div class="row-nav">
<div class="item-nav">
<div class="icon"></div>
<span>话费</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>火车票</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>加油卡</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>白条</span>
</div>
</div>
<div class="row-nav">
<div class="item-nav">
<div class="icon"></div>
<span>电影票</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>酒店</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>理财</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>机票</span>
</div>
</div>
<div class="row-nav">
<div class="item-nav">
<div class="icon"></div>
<span>礼品卡</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>彩票</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>游戏</span>
</div>
<div class="item-nav">
<div class="icon"></div>
<span>众筹</span>
</div>
</div>
</div>
<script>
//1.获取元素
let rowNavs = document.querySelectorAll(".row-nav");
// 2.通过for循环设置图片位置
for(let i = 0;i < 3;i++){
let icons = rowNavs[i].querySelectorAll('.icon');
for(let j = 0;j < 4; j++){
icons[j].style.backgroundPosition = -j*48+"px "+ -i*48+"px";
}
}
</script>
</body>
</html>
效果如下图所示：
4.7 显示隐藏文本框内容
如下图所示京东页面的搜索输入框，输入框内默认有一个值，当获取焦点时，这个文字内容的颜色会变得更浅。并且我们可以直接输入文本，而不必先删除这些字。
下面代码在上面的效果上增加了输入文字后就会出现X号用来清空输入内容：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>显示隐藏输入框文本</title>
<!-- 引入字体图标 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4611953_7k1j1rzszxi.css">
</head>
<style>
.outer{
width: 450px;
height: 30px;
border: 1px solid red;
margin: 100px auto;
display: flex;
position: relative;
}
input{
outline: none;
width: 350px;
height: 30px;
padding: 0;
padding-left: 5px;
border: 0;
/* 让背景透明 */
background-color: rgba(255,255,255,0);
z-index: 2;
}
.search-bg{
position: absolute;
width: 320px;
height: 28px;
line-height: 28px;
color: #999;
font-size: 16px;
padding-left: 5px;
}
.photo-icon,.x-icon{
width: 30px;
height: 32px;
cursor: pointer;
line-height: 30px;
text-align: center;
}
.x-icon{
position: absolute;
left:320px;
z-index: 3;
display: none;
}
.search-icon{
height: 30px;
width: 66px;
background-color: red;
cursor: pointer;
text-align: center;
line-height: 30px;
font-size: 20px;
color: #ffffff;
}
</style>
<body>
<div class="outer">
<!-- 写一个div显示默认的数据内容，这个数据与input没有关系，实际开发可以从服务器动态的获取数据 -->
<div class="search-bg">手机</div>
<input type="text">
<div class="x-icon"><i class="iconfont icon-chahao"></i></div>
<div class="photo-icon"><i class="iconfont icon-xiangji"></i></div>
<div class="search-icon"><i class="iconfont icon-sousuo"></i></div>
</div>
<script>
// 1.获取元素
let input = document.querySelector("input");
let searchBg = document.querySelector(".search-bg");
let xIcon = document.querySelector(".x-icon");
// 2.注册事件，获取焦点
input.onfocus = function(){
searchBg.style.color = "#ccc";
}
// 3.注册事件，失去焦点
input.onblur = function(){
searchBg.style.color = "#999";
}
// 4.给input输入框添加监听事件，如果发生变化，那么显示默认内容的div就会隐藏
input.addEventListener('input',function(){
if(input.value !== ""){
searchBg.style.display = 'none';
// 显示清空按钮
xIcon.style.display = 'block';
}else{
// 当input内容为空时，默认内容就会显示出来
searchBg.style.display = "block";
xIcon.style.display = 'none';
}
});
// 5.给清空按钮绑定事件
xIcon.onclick = function(){
input.value = '';
searchBg.style.display = "block";
xIcon.style.display = 'none';
}
</script>
</body>
</html>
效果如下：
4.8使用className修改样式属性
如果样式比较少，或者功能比较简单，用element.style修改元素样式，如果样式比较多，功能复杂，用element.style修改比较麻烦，因此推荐使用className修改样式属性。是在css样式写一个类名的属性
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>用className修改元素属性</title>
<style>
.dark{
width: 300px;
height: 300px;
background-color: black;
color: #fff;
}
.light{
width: 300px;
height: 300px;
background-color: aliceblue;
color: #000;
}
</style>
</head>
<body>
<div class="dark">这是一个示例</div>
<button>切换主题</button>
<script>
// 1.获取元素
let div = document.querySelector('div');
let btn = document.querySelector('button');
// 2.注册事件
let flag = 0;
btn.onclick = function(){
if(flag == 0){
div.className = "light"
flag = 1;
}else{
div.className = "dark"
flag = 0;
}
}
</script>
</body>
</html>
效果如下：
注意：
-
className会直接更改元素的类名，会覆盖原先的类名。
-
如果要保留原来的类名，可以参考css多类名选择器。例如，写成类似这样的:
element.className = "类名1 类名2
4.9 密码框验证案例
如下代码示例可以提示密码强度
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>密码验证信息</title>
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_4611953_w4ea18o5go.css">
<style>
.outer{
height: 30px;
width: 600px;
display: flex;
line-height: 30px;
}
.infor{
margin-left: 5px;
font-size: 15px;
color: #0c91e4;
}
.wrong{
color: red;
}
.right{
color: green;
}
</style>
</head>
<body>
<div class="outer">
<input type="password">
<div class="infor "><i class="iconfont icon-information"></i> <span>请输入6-16为密码</span></div>
</div>
<script>
// 1.获取元素
let ipt = document.querySelector('input');
let infor = document.querySelector('.infor');
let icon = document.querySelector('i');
let span = document.querySelector('span')
// 注册事件
ipt.onblur = function(){
if(this.value.length < 6 || this.value.length > 16){
infor.className = "infor wrong";
icon.className = "iconfont icon-circle-close";
span.innerHTML = "您输入的密码长度不符合要求，请输入6-16位";
}else{
infor.className = "infor right";
icon.className = "iconfont icon-down-circle";
span.innerHTML = "您输入的密码符合要求";
}
}
</script>
</body>
</html>
页面效果如下：
4.10 操作元素总结
操作元素是DOM核心内容：
- 操作元素内容
- innerText
- innerHTML
- 操作常见元素属性
- src、href、title、alt等
- 操作表单元素属性
- type、value、disabled等
- 操作元素样式属性
- element.style
- className
注意：以上均是可读写属性
未完待续。。。。。。
475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
