白也blog - webapi
type: channel
link: http://www.baiyeovo.cn/index.php/tag/webapi/
items: Webapi知识复习

Webapi知识复习
type: item
date: 2022-03-09T17:20:00+08:00
description: DOMdom工作原理:1.代码从硬盘 读取到内存(代码)2.生成dom树*修改了dom树,最终渲染的页面也会改变3.渲染引擎开始渲染dom树(页面)查询页面元素1.获取单个元素 ： document.querySelector('选择器') * @description: 获取满足条件的第一个元素 * @param {string} 选择器字符串 * @return: dom对象 | null 2.获取多个元素 : document.querySelectorAll('选择器') * @description: 获取满足条件 所有元素 * @param {string} 选择器字符串 * @return: 一定是伪数组 （有三要素下标、元素、长度。 但是没有数组方法 ） 元素的内容操作(1)元素.innerText; 只能操作文本,不能解析html标签.(2)元素.innerHTML;可以解析html标签元素的属性操作(1)1.获取属性 元素.属性名(2)2.设置属性 元素.属性名 = 值dom事件分为两类鼠标事件:(1)鼠标单击事件:onclick(2)鼠标双击事件:ondblclick(3)鼠标移入事件:onmouseenter(4)鼠标移出事件:onmouseleave(5)鼠标移动事件:onmousemove键盘事件:(1)onfocus:键盘成为焦点(2)onblur:键盘失去焦点(3)oninput:键盘输入(实时获取输入框内容:字数统计+模糊查询)(4)onkeydown:键盘按下(监听enter键)(5)onkeyup:键盘松开input.addEventListener('keydown', function (e) { console.log('键盘按下'); e.key == 'Enter' }) 元素className和classLIst操作样式 (1)修改单个样式： (2)修改多个样式： (3)修改多个样式： //通过className操作类名:元素.className='类名' //先获取元素 let box = document.querySelector('.box') //1.获取类名 : //由于class是js中的关键字,所以要用className console.log(box.className) //2.设置类名 : //box.className='类名' className会覆盖以前的类名 // box.className = 'one' //通过classList操作类名 // 新增类名 // 元素.classList.add('类名') box.classList.add('two') //删除类名 // 元素.classList.remove('类名') box.classList.remove('one') //切换类名 有则移除,无则新曾 // 元素.classList.toggle('类名') box.classList.toggle('two') //判断类名 // 元素.classList.contains('类名') // true:有类名 false:没有 box.classList.contains('two') 事件及注册事件/* 1.交互功能 : 什么元素 在什么时刻 做什么事情 2.事件三要素 事件源 : 什么元素 事件类型 : 什么时刻 事件处理函数 : 做什么事 3.注册事件 ： 给元素添加交互 事件源.事件类型 = 事件处理函数 4.事件原理及注意点 (1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行) (2)事件处理函数只有两种情况可以执行 第一种： 用户主动触发交互， 浏览器会捕捉交互，底层会自动帮我们调用对象的方法 第二种： 手动调用对象事件处理函数 */ let box = document.querySelector('.box') box.addEventListener('click', function () { box.style.backgroundColor = 'blue' }) 排他思想 1.排他思想场景 ： 多个元素,只能选中一个 2.排他思想流程 ：两种思路 循环排他(万能的) :(1)循环干掉所有兄弟 (2)复活自己 类名排他(一定要有类名):(1)使用类名选择器干掉选中的兄弟 (2)复活自己 总结:元素有类名就用类名排他,没有类就用循环排他 .切记两者不可混用 类名排他:通过classList类名修改样式 循环排他 通过style修改样式1.事件源 ： 输入框 2.事件类型： onfouces: 成为焦点。 点击输入框出现光标的时候（此时用户可以输入文字） onblur: 失去焦点。 点击空白区…