API笔记
作用
使用js操作html和浏览器
变量声明
const优先，let当为变量时才用这个
数组和对象改值可以用const(只要栈里的地址不变，就可以直接给const的数组和对象里的元素增删改查）
将数组或者对象名指向一个新的数组或对象，则不能用const，因为地址已改变
const names=[];names=[1,2,3]//const obj={}; obj={uname:'123'//地址改变
const names=[]; names[0]=1//const obj={}; obj.uname='123'//地址不变，数据变
DOM
概念
文档对象模型，用来操作网页内容（标签）
DOM树
概念
将html文档以树状结构表现出来，直观体现标签与标签之间的关系
模型
DOM对象
html里面的标签（DOM树里的每一个模块）
DOM用法
根据css选择器获取DOM元素
获取一个选择器：const box=dovument.quertSelector('选择器名称')//默认是第一个
得到的是一个伪数组（不能增删改查）
获取多个选择器：document.quertSelectorAll('选择器名称')//同名的全部
得到的是一个伪数组（不能增删改查，有长度和索引号）
想得到所有对象，则需要for遍历
可以改变css样式（eg：p[0].style.color='red'）
在控制台显示出盒子及其属性
选择同名的第一个盒子：eg->ul li:first-child
选择第n个同名的：~nth-child(n)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>获取DOM元素</title>
</head>
<body>
<div class="box">123</div>
<div class="box" id="box">abc</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script>
// 选择一个
const box = document.querySelector("div");
const box2 = document.querySelector(".box");
const box3 = document.querySelector("#box");
const list = document.querySelector("ul li");
const list2 = document.querySelector("ul li:first-child");
console.log(box);
console.log(box2);
console.log(box3);
console.log(list);
console.log(list2);
// 选择全部
const listAll = document.querySelectorAll("ul li");
console.log(listAll);
</script>
</body>
</html>
修改元素的文本更换内容
对象.innerText 属性//修改文本内容
对象.innerHTML 属性//修改标签及文本内容
推荐使用innerHTML
修改元素属性
对象.属性=......
操作元素样式属性
对象.style.样式属性=值
注：
多组单词的属性要采取小驼峰命名法（eg:背景颜色：background-color--->backgroundColor）
当操作整个body时不需要先获取，直接document.body.style.属性值=''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>操作DOM元素</title>
<style>
.fix {
background-color: red;
width: 200px;
height: 200px;
}
div {
height: 200px;
width: 200px;
background-color: pink;
}
.box2 {
background-color: skyblue;
padding-left: 20px;
margin: 0 auto;
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<!-- <div class="box">文字内容</div>
<img src="../image/1.jpg" alt="" style="width: 200px" title="艺术照" />
<div class="fix">fix</div> -->
<div class="class"></div>
<script>
// 修改文字
// 1.获取元素
const box = document.querySelector(".box");
// 2.修改文字内容
// console.log(box.innerText); //获取文字内容
// box.innerText = `<strong>更换文字</strong>`; //修改文字，但是不能修改标签
// 修改标签
// box.innerHTML = "<strong>更换标签</strong>";
// 修改元素属性
const img = document.querySelector("img");
// 修改图片属性
// img.src = "../image/研学徽.png";
// img.width = "100px";
// img.title = "研学徽";
// 修改元素样式属性
const fix = document.querySelector(".fix");
// fix.style.width='300px'
// fix.style.color='pink';
// fix.style.backgroundColor='blue'
// 用类名
const div = document.querySelector("div");
div.className = "box2";
</script>
</body>
</html>
增加类
覆盖旧类
获取元素->获取名.className='目标选择器名'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>增加类名（完全覆盖旧类）</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
.box {
width: 300px;
height: 300px;
background-color: blue;
margin-left: 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="class"></div>
<script>
const div = document.querySelector(".class");
//新值完全代替旧值，要是还想保留旧值的某些属性，则可以div.className="class box",此时会遵循优先级
div.className = "box";
</script>
</body>
</html>
追加类
获取元素->获取名.classList.add('目标选择器名')
删除类
获取元素->获取名.classList.remove('目标选择器名')
切换类
获取元素->获取名.classList.toggle('目标选择器名')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>追加&删除类名</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.add {
margin-left: 200px;
padding: 20px;
}
.delete {
margin-left: 200px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
const fix = document.querySelector(".box");
// 追加
fix.classList.add("add");
// 删除
fix.classList.remove("add");
// 切换
fix.classList.toggle("delete");
</script>
</body>
</html>
操作表单属性
表单.value='用户名'（eg：表单.type='password'）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>修改表单属性</title>
</head>
<body>
<input type="text" value="电脑" /><br />
<input type="checkbox" name="多选" id="多选" class="choose" />全选
<input type="checkbox" class="choose" />选项一
<input type="checkbox" class="choose" />选项二
<input type="checkbox" class="choose" />选项三
<input type="checkbox" class="choose" />选项四
<script>
const uname = document.querySelector("input");
// 获取表单里面的值
console.log(uname.value); //uname.innerHTML得不到表单的内容,要输入input里面自带的属性值
// 修改值
uname.value = "鼠标";
console.log(uname.value);
console.log(uname.type);
uname.type = "password";
console.log(uname.type);
// 一键全选框
const choose = document.querySelector(".choose");
console.log(choose.checked); //false
// 勾选
choose.checked = true;
</script>
</body>
</html>
自定义属性
在后台显示的都是data-......
起名：data-......(叫什么名都行）='（起名）'
输出：获取：const ...=document.qu~('标签名/class名')->输出：log((常量名).dataset)(如果只要输出其中一个：log((常量名）.dataset.(data后面的名））)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>自定义属性</title>
</head>
<body>
<!-- 只要交data-......就行，重要的是data-和""里面的数 -->
<div data-id="1" data-span="不知道">123123123123</div>
<div data-id="2">2</div>
<div data-id="3">3</div>
<div data-id="4">4</div>
<div data-id="5">5</div>
<script>
// 获取元素
const one = document.querySelector("div");
console.log(one.dataset); //data的属性集合
console.log(one.dataset.id); //1
console.log(one.dataset.span); //'不知道'
</script>
</body>
</html>
定时器-间歇函数
setInterval(函数名（不要（）），间隔时间）（时间以ms为单位，一s1000ms）
定时器会自动生成一个id号，需要log查一下：let n=setInterval(fn,1000)->~.log(n)（注意：当定时函数被包围时，应在全局范围内定义变量再输出定时器id名）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>定时器</title>
</head>
<body>
<script>
function fn() {
console.log("执行");
}
// setInterval(function(){
// console.log('执行');
// },1000);
// 关闭定时器
// 查询定时器id号
let n = setInterval(fn, 1000);
console.log(n);
let m = setInterval(function () {
console.log("执行2");
}, 2000);
console.log(m);
// 关闭定时器
clearInterval(n);
clearInterval(m);
</script>
</body>
</html>
事件监听
元素对象.addEventListener('事件类型',要执行的函数)
组成&用法
事件源、事件类型、时间调用的函数
之后的函数也可以调用：获取名,动作（）
定位器在关闭后开启前要再关闭一次从而开启一个新的定位器，并且要是同一个定位器（id=setIntercal(function(){},......）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>事件监听</title>
<style>
button {
/* 接触到按钮时光标变化 参考菜鸟教程 */
cursor: pointer;
}
</style>
</head>
<body>
<button>按钮</button>
<input type="text" />
<script>
const btn = document.querySelector("button");
// 点击
btn.addEventListener("click", function () {
alert("点击了~");
// 点击完就消失
btn.style.display = "none";
});
// 接触
btn.addEventListener("mouseenter", function () {
console.log("接触了");
});
// 离开
btn.addEventListener("mouseleave", function () {
console.log("离开了");
});
// 点击出现光标时
const input = document.querySelector("input");
input.addEventListener("focus", function () {
console.log("焦点出现");
});
// 除去光标时
input.addEventListener("blur", function () {
console.log("焦点离开");
});
// 键盘按下
// input.addEventListener("keydown", function () {
// console.log("按下了");
// });
// 键盘弹起
// input.addEventListener("keyup", function () {
// console.log("弹起了");
// });
// 输入文本框事件
input.addEventListener("input", function () {
console.log(input.value);
});
</script>
</body>
</html>
API笔记
http://localhost:8090//archives/apibi-ji