一、Web API基本认知
1.作用和分类
作用：就是用JS去操作html和浏览器
分类：DOM（文本对象模型）、BOM（浏览器对象模型）
2.什么是DOM
- lDOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
- DOM作用：开发网页特效和实现用户交互
3.DOM树
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 作用：文档树直观的体现了标签与标签之间的关系
4.DOM对象（重要）
（1）DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
（2）DOM的核心思想
- 把网页内容当做对象来处理
（3）document 对象
- 是 DOM 里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
- 网页所有内容都在document里面
二、获取DOM对象
1.根据CSS选择器来获取DOM元素 (重点)
1.1 选择匹配的第一个元素
document.querySelector('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
1.2选择匹配的多个元素
语法:
document.querySelectorAll('css选择器')
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（如 for）的方式获得。
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
例如：
document.querySelectorAll('ul li')
2. 其他获取DOM元素方法（了解）
<div id="nav">这是nav</div>
<p>这是p标签</p>
<div class="container">这是container</div>
<script>
//根据id获取一个dom元素
let nav = document.getElementById('nav')
console.dir(nav)
//根据标签获取一组dom元素
let ps = document.getElementsByTagName('p')
console.dir(ps)
//根据类名获取一组dom元素
let divs = document.getElementsByClassName('container')
console.dir(divs)
</script>
三、设置/修改DOM元素内容
1.document.write()
- 只能将文本内容追加到 /body 前面的位置
- 文本中包含的标签会被解析
//只能将内容加到</body>上面，以后很少用
document.write('<h1>h1标签</h1>');
2.元素innerText属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签不会被解析
//innerText能将文本内容添加/更新到任意标签位置，但不会解析标签
document.querySelector('li:nth-child(2)').innerText = '修改';
3.元素innerHTML属性
- 将文本内容添加/更新到任意标签位置
- 文本中包含的标签会被解析
//innerHTML能将文本内容添加/更新到任意标签位置，也会解析标签
document.querySelector('li:nth-child(3)').innerHTML = '<button>修改</button>';
四、设置/修改DOM元素属性
1.设置修改元素常用属性
- 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
- 最常见的属性比如： href、title、src 等
- 语法：
//对象.属性 = '值
//1.获取元素
let pic = document.querySelector('img')
//操作元素
pic.src = './images/01.jpg'
pic.title = '这是一个图片
2.设置/修改元素样式属性
2.1通过 style 属性操作CSS
语法：
//对象.style.样式属性 = '值'
<div>迪丽热巴</div>
<script>
let div = document.querySelector('div');
div.style.fontSize="80px";
div.style.width="600px";
div.style.height="300px";
div.style.lineHeight="300px";
div.style.textAlign="center";
div.style.color="aqua";
div.style.backgroundColor="pink";
</script>
注意：
1.修改样式通过style属性引出
2.如果属性有-连接符，需要转换为小驼峰命名法
3.赋值的时候，需要的时候不要忘记加css单位
2.2操作类名(className) 操作CSS
如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
语法：
//active是一个css类名
元素.className = 'active'
注意：
1.由于class是关键字, 所以使用className去代替
2.className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名
2.3通过 classList 操作类控制CSS
为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名
语法：
//增加一个类
元素.classList.add('类名');
//删除一个类
元素.classList.remove('类名');
//切换一个类 （如果本来有就删除，没有就添加）
元素.classList.toggle('类名');
3.设置/修改 表单元素 属性
<!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>04-表单属性设置.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> 你好 </textarea> -->
<textarea><h1>你好</h1></textarea>
<script>
function init() {
/*
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 选中
*/
}
// 获取 文本域标签
// 属于表单元素 又是双标签
let textarea = document.querySelector('textarea');
// 在html想要设置 文本域的内容 直接在标签内写即可
// <textarea> 你好 </textarea>
// 获取文本域中的值
// 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>
五、定时器-间歇函数
1.开启定时器
function repeat() {
console.log('前端程序员，头发多');
}
// 每隔一秒执行一次函数
// 时间单位 毫秒 1000毫秒=1秒
setInterval(repeat, 1000);
//其他写法
setInterval(匿名函数,1000);
setInterval(function(){
console.log("头发没有啦");
},1000);
2.关闭定时器
/* let 变量名 = setInterval(函数,间隔时间)
clearInterval(变量名) */
//例
// 追女孩子 追30次 不行 我就撤退！！
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
注意：
1.函数名字不需要加括号
2.定时器返回的是一个id数字
