JavaScript(WebAPI)

一.WebAPI

二.DOM

1.选中页面元素

2.事件

三.操作元素

获取修改元素内容

获取/修改表单元素属性

value

type

获取/修改样式属性

1.修改内联样式

2.修改元素应用的CSS类名

四.操作节点

1.新增元素

2.删除元素

五.小结

六.案例

1.网页版本的猜数字

2.表白墙程序

一.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].valueif(from==''||to==''||msg==''){return;}//2.构造新divlet 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>