目录
一.WebAPI
WebAPI都是浏览器给JS代码提供的功能(如果浏览器不同,api的行为也可能存在差异)
WebAPI包含了DOM和BOM
https://developer.mozilla.org/zh-CN/docs/Web/API(参考文档)
二.DOM
DOM:Document Object Model(文档对象模型)
HTML上的每一个标签,都可以映射到JS中的一个对应的对象。通过DOM让JS代码操作页面。
DOM树:
1.选中页面元素
querySelector(CSS选择器)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">abc</div>
<div id="id">def</div>
<h3>
<span>
<input type="text">
</span>
</h3>
<script>
let elem1=document.querySelector('.box');
// console.log(elem1);
console.dir(elem1);
let elem2=document.querySelector('#id');
console.log(elem2);
let elem3=document.querySelector('h3>sapn>input');
console.log(elem3);
</script>
</body>
</html>
2.事件
事件就是针对用户的操作进行一些响应。要能够和用户交互,就要知道用户干了什么。用户做的一些动作就会在浏览器中产生一些事件(鼠标点击、鼠标双击、鼠标移动、键盘按下),代码就需要针对事件做出一反映。
事件的三个要素:
1.事件源:哪个元素产生的事件。
2.事件类型:点击、双击、移动、键盘按下.....
3.事件处理程序:事件发生之后,要执行哪个代码。(要执行的代码都是提前设定好的)
三.操作元素
获取修改元素内容
先获取到该元素,使用innerHTML属性,就能拿到元素中的内容。修改该属性就会影响到界面的属性。
获取/修改表单元素属性
表单元素(input、textarea、select...)有一些特别的属性,普通标签没有的。
value
input的值
value获取到元素里用户填写的值。
给input里面放个数字,每次点击按钮,让数字加1并显示出来。
注意:value默认情况下是一个string类型。直接加1会变成字符串拼接。
type
input的类型(文本、密码、文件、按钮等)
写一个点击可以查看密码的程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text">
<button>隐藏密码</button>
<script>
let input=document.querySelector('input');
let button=document.querySelector('button');
button.onclick=function(){
if(input.type=='text'){
input.type='password';
button.innerHTML='显示密码';
}else{
input.type='text';
button.innerHTML='隐藏密码';
}
}
</script>
</body>
</html>
获取/修改样式属性
1.修改内联样式
修改style的值,style里的属性名字和CSS中的一致(脊柱命名换成驼峰命名即可)
例:创建一个div,每次点击,都让里面的字体放大
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="font-size: 20px;">这是第一个div,点击之后字体放大</div>
<script>
let div=document.querySelector('div');
div.onclick=function(){
//先获取到当前的字体大小
let fontSize=parseInt(div.style.fontSize);
fontSize+=10;
//设置字体大小的时候不要忘记了px这个单位
div.style.fontSize=fontSize+'px';
}
</script>
</body>
</html>
2.修改元素应用的CSS类名
例:切换夜间模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="one" class="light" style="font-size: 20px; height: 500px;">这是第一个div,
点击之后切换模式</div>
<style>
.light{
/* 日间模式 */
color: black;
background-color: white;
}
.dark{
/* 夜间模式 */
color: white;
background-color: black;
}
</style>
<script>
let div=document.querySelector('#one')
div.onclick=function(){
// 点击div,切换到夜间模式
if(div.className=='dark'){
div.className='light';
}else{
div.className='dark';
}
}
</script>
</body>
</html>
上述操作都是针对当前页面已有的元素进行展开的,下面是对当前页面原本没有的内容的操作。
四.操作节点
1.新增元素
a)创建一个元素
createElement
b)把这个元素放到dom树中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one">这是第一个div</div>
<script>
//创建元素
let input=document.createElement('input');
input.value='hello';
let div=document.querySelector('.one');
//把子元素添加到这个div的末尾,dom树中
div.appendChild(input);
</script>
</body>
</html>
例:往无序列表中添加元素,加入到末尾。(appendChild)
补充:insertBefore把元素加到指定子元素的前面(中间位置插入)
2.删除元素
ParentElem.removeChild(childElement)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>11</li>
<li>22</li>
</ul>
<script>
let ul=document.querySelector('ul');
for(let n=3;n<10;n++){
let li=document.createElement('li');
li.innerHTML=n+''+n;
ul.appendChild(li);
}
//删除33这个元素
let toDelete=document.querySelectorAll('li')[2];
console.log(toDelete);
ul.removeChild(toDelete);
</script>
</body>
</html>
五.小结
1.选中元素 querySelector/querySelectorAll
2.事件 onclick
3.修改元素内容innerHTML
4.修改元素属性 元素.属性
5.修改表单属性 元素.value 元素.type
6.元素样式 元素.style.样式名=值 元素.className=css类名
7.创建元素 createElement
8.把元素放到dom树上 appendChild
9.删除元素 removeChild
六.案例
1.网页版本的猜数字
1.生成1-100之间的随机整数
2.让用户来输入一个数字
3.根据输入数字的大小关系,给出一个提示是高了/低了/猜对了
</head>
<body>
<div>请输入要猜的数字</div>
<input type="text">
<button>提交</button>
<!-- 使用这个div来显示结果 -->
<div class="result">
</div>
<script>
//1.生成一个随机的整数(1-100)
let toGuess=parseInt(100*Math.random())+1;
console.log(toGuess);
//2.进行猜数字操作
let button=document.querySelector('button');
let resultDiv=document.querySelector('.result');
let input=document.querySelector('input');
button.onclick=function(){
//3.取出输入框的内容
if(input.value==''){
//用户啥都没有输入,直接返回
return;
}
let inputNum=parseInt(input.value);
//4.比较大小关系
if(inputNum<toGuess){
//小了
resultDiv.innerHTML='低了';
}else if(inputNum>toGuess){
//高了
resultDiv.innerHTML='高了';
}else{
//猜对了
resultDiv.innerHTML='猜对了'
}
}
</script>
</body>
</html>
2.表白墙程序
预期效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
</head>
<style>
/* *是通配符选择器,是选择页面所有元素 */
*{
/* 消除浏览器的默认样式 */
margin:0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 600px;
/* 最上方设置30像素边距 */
margin: 30px auto;
}
h1{
/* 表白墙文字水平居中 */
text-align: center;
}
p{
text-align: center;
/* p标签文字颜色浅一点 */
color: #666;
margin: 20px ;
}
.row{
/* 开启弹性布局 */
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span{
width: 80px;
}
.row input{
width: 200px;
height: 25px;
}
.row button{
width: 280px;
height: 25px;
color: white;
background-color: orange;
/* 去掉边框 */
border:none;
/* 按钮设置成圆角矩形 */
border-radius: 5px;
}
/* 点击的时候有个反馈 */
.row button:active{
background-color: grey;
}
</style>
<body>
<div class="container">
<h1>表白墙</h1>
<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 class="row">
<button id="revert">撤销</button>
</div>
</div>
<script>
// 实现提交操作,点击按钮,就可以把用户输入的内容提交到页面上显示
//点击的时候,获取到三个输入框的文本内容
//创建一个新的div.row,把内容构造到div中
let containerDiv=document.querySelector('.container');
let inputs=document.querySelectorAll('input');
let button=document.querySelector('#submit');
button.onclick=function(){
// 1.获取到三个输入框的内容
let from=inputs[0].value;
let to=inputs[1].value;
let msg=inputs[2].value
if(from==''||to==''||msg==''){
return;
}
//2.构造新div
let rowDiv=document.createElement('div');
rowDiv.className='row message';
rowDiv.innerHTML=from+'对'+to+'说:'+msg;
containerDiv.appendChild(rowDiv);
//3.清空之前的输入内容
for(let input of inputs){
input.value='';
}
}
let revertButton=document.querySelector('#revert');
revertButton.onclick=function(){
//删除最后一条消息
//选中所有row,找出最后一个row,然后进行删除
// 使用message而不是row是因为row会把撤销框也删掉
let rows=document.querySelectorAll('.message');
if(rows==null||rows.length==0){
return;
}
containerDiv.removeChild(rows[rows.length-1]);
}
</script>
</body>
</html>