⭐️前言⭐️
在上一篇文章【JavaScript简识】中介绍了关于JavaScript的基础语法知识,但只有基础语法知识是不够的,还需要操作页面,让页面动起来,更加丰富,本文就主要介绍能够操作页面元素的DOM API。
博客主页: 【如风暖阳】
精品Java专栏【JavaSE】、【备战蓝桥】、【JavaEE初阶】、【MySQL】、【数据结构】
欢迎点赞 收藏 ⭐留言评论 私信必回哟本文由 【如风暖阳】 原创,首发于 CSDN
博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言
博客中涉及源码及博主日常练习代码均已上传码云(gitee)、GitHub
一个页面的结构是一个树形结构,称为DOM树。
这些概念在JS代码中就对应一个一个的对象。
要想操作页面上的元素,就需要先拿到对应的JS对象,DOM中提供了一组API能够获取到网页的元素,最常用的就是以下两个API。
querySelector
querySelectorAll
两者都是document
的属性,通过页面document
的属性和方法,来操作页面的内容。
用法:
let obj=document.querySelector("CSS选择器");
当
querySelector
的参数匹配器,匹配到了多个元素的时候,此时返回的对象,就是匹配结果中的第一个元素。
像上图的情况,如果想要把所有的li都选中,就需要使用querySelectorAll
,其返回的是一个数组,包含了所有被选中的元素。
事件就是浏览器对于用户的操作行为进行的一个统称,例如鼠标在页面上某个位置点击,就会产生一个鼠标点击事件;再例如鼠标滚轮来滚动页面,就会产生一组滚动事件…
JS的主要工作就是在不同的事件中,进行不同的处理。
事件的三个要素:
操作元素需要先获取到元素,然后再进行修改,对元素进行修改,无非涉及到内容、属性、样式三个方面。
我们首先来看如何操作元素内容;
对元素内容的操作,我们主要通过Element.innerHTML
属性设置或获取HTML语法表示的元素的后代。
语法规则:
//读操作
var content=element.innerHTML;
//写操作
element.innerHTML=htmlString;
代码练习:实现计数器
<div id="screen">0div>
<button id="plus">+button>
<script>
let plusBtn=document.querySelector("#plus");
plusBtn.onclick=function() {
// 1.获取到screen里的值
let screen=document.querySelector("#screen");
let val=screen.innerHTML;
// 获取到的值默认为string类型,需要转换成number类型
val=parseInt(val);
// 2.val++;
val+=1;
// 3.把新值写回去
screen.innerHTML=val;
}
script>
预览效果:
实现以上代码效果还可以利用input
标签来完成,input
作为一个单标签,并没有innerHTML
属性,但是可以通过的value
属性来获取到内部的内容,代码如下:
<input type="text" id="screen" value="0">
<button id="plus">+button>
<script>
let plusBtn=document.querySelector("#plus");
plusBtn.onclick=function() {
// 1.获取到screen里的值
let screen=document.querySelector("#screen");
let val=screen.value;
// 获取到的值默认为string类型,需要转换成number类型
val=parseInt(val);
// 2.val++;
val+=1;
// 3.把新值写回去
screen.value=val;
}
script>
可以通过Element
对象的属性来直接进行修改,就能影响到页面显示效果。
代码示例:
<img src="1.jpg" alt="头像1" title="帅哥">
<script>
let img=document.querySelector('img');
console.dir(img);
// console.log(img.src);
// console.log(img.title);
// console.log(img.alt);
script>
通过console.dir
这个方法,可以打印出一个dom对象的全部属性和值。
预览结果:
代码练习:点击切换图片
<img src="1.jpg" alt="头像1" title="帅哥">
<script>
let img=document.querySelector('img');
img.onclick=function() {
console.dir(img);
if(img.src.indexOf('1.jpg')>=0) {
img.src='2.jpg';
}else if(img.src.indexOf('2.jpg')>=0) {
img.src='1.jpg';
}
}
script>
我们还可以操作表单元素属性:
表单(主要是指input标签)有以下属性:
1.点击全选按钮,则选中所有选项
2.只要某个选项取消,则自动取消全选按钮的勾选状态。
<input type="checkbox" id="all">我全都要 <br>
<input type="checkbox" class="girl">美杜莎 <br>
<input type="checkbox" class="girl">云韵 <br>
<input type="checkbox" class="girl">萧薰儿 <br>
<input type="checkbox" class="girl">雅菲 <br>
<script>
// 1.获取到元素
let all=document.querySelector('#all');
let girls=document.querySelectorAll('.girl');
// 2.给all注册点击事件,选中/取消所有选项
all.onclick=function() {
for(let i=0;i<girls.length;i++) {
girls[i].checked=all.checked;
}
}
// 3.给girl注册点击事件
for(let i=0;i<girls.length;i++) {
girls[i].onclick=function() {
// 检测当前是不是所有的girl都被选中了
all.checked=checkGirls(girls);
}
}
// 4.实现checkGirls
function checkGirls(girls) {
for(let i=0;i<girls.length;i++) {
if(!girls[i].checked) {
//只要有一个girl没被选中,就认为结果是false
return false;
}
}
// 所有girl都被选中,就是全选中
return true;
}
script>
操作元素样式本质上也是操作元素属性。
可以通过行内样式
或者类名样式
来完成操作。
行内样式示例:点击放大字体
element.style.[属性名] = [属性值];
<div style="font-size:20px">这是一个文本div>
<script>
let div=document.querySelector('div');
div.onclick=function() {
// 1.先获取到当前字体大小
console.log(parseInt(div.style.fontSize));
let fontSize=parseInt(div.style.fontSize);
fontSize+=5;
div.style.fontSize=fontSize+'px';
}
script>
element.className = [CSS 类名];
class是JS的关键字,所以名字叫做className
点击关灯切换到夜间模式(背景变成黑色)
点击开灯恢复至日间模式(背景变成白色)
<style>
.light {
background-color: #fff;
color: black;
}
.dark {
background-color: #000;
color: #fff;
}
style>
<div class="light" style="height:500px">这是一段话div>
<button>关灯button>
<script>
let div=document.querySelector('div');
let button=document.querySelector('button');
button.onclick=function() {
if(div.className=='light') {
div.className='dark';
button.innerHTML='关灯';
}else if(div.className=='dark') {
div.className='light';
button.innerHTML='开灯';
}
}
script>
1.创建新元素节点
此时该新节点并不能在页面中显示出来,需要在页面的父节点上插入该子结点才能将该新节点显示出来。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<button id="resetBtn">重新开始一局游戏button><br>
<span>要猜的数字:span>
<input type="text">
<button id="guessBtn">猜button><br>
<span>结果:span><span id="result">span><br>
<span>已经猜的次数:span><span id="guessCount">0span>
<script>
// 1.先把上面需要用到的元素拿到
let resetBtn=document.querySelector('#resetBtn');
let input=document.querySelector('input');
let guessBtn=document.querySelector('#guessBtn');
let resultSpan=document.querySelector('#result');
let guessCountSpan=document.querySelector('#guessCount');
// 2.生成一个1-100的随机整数
let toGuess=Math.floor(Math.random()*100)+1;
// Math.random()生成[0,1)的数字,乘以一百通过floor向下取整,加一得到[1,100]的随机数
console.log(toGuess);
// 3.点击实现猜的逻辑
guessBtn.onclick=function() {
// 1.读取到input中输入的内容,并转成整数
if(input.value=='') {
return;
}
let curNum=parseInt(input.value);
// 2.判定大小关系,并给出提示
if(curNum<toGuess) {
resultSpan.innerHTML='低了';
resultSpan.style.color='red';
}else if(curNum>toGuess) {
resultSpan.innerHTML='高了';
resultSpan.style.color='red';
}else {
resultSpan.innerHTML='猜对了!';
resultSpan.style.color='green';
}
// 3.更新猜的次数
let guessCount=parseInt(guessCountSpan.innerHTML);
guessCountSpan.innerHTML=guessCount+1;
}
// 4.实现reset操作的逻辑(开始新游戏)
resetBtn.onclick=function() {
// 让页面刷新即可
location.reload();
}
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(30,100,200);
}
.container {
width: 100%;
}
h3 {
text-align: center;
padding: 30px 0;
font-size: 24px;
color: rgb(255,140,10);
}
p {
text-align: center;
color: rgba(66, 37, 3, 0.637);
font-size: 18px;
padding: 5px 0;
}
.row {
width: 400px;
height: 50px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.row span{
width: 100px;
height: 40px;
text-align: center;
padding-right: 0px;
font-size: 24px;
color: rgb(255,140,10);
}
.row input {
width: 300px;
height: 40px;
border: 2px solid rgb(255, 140,160);
border-radius: 5px;
outline: 0;
text-align: left;
padding-left: 0px;
margin-left: 0px;
text-indent: 0.4em;
font-size: 20px;
color: rgb(100,160,255);
}
.row #submit{
width: 200px;
height: 40px;
border-radius: 10px;
font-size: 24px;
border: 0px solid rgb(255, 140, 160);
background-color: rgb(255, 140, 160);
color: aliceblue;
line-height: 40px;
margin-top: 8px;
}
.row #submit:active{
background-color: rgb(140,180,240);
}
style>
<div class="container">
<h3>表白墙h3>
<p>输入后点击提交,会将信息显示在表格中p>
<div class="row">
<span>谁:span>
<input type="text">
div>
<div class="row">
<span>对谁:span>
<input type="text">
div>
<div class="row">
<span>说:span>
<input type="text">
div>
<div class="row">
<button id="submit">提交button>
div>
div>
<script>
// 当用户点击submit,就会获取到input中的内容,从而把内容构造成一个div,插入到页面末尾
let submitBtn=document.querySelector('#submit');
submitBtn.onclick=function() {
// 1.获取到3个input中的内容
let inputs=document.querySelectorAll('input');
let from=inputs[0].value;
let to=inputs[1].value;
let msg=inputs[2].value;
if(from==''||to==''||msg=='') {
// 用户还没有提交完,暂时先不提交数据
return;
}
// 2.生成一个新的div,内容是input里面的内容,把这个新的div加到页面中
let div=document.createElement('div');
div.innerHTML=from+'对'+to+'说:'+msg;
div.className='row';
let container=document.querySelector('.container');
container.appendChild(div);
//3.清空之前输入框内的内容
for(let i=0;i<inputs.length;i++) {
inputs[i].value='';
}
}
script>
body>
html>
⭐️最后的话⭐️
总结不易,希望uu们不要吝啬你们的哟(^U^)ノ~YO!!如有问题,欢迎评论区批评指正