【前端基础--7】
DOM操作
DOM，全称(Document Object Model)，文档对象模型。
提供操作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元素内容
<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>操作标签属性
<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是关键字，获取classNameconsole.log(Box.className);// 标签自带属性要合理合法（id class title src alt name等）let pic = document.querySelector('.pic');console.log(pic.src);// 赋值修改其他路径pic.src='../22.jpg';</script>
</body>操作样式
<!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>操作节点
<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(){ }
<!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属性变成noneadv.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)，浏览器对象模型。
定时器
<body><!-- 定时器 --><script>function fn(){console.log('打印文字中');}// setTimeout 循环一次// 第一个参数：接收回调函数// 第二个参数：延迟时间(ms) 1s=1000mssetTimeout(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>重要对象
<script>// 用户当前的url信息console.log(location);// 点击页面文档，跳转对应的地址document.onclick = function(){location.href='https://www.baidu.com/'}// 返回当前窗口上一条历史记录history.back();// 返回下一条历史记录history.forward();// 获取浏览器相关信息console.log(navigator);</script>math对象
<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)); //10console.log(Math.abs(null)); //0// 伪随机数 范围：0~1console.log(Math.random()); //0.3485665674792038// 取0~100的随机数let num = Math.random()*100; //88.0133275792085console.log(num);// 取整数 parseIntconsole.log(parseInt(num)); //88// 四舍五入 Math.round()console.log(Math.round(11.5)); //12console.log(Math.round(-22.5)); //-22// 向下取整Math.floorconsole.log(Math.floor(11.5)); //11console.log(Math.floor(-12.6)); //-13// 向上取整Math.ceilconsole.log(Math.ceil(13.5)); //14console.log(Math.ceil(-22.5)); //-22</script>