webApi 概念（一套可以我们直接操作页面元素的代码-功能）
webApi分类 1.Dom 2.Bom
DOM
- 文档对象模型 2.浏览器根据标签自动生成了对应的JS对象
3.可以让我们通过JS的方式很方便的来控制页面元素的 标签
获取dom元素
- 获取一个元素 document.querySelector（‘元素名’）
- 获取数组document.querySelectorAll（‘元素名’）
了解即可 1.根据id获取一个dom元素 document.getElementById 2.根据标签名称获取dom数组document.getElementsByTagName 3.根据类名获取dom数组document.getElementsByClassName
设置文本内容
1.设置标签的文本内容innerText
document.querySelector（'p'）.innerText ='你好'
2.设置标签的文本内容 还可以设置设置标签 innerHtml
document.querySelector("div").innerHTML = "<p>222</p> "
设置元素的样式
1.dom.style.color = 'red'
2.dom.className="nav" //会先清空这个dom的元素 旧的所有的类 然后再单独添加上 新的类 ------如果想要同时设置多个 class 以空格做分割即可
let div = document.querySelector('div');
// 通过 className 来设置类名即可
// 同时设置两个类上去
div.className = 'box redCls';
3.添加类 dom.classList.add('类名')
4.移除类 dom.classList.remove('类名')
5.切换类 dom.clalssList.toggle('类名')
<script>
// 添加一个class
let div = document.querySelector('div');
// div.className="d2";
// classList 添加一个类
div.classList.add("d2","d3","d4");
// div.classList.add("d2");
// div.classList.add('d3');
// 单独来指定移除一个class
div.classList.remove("d2","d3")
// 切换 （如果本来有，那我就移除 ， 如果本来没有，那我就添加）
div.classList.toggle("d4")
</script>
定时器
开启定时器
let timeId = setInterval(function () {},1000)
清除定时器
clearInterval(timeId)
let index = 0;
// 创建定时器的同时 返回了定时器id
let timeId = setInterval(function () {
index++;
console.log('开始追了', index);
// 判断是否满足条件了
if (index === 30) {
// 放弃 没有缘分
clearInterval(timeId);
}
}, 100);
<script>
/*
优化
1 把数组的定义 提取到外面
2 如果定时器中业务比较繁琐 也可以提取出去到单独函数中 不是必须
3 bug 点击多次 开始抽奖 ，后面无法停止定时器
在我们行业中 有专业的术语 节流！！
让我们的顺序 一一个的执行 一次一次的执行 不要同时执行多个
在一个定时器没有执行结束的时候 不让开启另外一个定时器
4 如何解决 点击多次按钮 后面停止定时器的bug n种解法
1 在开启定时器的时候 我直接禁用了button 不让它再次点击
在清除定时器 重新启用按钮即可
2 在每一次开启定时器的之前，都停止一次定时器
let btn1 = document.querySelector('.btn1');
let btn2 = document.querySelector('.btn2');
let h1 = document.querySelector('h1');
let arr = ['张飞', '赵云', '刘备', '吕布', '刘婵'];
let timeId;
// 定时器要执行的业务逻辑
function intervalDo() {
let index = Math.round(Math.random() * (arr.length - 1));
h1.innerText = arr[index];
// return undefined
}
btn1.addEventListener('click', function () {
// 先停止定时器 第一次清除 定时器的时候 timeId 是undefined
// if (timeId) {
if (timeId !== undefined) { //函数节流
// timeId = 是 undefined => bool 是false
// 当timeId = undefined =false 不满足条件 不会执行 清除了
clearInterval(timeId);
}
// 禁用按钮 不让再次点击
// btn1.disabled = true;
timeId = setInterval(intervalDo, 100);
console.log('开启定时器', timeId);
});
btn2.addEventListener('click', function () {
// 重新启用 开始按钮
// btn1.disabled = false;
clearInterval(timeId);
});
</script>
innerText innerHTML 主要是用来设置 双标签的文本内容的
表单属性总结
1 设置普通的输入框 input.value ="表单的值"
2 设置 按钮button的禁用
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 会转移
事件 三要素
1.事件源-给谁绑定事件
2.事件类型 click mouseenter mouseover ......
3.事件处理函数 要具体做的业务
<script>
// 获取div元素
let div = document.querySelector('div');
let input = document.querySelector('input');
// 绑定不同的事件
div.addEventListener("click",function () {
console.log("click 鼠标点击事件");
})
// 鼠标经过元素
div.addEventListener("mouseenter",function () {
console.log("mouseenter 鼠标经过");
})
// 鼠标离开元素
div.addEventListener("mouseleave",function () {
console.log("mouseleave 鼠标离开");
})
// 鼠标经过
// div.addEventListener("mouseover",function () {
console.log("mouseover 鼠标经过");
})
// 鼠标离开
div.addEventListener("mouseout",function () {
console.log("mouseout 离开");
})
// 获得焦点
input.addEventListener("focus",function () {
console.log("输入框 获得焦点 ");
document.body.style.backgroundColor='#000'
})
// 失去焦点
input.addEventListener("blur",function () {
console.log("输入框 失去焦点");
document.body.style.backgroundColor='#fff'
})
// 键盘按下事件 div不行 表单可以
// 给body标签添加比较多
document.body.addEventListener("keydown",function () {
console.log("keydown 按下");
})
// 键盘抬起
document.body.addEventListener("keyup",function () {
console.log("keyup 抬起");
})
// 输入事件 输入框
input.addEventListener("input",function () {
console.log("只要你在我的输入框输入了内容，我就触发");
})
</script>
addEventListener 对一个事件类型 绑定多个处理函数 dom2级
on+事件 对一个事件类型 只能绑定一个处理函数 dom0级
节点操作
查询节点 1.父节点查找 子元素.parentNode 2.子节点查找
父元素.children
children(返回的是一个伪数组，获取所有的元素节点) childNodes(获取所有子节点·包括文本节点·（空格·换行）·注释节点等)
兄弟关系节点查找
1.下一个兄弟节点
nextElementSibling
2.上一个兄弟节点
previousElementSibling
创建节点
1.创建元素节点方法
document.createElement('标签名')
创建文本节点
document.createTextNode('哈哈')
2.追加节点
插入到父元素的最后一个子元素
父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面
父元素.insertBefore(要插入的元素，在哪个元素的前面)
- 克隆节点
元素.cloneNode(布尔值)
若为true，则代表克隆时会包含后代节点一起克隆--深拷贝 若为false，则代表克隆时不包含后代节点--浅拷贝 默认为false
4. 父元素.append(子元素，子元素2，子元素3) 插入多个元素
- 替换节点
父元素.replaceChild(新节点，被替换的节点)
注意：appendChild/insertBefore/replaceChild在操作一个已有的元素时，是将已有的元素移动，而不是复制一份移动
- 删除元素
父元素.removeChild(子元素)
- remove ()自已删除自已
时间对象
一. 什么是时间戳
指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计量时间的方式
二. 实例化一个时间对象
let date = new Date() //获取当前时间 let date= new Date('2022-10-18') //获取指定时间
三. 获取时间戳的3种方式
- Date.now()
- date.getTime()
- +new Date() 返回当前时间和1970年1月1日0时0分0秒之间的毫秒数
trim()//去掉字符串首尾空格
let 声明的变量可以被修改
const 声明的变量不可以被修改 const 常量 固定不变
const arr=[];
arr.push("呵呵");// 新增一个元素 但是并没有修改过 数组的地址
arr=123;// 修改
console.log(arr);
作用：
在程序设计的时候，如果发现有一些数据 永远不会被更改
优先使用const （后期不小心发现被修改了，报错 - 去解决错误）
总结：
1 const和let一样 也能声明变量
2 const 声明的变量不能被修改 let 可以随意修改
3 判断是不是修改 看它有没有重新写 = 号或者自增自减少
4 能使用const 就不用let
事件对象
- 事件触发的那一瞬间所包含的信息
- 鼠标坐标信息 写法：event.clientX
clientX/clientY //参照物是视口页面的左上角
offsetX/offsetY //参照物当前的元素本身
- 键盘按下信息 (key)
<script>
// 给body标签 绑定 键盘按下事件 keydown
document.body.addEventListener('keydown', function (event) {
console.log(event.key);// 当下按下的按键 ！
});
</script>
事件流动 - 2个阶段
-
捕获阶段 --事件触发的时候先触发父元素->子元素
-
冒泡阶段
- 事件触发先触发子元素->父元素
- 冒泡JS事件默认的
- 把冒泡修改为捕获 addEventListener('click','事件处理函数'，true) ---1. true 表示捕获 ---2. false 或者不写 冒泡
- 工作用都是冒泡
- 阻止冒泡--- event.stopPropagation();
阻止标签默认行为 ---event.preventDefault()
<script>
/*
1 a标签的点击跳转
2 form表单中button点击刷新行为
1 阻止默认行为 - form表单 有一个 submit 事件 理解提交表单的触发-点击按钮的时候触发
2 给button按钮绑定点击事件 也去阻止试试
3 给button按钮 添加一个 type="button" 属性
4 换成 input标签 type="button"
5 把button 移出form表单的区域
使用新技术 阻止标签默认行为
*/
const a=document.querySelector("a");
const form=document.querySelector("form");
const button=document.querySelector("button");
a.addEventListener("click",function (event) {
console.log("a标签的点击触发啦");
// 阻止a标签的默认行为，让他不要跳转
event.preventDefault();
})
// form.addEventListener("submit",function (event) {
// // 不要让页面再刷新
// event.preventDefault();
// })
// button.addEventListener("click",function (event) {
// event.preventDefault(); // 不要让页面再刷新
// })
</script>
鼠标右键不要弹出默认菜单 鼠标右键contextmenu
// contextmenu 鼠标右键
document.body.addEventListener('contextmenu', function (event) {
event.preventDefault();
});
事件委托
- 通过给父元素绑定事件，事件触发，判断一下当前触发事件的元素target
- 实现原理-- 事件冒泡
- 点击了li标签
- 本质上也点击了Ul event.target.nodeName ---当前点击的元素名 （大写）
<script>
const ul = document.querySelector('ul');
ul.addEventListener('click', function (event) {
// event.target.style.backgroundColor="red";
// console.log(event.target);
// 只有点击了li标签才触发
// console.log(event.target.nodeName);// 当前点击的元素的标签名 大写
if (event.target.nodeName === 'LI') {
console.log('改变颜色');
event.target.style.backgroundColor = 'red';
}
});
</script>
页面滚动scroll
- 整个页面滚动给window来绑定scroll事件
- 获取页面滚动的距离（documentElement.scrollTop）
- 某个元素滚动给元素绑定scroll事件 案列：
const nav = document.querySelector('nav');
const header = document.querySelector('header');
window.addEventListener('scroll', function () {
// 获取页面滚动的高度
const scrollTop = document.documentElement.scrollTop;
// 判断页面滚动高度
if (scrollTop >= 250) {
nav.classList.add('fixed');
header.style.marginBottom = 150 + 'px';
} else {
nav.classList.remove('fixed');
header.style.marginBottom = 0;
}
标签自定义属性 data-xxx = 'xxx'
<p data-index = "time"> 123456 </p> ------- p.dataset.index //获取time
