1.Web API 基本认知
1.API
1.Web APIs 是 W3C 组织的标准
2.API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。
3.简单理解： API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。
比如手机充电的接口：我们要实现充电这个功能：
1.我们不关心手机内部变压器，内部怎么存储电等
2.我们不关心这个充电线怎么制作的
4.我们只知道，我们拿着充电线插进充电接口就可以充电
5.这个充电接口就是一个 API
4.Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。
5.MDN 详细 API : developer.mozilla.org/zh-CN/docs/…
6.因为 Web API 很多，所以我们将这个阶段称为 Web APIs
2. 作用和分类
1.作用: 就是使用 JS 去操作 html 和浏览器
2.分类：DOM (文档对象模型)、BOM（浏览器对象模型）
3.什么是DOM
1.DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
2.白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
3.DOM作用:开发网页内容特效和实现用户交互
4.DOM树
1. DOM树是什么
1.将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
2.描述网页内容关系的名词
3.作用：文档树直观的体现了标签与标签之间的关系
5.DOM对象(重要)
1.DOM对象：浏览器根据html标签生成的 JS对象
1.所有的标签属性都可以在这个对象上面找到
2.修改这个对象的属性会自动映射到标签身上
2.DOM的核心思想
1.把网页内容当做对象来处理
3.document 对象
1.是 DOM 里提供的一个对象
2.所以它提供的属性和方法都是用来访问和操作网页内容的
3.网页所有内容都在document里面
// 列如
document.write()
2.获取DOM对象
1.根据CSS选择器来获取DOM元素 (重点)
2.其他获取DOM元素方法（了解）
1.选择匹配的第一个元素
1.语法:
document.querySelector('css选择器')
2.参数:包含一个或多个有效的CSS选择器 字符串
3.返回值:CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返回null。
2 .选择匹配的多个元素
1.语法
document.querySelectorAll('css选择器')
1.因为得到的是一个对象的集合，所以我们想要操作里面的元素就需要遍历
2.得到元素对象是动态的
3.如果获取不到元素,则返回为空的伪数组(因为获取不到对象)
2.参数:包含一个或多个有效的CSS选择器 字符串
3.返回值:CSS选择器匹配的NodeList 对象集合 (返回值为一个伪数组有长度有索引号的数组但是没有 pop() push() 等数组方法想要得到里面的每一个对象，则需要遍历（for）的方式获得。)
4.哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已(哪怕没有元素返回值也是一个空的伪数组)
3.其他获取DOM元素方法
1.根据id获取一个元素
document.getElementById('nav')
2.根据标签名称来获取dom元素 获得页面的全部div
document.getElementsByName('div')
3.根据类名来获取元素 获得页面所有类名为container的
document.getElementsByClassName('container')
4.获取body元素
doucumnet.body // 返回body元素对象
5.获取html元素
document.documentElement // 返回html元素对象
4.总结案列
<!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>
<script>
//1.根据id来获取一个 dom
// let nav =document.getElementById('nav')
//2.根据标签名称来获取dom元素 一组dom元素
// let ps =document.getElementsByName('p')
//3.根据类名来获取元素 一组元素
//let divs =document.getElementsByClassName('container')
//常用方法
//获取一个
document.querySelector('#nav') //id
document.querySelector('p') //标签
document.querySelector('.container') //类
//获取一组
document.querySelectorAll
</script>
</body>
</html>
3.设置/修改DOM元素内容
DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
就是操作对象使用的点语法。
如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
1.document.write() 方法
1.只能将文本内容追加到 前面的位置
2.文本中包含的标签会被解析
//永远都只是追加操作，且只能位置</body>前
document.write( ' Hello world! ' );
document.write( ' <h3>你好，世界!</h3>')
2.对象.innerText 属性
1.将文本内容添加/更新到任意标签位置
2.文本中包含的标签不会被解析
// innerText将文本内容添加/更新到任意标签位置
let info = document.getElementById( 'info ')
//intro.innerText =‘嗨、我叫叼毛!'
info.innerText = '<h4>嗨~我叫叼毛!</h4>'
3.对象.innerHTML 属性
1.将文本内容添加/更新到任意标签位置
2.文本中包含的标签会被解析
// 2. innerHTML属性
box.innerHTML = '<h3>前端程序员<br>的头发都很多</h3>'
4.案列总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>3种设置文本内容的方式</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 以后就很少用了 document.write 功能弱 只能把标签写在 /body 标签上面
// document.write
document.querySelector('li:nth-child(2)').innerText = '<button>随便修改</button> ';
document.querySelector('li:nth-child(3)').innerHTML ='<button>随便修改</button> ';
/*
3种实现在标签中写 动态设置文本
1 document.write 只能在body标签的中写 以后 很使用它
2 innerText 只能设置文本，不能解析 html字符串
3 innerHTML 可以设置文本 也可以解析html字符串
*/
</script>
</body>
</html>
4.设置/修改DOM元素属性
1.设置/修改元素常用属性
1.通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
2.最常见的属性比如： href、title、src 等
3.语法
对象.属性 =值得
4.代码写法
//1.获取元素
let pic=document.querySelector("img");
//2. 操作元素
pic.src ='./images/01.jig'//(图片路径)
pic.title = '这是一个图片'
5.综合案列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>12-dom元素-属性.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">跳转到</a>
<img src="./images/1.jpg" title="有惊喜" alt="" />
<p id="nav"></p>
<input type="text" />
<button type="button"></button>
<h1 class="dfdf"></h1>
<script>
/*
a 标签身上的 href 图片 src alt id type class 属性
1 获取标签对应的dom元素
2 dom.属性名=属性值
*/
//获取a标签
let aDom = document.querySelector('a');
// 修改a标签的属性
aDom.href = 'https://www.jd.com/?cu=true&utm_source=baidu-pinzhuan&utm_medium=cpc&utm_campaign=t_288551095_baidupinzhuan&utm_term=0f3d30c8dba7459bb52f2eb5eba8ac7d_0_d0a1ddf590ad4526b437d384a79421aa';
//获取img标签
let imgDom=document.querySelector("img");
// 修改图片的src
imgDom.src="./images/2.jpg";
// 动态修改 title属性
imgDom.title="你妈妈叫你回去吃饭";
</script>
</body>
</html>
2.设置/修改元素样式属性
1.通过 JS 设置/修改标签元素的样式属性。
2.比如通过 轮播图小圆点自动更换颜色样式
3.点击按钮可以滚动图片，这是移动的图片的位置 left 等等
1.通过 style 属性操作CSS
1.语法
对象.style.样式属性 = 值
2.写法
<body>
<div>我的室友潮吧彭炎</div>
<script>
// 1 获取dom元素
let div = document.querySelector('div')
//console.log(div);
// 2 开始修改
// 会出现 单词写错或者 值写错 写漏
// 那段代码没有效果 就去看那段代码
div.style.fontSize='100px' //文字大小
div.style.color='red' //文字颜色
div.style.backgroundColor ='pink' //背景颜色
div.style.width='1200px' //宽度
div.style.height='1000px' //高度
div.style.textAlign='center' //文字居中
div.style.lineHeight= '1000px' //行高
div.style.margin=`100px auto` //绝对水平居中
</script>
</body>
2.操作类名(className) 操作CSS
1.语法
//active 是一个css类名
元素.className = 'active'
//1. 由于class是关键字, 所以使用className去代替
//2. className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
1.语法
//追加一个类 添加一个class
元素.classList.add('类名')
//删除一个类 单独来指定移除一个class
元素.classList.remove('类名')
//切换一个类
元素.classList.toggle('类名')
//切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
3.设置/修改 表单元素 属性
表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框 正常的有属性有取值的 跟其他的标签属性没有任何区别
1.获取: DOM对象.属性名
2.设置: DOM对象.属性名 = 新值
//按钮
<button class="code" disabled>发送验证码</button>
button.disabled=true 禁用
button.disabled=false 启用
//单选框 多选框
<input type="checkbox" class="isarg" checked />
// 设置勾选上
isarg.checked = true;
// 不勾选
isarg.checked = false;
//下拉列表
option.selected=true 选中
//文本域
// 通过js的方式来设置内容 三种方式都一样
textarea.value=`<h1>标题</h1>`; // ok
textarea.innerText=`<h1>标题</h1>`; // ok
textarea.innerHTML=`<h1>标题</h1>`; // ok
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
/>
<title>表单属性设置.html</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
</style>
</head>
<body>
<input type="text" class="username" />
是否同意协定
<input type="checkbox" class="isarg" checked />
<button class="code" disabled>发送验证码</button>
<select class="sel">
<option>去泰国</option>
<option>去非洲</option>
<option>去印度</option>
<option>去啊富汗</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>
<script>
/*
innerText innerHTML 主要是用来设置 双标签的文本内容的
*/
// 获取一下表单 dom元素
let username = document.querySelector('.username');
// 复选框
let isarg = document.querySelector('.isarg');
// 按钮
let code = document.querySelector('.code');
// 设置文本内容
// username.innerText = '我的用户名';
// 设置输入框的文本内容
username.value = '我的用户名';
// 设置勾选上
// isarg.checked = true;
// 不勾选
// isarg.checked = false;
// 设置按钮 可以启用 可以点击
// disabled 禁用
// code.disabled = true;// 禁用
code.disabled = false; // 启用
// select 选中
let option = document.querySelector('option:nth-child(4)');
// option.select = true; // 错误的单词
option.selected = true; // 正确的单词
// checked disabled selected
/*
表单属性的总结
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮的禁用
button.disabled=true 禁用
button.disabled=false 启用
3 设置单选框或者复选框
radio.checked=true 选中
checkbox.checked=false 取消选中
4 设置下拉列表 select
option.selected=true 选中
5 文本域标签 有点点特殊 ！
*/
//文本域标签
// 获取文本域中的值
// console.log(textarea.value); // 获取 OK <h1>你好</h1>
// console.log(textarea.innerText); // 获取 不OK
// console.log(textarea.innerHTML); // 获取 OK <h1>你好</h1>
// value和innerHTML的区别
// 设置 textarea 里面文本的内容的时候
// 可以选择 在标签内写文本即可
// 想要获取 内容
// .value 原样获取内容
// .innerHTML 获取的内容如果包含html 会转译
// 通过js的方式来设置内容 三种方式都一样
// textarea.value=`<h1>标题</h1>`; // ok
// textarea.innerText=`<h1>标题</h1>`; // ok
// textarea.innerHTML=`<h1>标题</h1>`; // ok
</script>
</body>
</html>
5.定时器-间歇函数
1.定时器函数介绍
1.网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
2.例如：网页中的倒计时
2.定时器函数基本使用
1.开启定时器
1.语法
setInterval(函数,间隔时间)
2.写法
//写法一
function repeat() {
console.log('前端程序员，头发多');
}
setInterval(repeat, 1000);
//写法二 setInterval(repeat, 1000);匿名函数写法
setInterval(function(){
console.log("头发没有啦");
},1000);
// 函数 负责 定时执行的业务
// 单位毫秒 1000毫秒=1秒 每隔一秒执行一次函数
2.关闭定时器
1.语法
let变量名= setInterval(函数，间隔时间)
clearInterval(变量名)
//一般不会刚创建就停止，而是满足一定条件再停止
2.写法
//方法一
let timeId = setInterval(function () {
console.log('准备吃晚饭');
}, 1000);
console.log(timeId); //打印
clearInterval(timeId); //清除定时
//方法二
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId); //清除定时
}
}, 100);
6.总结
1. 三种动态创建元素区别
1.document.write 只能在body标签中写内容以后很少用!!
2.innerHTML 设置标签的文本内容 还可以设置设置标签
3.innerText 设置标签的文本内容
2.DOM
1.创建
1.document.write
2.innerHTML
3.innerText
2.增加
1.元素.classList.add
2.元素.classList.toggle 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
3.div.className = 'box style' className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
3.删
1.元素.classList.remove 单独来指定移除一个class
2.元素.classList.toggle 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
4.改
1.修改元素属性： src、href、title等
2.修改普通元素内容： innerHTML 、innerText
3.修改表单元素： value、type、disabled等
4.修改元素样式： style、className 元素.classList.toggle
5.查
1.querySelector 获取一个元素
2.querySelectorAll 获取一组元素
3.document.getElementById 根据id来获取一个
4.document.getElementsByName 根据标签名称来获取 一组元素
5.document.getElementsByClassName 根据类名来获取元素 一组元素
