提示:以下是本篇文章正文内容,下面案例可供参考
一、WebApi背景知识
1.1什么是WebApi
浏览器给JS提供的API是非常丰富的,也有很多组
比如DOM API 、BOM API…这些API都统称为WebAPI
我们主要是介绍DOM(与开发网页息息相关)
1.2什么是API
API 是一个更广义的概念. 而 WebAPI 是一个更具体的概念, 特指 DOM+BOM
所谓的 API 本质上就是一些现成的函数/对象, 让程序猿拿来就用, 方便开发
1.3API参考文档
https://developer.mozilla.org/zh-CN/docs/Web/API
二、DOM基本概念
2.1什么是DOM
DOM是文档对象模型,DOM 全称为 Document Object Model.
W3C 标准给我们提供了一系列的函数, 让我们可以操作:
网页内容
网页结构
网页样式
2.2DOM树
一个页面的结构是一个树形结构, 称为 DOM 树
ps:树形结构在数据结构阶段会介绍. 就可以简单理解成类似于 “家谱” 这种结构
示例:
重要概念:
文档: 一个页面就是一个 文档, 使用 document 表示.
元素: 页面中所有的标签都称为 元素. 使用 element 表示.
节点: 网页中所有的内容都可以称为 节点(标签节点, 注释节点, 文本节点, 属性节点等). 使用 node 表示.
这些文档等概念在 JS 代码中就对应一个个的对象,所以才叫 “文档对象模型”
三、获取元素
获取元素是使用DOM的基础,要想操作页面上的元素,就需要先拿到对应的JS对象
DOM中提供了一组API来让我们能够获取到网页的元素,我们这里只介绍两个最重要的
querySelector和querySelectorAll,这两个其实是一个document这样一个对象的属性
document又是我们页面中的全局对象——一个页面加载好了,就会自动生成一个全局变量,就叫作document,而这里面就有一些属性和方法,来让我们操作页面内容。
3.1querySelector
<div class="one">
hello
</div>
<script>
//querySelector参数为一个css的选择器
let d=document.querySelector('.one');
console.log(d);
</script>
我们打印出来的d对象,就代表着上面的html元素
除了类选择器,其他选择器也可以,比如这里的id选择器
<div id="two">
world
</div>
<script>
//querySelector参数为一个css的选择器
let i=document.querySelector('#two');//#表示id选择器
console.log(i);
</script>
复合选择器也是一样可以生效的
<ul>
<li>
aaa
</li>
</ul>
<script>
//querySelector参数为一个css的选择器
let obj=document.querySelector('ul li');//通过后代选择器进行选中
console.log(obj);
</script>
3.2querySelectorAll
如果querySelector的参数的选择器,匹配到多个元素的时候,此时返回的对象,就是匹配结果的第一个元素,比如
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
let obj=document.querySelector('ul li');//通过后代选择器进行选中
console.log(obj);
</script>
遇到这种情况怎么办?
如果我们想把这些li都选中,就需要使用querySelectorAll
querySelectorAll和querySelector用法非常相似,但是querySelectorAll返回的是一个数组,数组中包含所有被选中的元素
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
<script>
let obj=document.querySelectorAll('ul li');//通过后代选择器进行选中
console.log(obj);
</script>
准确的说,querySelectorAll返回的不是一个真正的原生数组,而是一个对象,只不过这个对象,有length,也能够通过下标的方式来访问内部元素。这样的对象使用起来和数组非常相似(一模一样),又称为伪数组
四、事件初识
4.1基本概念
JS中的很多代码,都是通过事件来触发的,事件就是浏览器对于用户的操作行为进行的一个“统称”,准确的说,事件也不一定全是用户操作产生的,但是大部分是。
比如我鼠标在网页里面移动,就会产生一个鼠标移动事件
比如我鼠标在某个地方进行点击,就会产生鼠标点击事件
再比如我鼠标滚轮,滚动时,就会产生一组滚动事件
…
4.2事件三要素
1.事件源
是哪个HTML元素产生的事件
2.事件类型
鼠标移动、鼠标点击、键盘事件、窗口大小改变事件。。。
3.事件的处理程序
当事件产生后,执行什么样的JS代码
4.3简单示例
<button>我是一个按钮</button>
<script>
let button=document.querySelector('button');//选择这个按钮
button.onclick=function(){//当点击到这个按钮时,就会触发function
alert('hello');
}
</script>
点击这个按钮
五、操作元素
操作=获取+修改
5.1获取/修改元素内容
5.1.1innerText
5.1.2innerHTML
innerHTML表示元素里面包含的html代码是什么样的
获取内容
示例1:
<div id="screen">hello World</div>
<button id="btn">我是一个按钮</button>
<script>
let btn=document.querySelector('#btn');
btn.onclick=function(){
let screen=document.querySelector('#screen');
console.log(screen.innerHTML);
}
</script>
示例2:
<div id="screen">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
<button id="btn">我是一个按钮</button>
<script>
let btn=document.querySelector('#btn');
btn.onclick=function(){
let screen=document.querySelector('#screen');
console.log(screen.innerHTML);
}
</script>
修改内容
示例1:
<div id="screen">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
</div>
<button id="btn">我是获取内容按钮</button>
<button id="btn2">我是修改内容按钮</button>
<script>
let btn=document.querySelector('#btn');
btn.onclick=function(){
let screen=document.querySelector('#screen');
console.log(screen.innerHTML);
}
let btn2=document.querySelector('#btn2');
bt2.onclick=function(){
let screen=document.querySelector('#screen');
screen.innerHTML='<h1>修改后的内容</h1>';
}
</script>
初始页面:
点一下第一个按钮
点一下第二个按钮
示例2:
现写一个简单的自增按钮
<div id="screen">0</div>
<button id="plus">+</button>
<script>
let PlusBtn=document.querySelector('#plus');
PlusBtn.onclick=function(){
//1.获取screen里面的值
let screen=document.querySelector('#screen');
let val=screen.innerHTML;
//默认val是字符串类型,你要把它转换成整形
val=parseInt(val);
//由于js是动态类型,转换成数字后仍然可以赋值给val,
//这样就val就从String变成了number类型
//2.把这个值+1
val+=1;
//3.把新得到的值重写回screen里面
screen.innerHTML=val;
}
</script>
初始状态
点一下加号
这里你也可以继续点下去,每次会实现一次自增操作,我这里不再演示。
5.2获取/修改元素属性
<!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>Document</title>
</head>
<body>
<img src="sxc.jpg" alt="">
<script>
let img=document.querySelector('img');
img.onclick=function(){
console.log(img.src);
}
</script>
</body>
</html>
比如说现在我们选中了孙笑川这张图片,页面效果如下
当我们点一下这个图片,控制台就会显示这个图片的绝对路径
(写的是相对路径,但是浏览器解析是绝对路径)
如果想要修改元素属性
<img src="sxc.jpg" alt="">
<script>
let img=document.querySelector('img');
img.onclick=function(){
console.log(img.src);
if(img.src.indexOf('sxc.jpg')>=0){
img.src='sxc2.jpg';
}else if(img.src.indexOf('sxc2.jpg')>0){
img.src='sxc2.jpg';
}
}
</script>
原先页面
点击一下图片
再点一下,会发现属性也变化了
操作元素属性,可以通过dom对象.属性名 就可以进行操作了
一个HTML标签里,能写哪些属性,就同样可以通过JS中的DOM对象来获取到一样的属性。
可以通过console.dir这个方法,来打印出一个dom对象的全部属性和值
<img src="sxc.jpg" alt="">
<script>
let img=document.querySelector('img');
img.onclick=function(){
console.dir(img);
}
</script>
点一下图片就可以在控制台看到图片的所有属性
5.3获取/修改表单元素属性
表单(主要是指 input 标签)的以下属性都可以通过 DOM 来修改
下面都是我们表单专有的属性:
示例1:value
比如我们这里实现一个简单的 播放/暂停按钮
<input type="button" value="播放">
<script>
let input=document.querySelector('input');
input.onclick=function(){
if(input.value=='播放'){
input.value='暂停';
}else if(input.value=='暂停'){
input.value='播放'
}
}
</script>
初始页面
点击一下按钮
示例2:checked
全选/取消全选按钮
- 点击全选按钮, 则选中所有选项
- 只要某个选项取消, 则自动取消全选按钮的勾选状态
<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. 获取到元素
var all = document.querySelector('#all');
var girls = document.querySelectorAll('.girl');
// 2. 给 all 注册点击事件, 选中/取消所有选项
all.onclick = function () {
for (var i = 0; i < girls.length; i++) {
girls[i].checked = all.checked;
}
}
// 3. 给 girl 注册点击事件
for (var i = 0; i < girls.length; i++) {
girls[i].onclick = function () {
// 检测当前是不是所有的 girl 都被选中了.
all.checked = checkGirls(girls);
}
}
// 4. 实现 checkGirls
function checkGirls(girls) {
for (var i = 0; i < girls.length; i++) {
if (!girls[i].checked) {
// 只要一个 girl 没被选中, 就认为结果是 false(找到了反例)
return false;
}
}
// 所有 girl 中都没找到反例, 结果就是全选中
return true;
}
</script>
初始页面
点击“貂蝉”,只选中貂蝉
点“我全都要”,全部选中
再点一下“我全都要”,全部取消选中
5.4获取/修改样式属性
操作元素样式,本质上也是操作元素属性
1.style对应行内样式(直接把样式写到style里面)
2.className/classList对应内部样式/外部样式,应用了一个/一组CSS类名
5.4.1行内样式操作
比如我们现在弄一个“点击就放大字体”
<div style="font-size:20px">我是一个文本</div>
<!-- css里面不区分大小写,我们一般不用驼峰 -->
<script>
let div=document.querySelector('div');
div.onclick=function(){
//1.先获取当前字体的大小
console.log(parseInt(div.style.fontSize))//JS不能支持font-size这种写法,我们用驼峰
//我们直接得到的fontSize是一个字符串,如果想进行相加操作,要把它转成整数
//转换过程为'20px'->20,parseInt转换的时候,是从头往后进行转换,如果遇到非数字字符,就会停止转换
//2.在当前字体大小的基础上,多增加5px
let fontSize=parseInt(div.style.fontSize);
fontSize+=5;
div.style.fontSize=fontSize+'px';
// 如果要修改CSS属性,一定要注意单位,如果单位不合适/遗漏,你修改的就没有用
}
</script>
初始页面
点一下文字
再点一下
字体在随着点击不断变大
5.4.2类名样式操作
在HTML中表示类名的属性是class
但是在JS中,属性名变成了className/classList
为什么不直接使用class这个名字呢?
class在JS中也是一个关键字,我们肯定不能把关键字当作属性名
(JS ES6版本以上,也引入了类这个概念)
如果要修改的样式比较多,通过style来修改就麻烦了
我们可以直接借助CSS类来修改,直接修改类名就可以达到所需效果。
我们来实现一个“关灯开灯”,比如原先是黑色背景,点一下变成白色背景
<style>
.light{
background-color: #fff;
/* 白色 */
color: #000;
/*黑色 */
}
.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>
初始页面
点一下关灯
六、操作节点
6.1新增节点
1.创建元素节点
<div class="containner">
</div>
<script>
let newDiv=document.createElement('div');//创建一个新的div标签
newDiv.id='newDiv';
newDiv.className='one';
newDiv.innerHTML='hello';
console.log(newDiv);
</script>
直接用这样的代码,新节点虽然可以创建,但是页面上是啥也显示不出来的
原因是你没有把新节点放到dom树上
2.插入节点到dom树中
如何把节点放到dom树上呢?
用appendChild把节点插入到某个节点的子元素中
<div class="container">
<!-- 原先div里啥也没 -->
</div>
<script>
let newDiv=document.createElement('div');//创建一个新的div标签
newDiv.id='newDiv';
newDiv.className='one';
newDiv.innerHTML='hello';
console.log(newDiv);
let container=document.querySelector('.container');
container.appendChild(newDiv);
</script>
6.2删除节点
通过removeChild方法来实现
需要先拿到父节点,然后再拿到待删除的子节点
通过removeChild就可以进行删除
<div class="container">
<!-- 原先div里啥也没 -->
</div>
<button>点我进行删除div</button>
<script>
let newDiv=document.createElement('div');//创建一个新的div标签
newDiv.id='newDiv';
newDiv.className='one';
newDiv.innerHTML='hello';
console.log(newDiv);
let container=document.querySelector('.container');
container.appendChild(newDiv);
let button=document.querySelector('button');
button.onclick=function(){
container.removeChild(newDiv);
}
</script>
初始页面
点一下按钮
七、代码案例:猜数字
7.1预期效果
7.2代码实现
<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">0</span>
<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)之间的小数
//Math.floor可以实现小数向下取整,我们这取整后加1,保证范围还是[1,100)
console.log(toGuess);
//如果想生成1-100,你就*100就行
//3.实现点击"猜”按钮的逻辑
guessBtn.onclick=function(){
//3.1读取到Input中输入的内容,并转成整数
if(input.value==''){
return;
}
let curNum=parseInt(input.value);
//3.2判断大小关系并给出提示
if(curNum<toGuess){
resultSpan.innerHTML='你猜小了';
resultSpan.style.color='red';
}else if(curNum>toGuess){
resultSpan.innerHTML='你猜大了';
}else{
resultSpan.innerHTML='你猜对了我的宝!';
}
//3.3更新猜的次数
let guessCount=parseInt(guessCountSpan.innerHTML);
guessCountSpan.innerHTML=guessCount+1;
}
//4.实现reset操作的逻辑(开始新游戏)
resetBtn.onclick=function(){
//让页面刷新即可
//location是和document 并列关系的对象
location.reload();//location是用来控制页面的链接/地址的
//通过reload进行刷新
}
</script>
八、代码案例:表白墙
8.1预期效果
8.2代码示例
<!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>表白墙</title>
</head>
<body>
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
.container{
width: 100%;
}
h3{
text-align: center;
padding: 20px 0;
}
p{
text-align: center;
color:#666;
padding: 10px 0;
}
.row{
width: 400px;
height:50px;
margin: 0 auto;
display: flex;
/* 弹性布局 */
justify-content: center;
align-items: center;
/* 水平居中 和垂直居中*/
}
.row span{
width: 60px;
}
.row input{
width: 300px;
height: 40px;
line-height: 40px;
font-size: 20px;
text-indent: 1em;
}
.row #submit{
width: 200px;
height: 50px;
font-size: 20px;
line-height: 40px;
margin: 0 auto;
color:white;
background-color: orange;
border: none;
/* 去掉边框 */
border-radius: 10px;
/* 10px的圆角矩形 */
}
.row #submit:active{
background-color: gray;
/* 点击按钮后背景颜色改变 */
}
</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.获取三个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>
初始页面:
输入点东西:
点击按钮