DOM操作
DOM，全称(Document Object Model)，文档对象模型。
提供操作HTML的方法（操作页面元素）
获取节点 --- 操作元素标签
html
<body>
<div id="box">
我是盒子标签
</div>
<p class="text">p标签</p>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<div class="box">
用类名的盒子1
</div>
<div class="box">
用类名的盒子2
</div>
<script>
// 打印document 全局对象
console.log(document);
// 通过元素id,定义变量来获取对应标签
let box = document.getElementById('box');
console.log(box);
// 通过类名,定义变量来获取对应标签
let text = document.getElementsByClassName('text');
console.log(text);
// 通过标签名，定义变量来获取对应
let list = document.getElementsByTagName('li'); //获取页面中所有的li标签 得到的数据是一个集合
console.log(list);
console.log(list[0]); //打印第一个li标签
// 如果想看到每一项，可以通过循环遍历出来
for (let i = 0; i < list.length; i++) {
// i对应获取到的元素数组的下标
console.log(list[i]);
}
// 通过css选择器来获取元素
// 通过选择接收
let wrap = document.querySelector('.box');
console.log(wrap); //控制台中只打印了第一个
// 获取多个相同的元素 集合
let wrap1 = document.querySelectorAll('.box');
console.log(wrap1);
</script>
</body>操作html元素内容
html
<body>
<div id="box">
<span>不开心</span>
</div>
<p class="text">好多内容</p>
<script>
// innerHTML 获取元素的内容（包括标签）
let Box = document.getElementById('box');
console.log(Box.innerHTML); //<span>不开心</span>
let Span = document.getElementsByTagName('span');
console.log(Span[0].innerHTML);
// 标签[0]被替换
Span[0].innerHTML='GO！';
// 通过赋值方法，在标签后面添加
Span[0].innerHTML += 'come on';
let text = document.querySelector('.text');
console.log(text);
text.innerHTML='123';
// 插入标签 innerHTML会解析标签
text.innerHTML='<a href="https://www.baidu.com/">点我</a>'
// innertext 不解析标签
text.innertext='<a href="https://www.baidu.com/">点我</a>'
</script>
</body>操作标签属性
html
<body>
<div id="box" class="text" title="你好">加油</div>
<img src="../11.jpg" alt="" class="pic">
<script>
let Box = document.querySelector('#box');
// 截取id名
console.log(Box.id);
// 获取标题描述
console.log(Box.title);
// 获取类名 class是关键字，获取className
console.log(Box.className);
// 标签自带属性要合理合法（id class title src alt name等）
let pic = document.querySelector('.pic');
console.log(pic.src);
// 赋值修改其他路径
pic.src='../22.jpg';
</script>
</body>操作样式
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tit1{
color: antiquewhite;
font-size: 20px;
background-color: blue;
}
.wrap{
width: 200px;
height: 300px;
background-color: aqua;
}
.wr{
background-color: brown;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<h1 class="tit1">不想学习</h1>
<div class="box text1">123</div>
<script>
let title = document.querySelector('.tit1');
// 修改文字颜色
title.style.color='skyblue';
// 需要访问元素节点 style属性 先获取样式对象 里面包含css属性
// 更改文字大小
title.style.fontSize='30px';
// 如果css属性包含连接符- 都删除掉，连接的首字母大写（小驼峰写法）
title.style.backgroundColor='aquamarine';
// 类名操作
let box = document.querySelector('.box');
// 使用.className 新加类名，删除类名都会比较麻烦
// box.className='wrap';
// 推荐用classList来操作类名
// 添加类名
box.classList.add('wrap');
// 删除类名
box.classList.remove('text1');
// 有则删 无则加
box.classList.toggle('wrap');
box.classList.toggle('wr');
</script>
</body>
</html>操作节点
html
<div class="wrap">
<p>hello</p>
</div>
<script>
/*
动态操作节点
1.创建节点 createElement()
2.添加节点 appendChild() 末尾插入
3.在某个元素的子节点前添加节点 insertBefore()
4.替换节点 replaceChild(替换的值，被替换的值)
5.删除节点 removeChild
*/
let wrap = document.querySelector('.wrap');
console.log(wrap);
// 创建节点
let newP = document.createElement('p');
// 添加节点
wrap.appendChild(newP);
// 在创建的标签里面添加文本内容
let text = document.createTextNode('welcome!');
// 给newP添加创建的文本内容
newP.appendChild(text);
// 创建一个新的节点
let box = document.createElement('a');
box.innerHTML = 'good!';
// wrap.appendChild(box);
// 在wrap上第二个子节点前插入
wrap.insertBefore(box,wrap.children[1]);
// 打印元素子节点集合
console.log(wrap.children);
// 替换节点
// 创建一个新的节点
let bo = document.createElement('h2');
// 插入文字在新的h2上
bo.innerHTML='一花';
// 把wrap第一个子节点替换掉 replaceChild(要替换的，被替换的)
wrap.replaceChild(bo,wrap.children[0]);
// 删除节点
// 把wrap的第三个子节点删除
wrap.removeChild(wrap.children[2]);
</script>监听事件
|-------------|-----------------|
| 事件 | 描述 |
| onclick | 点击鼠标左键时触发事件 |
| onmouseover | 鼠标移动到某个元素时触发事件 |
| onmouseout | 鼠标离开某个元素范围时触发事件 |
| onblur | 当前元素失去焦点时触发事件 |
| onfocus | 当某个元素获得焦点时触发事件 |
| onscroll | 当滚动浏览器的滚动条时触发事件 |
绑定事件：触发事件元素.监听事件=function(){ }
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
}
.box {
width: 100px;
height: 100px;
background-color: antiquewhite;
}
/* .box:active{
background-color: aquamarine;
} */
.advertisement{
width: 100px;
height: 200px;
background-color: brown;
}
.x-code{
width: 20px;
height: 20px;
border: 1px solid palegoldenrod;
float: right;
text-align: center;
}
#btn{
width: 60px;
height: 30px;
outline:none;
}
.wrap{
width: 500px;
height: 400px;
background-color: cadetblue;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
我是盒子
</div>
<div class="advertisement">
<p class="x-code">x</p>
广告
</div>
<button id="btn">按钮</button>
<div class="wrap">盒子</div>
<div class="wrap">盒子</div>
<div class="wrap">盒子</div>
<script>
let box = document.querySelector('.box');
// 点击事件
box.onclick = function () {
// console.log(box.innerText);
box.style.backgroundColor = 'pink';
}
// 关闭广告
let close = document.querySelector('.x-code'),
adv = document.querySelector('.advertisement');
// 点击close类名标签
close.onclick = function(){
// 修改样式 把display属性变成none
adv.style.display = 'none';
}
// 当鼠标移动到某个元素时触发事件
box.onmouseover = function(){
console.log('鼠标移进盒子了');
}
// 当鼠标移出某个元素范围时触发事件
box.onmouseout = function(){
console.log('鼠标移出盒子了');
}
// 点击input 获取焦点触发事件
btn.onfocus = function(){
btn.style.border='1px solid pink';
}
// 失去焦点触发事件
btn.onblur = function(){
console.log('失去焦点了');
}
let wrap = document.querySelector('.wrap')
// 滚动滚动条触发事件
window.onscroll = function(){
console.log('正在滚动滚动条');
wrap.style.backgroundColor='pink';
}
</script>
</body>
</html>BOM
BOM，全称(Browser Object Model)，浏览器对象模型。
定时器
html
<body>
<!-- 定时器 -->
<script>
function fn(){
console.log('打印文字中');
}
// setTimeout 循环一次
// 第一个参数：接收回调函数
// 第二个参数：延迟时间(ms) 1s=1000ms
setTimeout(fn,1000);
// setTnterval() 循环多次
let time = setInterval(()=>{
console.log('呀吼！')
},2000) // 每隔两秒执行一次
// 清除多次定时器
clearInterval(time)
// 代码执行十次就暂停
let sum = 0;
let set = setInterval(()=>{
console.log('打印');
sum++;
// 判断代码是否执行十次 清除定时器
if (sum==10){
clearInterval(set)
}
},1000)
</script>
</body>重要对象
html
<script>
// 用户当前的url信息
console.log(location);
// 点击页面文档，跳转对应的地址
document.onclick = function(){
location.href='https://www.baidu.com/'
}
// 返回当前窗口上一条历史记录
history.back();
// 返回下一条历史记录
history.forward();
// 获取浏览器相关信息
console.log(navigator);
</script>math对象
html
<script>
// 用户当前的url信息
console.log(location);
// 点击页面文档，跳转对应的地址
document.onclick = function(){
location.href='https://www.baidu.com/'
}
// 返回当前窗口上一条历史记录
history.back();
// 返回下一条历史记录
history.forward();
// 获取浏览器相关信息
console.log(navigator);
// math对象
// 圆周率
console.log(Math.PI);
// Math对象具有数学常数 具有数学属性和方法
console.log(Math);
// Math.abs() 返回指定数值的绝对值
console.log(Math.abs(-10)); //10
console.log(Math.abs(null)); //0
// 伪随机数 范围：0~1
console.log(Math.random()); //0.3485665674792038
// 取0~100的随机数
let num = Math.random()*100; //88.0133275792085
console.log(num);
// 取整数 parseInt
console.log(parseInt(num)); //88
// 四舍五入 Math.round()
console.log(Math.round(11.5)); //12
console.log(Math.round(-22.5)); //-22
// 向下取整Math.floor
console.log(Math.floor(11.5)); //11
console.log(Math.floor(-12.6)); //-13
// 向上取整Math.ceil
console.log(Math.ceil(13.5)); //14
console.log(Math.ceil(-22.5)); //-22
</script>