前端webApi知识点总结
1.获取元素
获取1个:document.querySelector('选择器')
获取多个:document.querySelectorAll('选择器'),是一个伪数组
2.操作属性
1.获取类名 classNmae // JS给类名做了加工:因为class是一个关键字(JS中就有),加工成className
类名可以用classList拿:classList也是一个对象
2.添加类,移出类
// 建议使用classList:提供了两个API
// add():添加类
// remove():移出类
3.获取页面的内容 元素.innerText
3.元素属性
// JS要操作元素属性:必须通过style属性来操作
let box = document.querySelector('.box');
console.log(box);
// 获取元素属性:元素.style
console.log(box.style); // 只包含来height属性:width没有拿到值
// 元素.style 永远只能操作(读和写)行内样式
// 深入获取:元素.style.具体样式即可
console.log(box.style.height); // 带单位
4.事件
事件三要素
1. 事件源:给哪个元素添加事件
2. 事件类型:让用户如何触发 onclick单击,onmouseover鼠标移入,onmouseout鼠标移出,ondblclick双击
3. 事件处理:要绑定的代码是什么(做效果)
* 只有一种办法可以保存代码暂时不执行:函数
元素.事件类型 = function(){
事件处理
}
5. innerText和innerHTML的区别
相同点:都是用来获取或者操作双标签之间的内容
区别:innerText只操作文本,innerHTML可识别标签
6.获取元素的方式
1. 根据ID的值获取元素:获取1个:getElementById('id的值') 这个需要掌握以下,其余的了解
2.根据标签名获取元素:获取多个 document.getElementsByTagName('标签名');
3. 通过类名获取:获取多个 getElementsByClassName('类名');
4.通过name属性值获取元素:表单元素,getElementsByName
7.自定义属性操作 attribute
attribute属性操作:专门用来操作元素的属性的
attributes:获取所有属性,是一个对象(一般不用) getAttribute('属性名'):根据属性名获取值
setAttribute('属性名',属性值):设置或者修改属性的值 removeAttribute('属性名'):删除指定的属性
8.节点 网页一切皆节点 重点掌握元素节点
1.子节点(子代元素)
1.获取所有子节点:childNodes(没有实际的价值:一般是操作元素)
// 获取所有子元素(子元素节点):children
let children2 = ul.children;
console.log(children2);
// children属性获取的子元素:属于HTMLCollection ,不能使用forEach()
第一个孩子元素:firstElementChild(使用) 第一个孩子节点:firstChild(不用)
最后一个元素:lastElementChild(使用) 最后一个节点:lastChild(不用)
2.兄弟节点
前一个兄弟节点:previousSibling 前一个兄弟元素:previousElementSibling
后一个兄弟节点:nextSibling 后一个兄弟元素:nextElementSibling
3.父节点
元素. parentNode:父节点 元素. parentElement:父元素
9.节点操作
1.创建节点 document.createElement('表签名')
2. 追加元素:将元素放到某个父元素的孩子最后(最后一个孩子)
父元素.appendChild(子元素)
3.插入元素:父元素.insertBefore(新元素,已有的兄弟元素)
4.替换元素:拿新的覆盖旧的
父元素.replaceChild(新元素,旧元素)
4.删除元素
1. 父元素删除子元素:父元素.removeChild(子元素)
2. 自己删除自己:自己.remove()
5.克隆节点
浅克隆:只克隆元素自己的结构(所有子节点都不克隆) 元素.cloneNode(false)
深克隆:克隆全部,元素.cloneNode(true)
10. 本地储存
1.localStorage:永久存储,只要用户不清理浏览器数据,数据就会一直存在
2. sessionStorage:会话存储,只要用户关闭页面,数据立马自动清理
两种存储,格式和操作都一样,只是数据存储的生命周期不同
扩展:越是重要的安全的内容,存储的时间越短
3. localStorage和sessionStorage:共用一套相同的API(他们两个的API函数和使用方式:一模一样)
getItem('名字'):根据名字获取值
sessionStorage.getItem()
setItem('名字','值'):将值存储倒对应的名字下
removeItem('名字'):删除单个名字对应的本地存(名字 和 值 一起干掉)
clear():清除当前网站在浏览器中存储的所有数据
11. offset家族:专门用来获取元素的真实数据
真实宽度:元素宽高组成 border + padding + content
元素.offsetWidth:高度,数字
元素.offsetHeight:高度,数字
真实偏移量:定位 + margin
元素.offsetLeft:左偏移量
元素.offsetTop:上偏移量 数字
定位父级:拥有定位属性的父元素(一直找到body为止:body是顶级定位父级)
元素.offsetParent:元素对象
12.定时器 :是JS内部提供的一种机制,允许开发者将代码放到某个容器中,系统会自动按时调用这段代码
根据定时器的效果,将定时器分为两种
定时器:setInterval(回调函数,间隔周期):以毫秒为单位定时执行回调函数(重复执行多次)
延时器:setTimeout(回调函数,间隔时间):以毫秒为单位间隔指定时间后调用回调函数(仅执行1次)
// 需求:让盒子自动的变化宽度:每隔1秒钟(1000ms),自动变化10px
setInterval(function () {
let box = document.getElementById('box');
box.style.width = box.offsetWidth + 10 + 'px';
}, 1000);
13.清除定时器
定时器是可以被清理的:一个页面中可能同时出现很多个定时器,如何区分清理定时器呢?
1. 只要使用一次setInterval()就会得到一个返回值:定时器 句柄handler(代表:代表当前定时器)是一个数字
2. 如果要清理定时器:必须指定定时器的句柄,要清理哪一个
// clearInterval(句柄):清除指定的定时器
// clearInterval(timeId);
// 定时器setInterval和延时器setTimeout本质是同一个东西
// 定时器setInterval的清除:clearInterval
// 延时器setTImeout的清除:clearTimeout
14.BOM对象
BOM:浏览器对象模型,专门用来操作浏览器的系统API
BOM对象一共就5个
window对象:所有对象的顶级对象(document)
location对象:url管理对象(Uniform Resource Locator,网络上的绝对定位)
history对象:历史浏览器记录对象
navigator对象:浏览器信息对象(JS通过这个对象获取浏览器信息)
screen对象:获取屏幕大小
15.window对象(js顶级对象)
1.所有没有归属的内容都是window对象的
1.var声明的全局变量 2.没有关键字的变量 3.全局函数
2.所有的回调函数里面的this都是window对象
3.窗口控制
open()新开窗口 close()关闭窗口
4.window事件
onload:加载事件,允许js代码写到结构的前面(比较重要)
onbeforeunload:销毁前事件(DOM对象需要被销毁:刷新、关闭、重新加载)
onunload:销毁事件(DOM被销毁触发)
16. location对象专门管理URL(Uniform Resource Locator)统一资源定位
1. 完整url: http:// www.baidu.com:80 /file/index.html
协议 主机地址(IP) 端口 URI(Identifier)
2. BOM有一个对象:location获取url相关信息
3. location有一批API,允许管理url
// 1. 重新开启新的url:assign
// location.assign('http://www.baidu.com');
// 会产生历史记录
// location.assign('http://www.baidu.com', '_blank'); // 无效
// 2. 重新加载:reload
// location.reload();
// 3. 替换url:replace与assign对比:没有历史记录
// location.replace('http://www.baidu.com');
17. navigator对象
// navigator对象是用来获取浏览器信息的
console.log(navigator);
// 实际开发的时候时候一般都是统计浏览器和操作系统信息
console.log(navigator.userAgent);
// 需求:用我网站的人到底是什么操作系统
if (navigator.userAgent.indexOf('Win64') != -1 || navigator.userAgent.indexOf('WOW64') != -1) {
document.body.innerHTML = '您使用的是windows64位操作系统';
}
18.history:管理历史记录
history对象:主要用它的API实现目标效果
back():回退1步
forward():前进1步(先有回退,才会产生前进)
go():可前进也可以后退:数字参数,依次可以回顾历史多步
正数:前进 forward
负数:后退 back
19.获取元素所有样式
1. jS提供了一个API,可以获取一个元素的全部样式:getComputedStyle(元素):这个方法是window对象
2. getComputedStyle():功能与名字一样:只能获取,不能修改(如果要修改:通过元素.style.具体样式 = 值
20.scroll滚动家族
1.想要看滚动:得有滚动事件:onscroll
document.querySelector('.box').onscroll = function () {}
2. 获取内容的真实宽高:scrollWidth/scrollHeight
3. 滚出去的距离:scrollTop/scrollLeft
4.页面滚动:一般都是给window或者document绑定滚动事件
5.获取页面的滚动距离:不建议使用scrollTop和scrollLeft
JS额外做了处理(class - className)
pageXOffset === scrollLeft pageYOffset === scrollTop
21.可视client家族
1.可视区域大小 padding + content
2.resize事件
元素resize 元素.clientWidth 元素.clientHeight
页面resize innerWidth innerHeight
22.事件对象
// 点击事件
document.querySelector('.box').onmouseover = function (e) {
// 事件函数:是系统在调用:系统判定用户的操作,落在了当前绑定了事件代码的元素区域的时候:系统来调用 事件处理函数
// console.log(e);
// 事件对象:给元素添加事件函数的时候,传入一个形参即可:系统调用的时候,会传入实参:事件对象
// IE8,事件对象不是通过 事件函数传入:保存在window的event属性中
// console.log(window.event);
// 兼容处理
e = e || window.event;
console.log(e);
};
</script>
23.事件对象:三大坐标系
1. 页面坐标系:page系列:X和Y
2. 可视坐标系:client系列:X和Y
3. 屏幕坐标系:screen系列:X和Y
24. 阻止a链接跳转:希望应用a链接默认的效果,但是不要跳转
阻止a链接跳转的方式有两大类
1. 阻止点击事件:让点击事件不要跳转
实现方式:onclick = function(){ return false;} ,return false直接给onclick
* 行内JS:οnclick="return false";
* 行外js:但是需要额外的绑定onclick事件:return false:覆盖了原来onclick的效果
2. 直接修改href的值:不让跳转(线下体验店)
* href="javascript:;"
* href="javascript:void(0);"
25. 注册事件 addEventListener() 删除事件removeEventListener()
1.addEventListener('事件类型:没有on',回调函数,布尔值:触发阶段)
事件类型:没有on
回调函数:就是原来的onclick后面的function
布尔值:触发阶段(默认冒泡)
2. 删除事件只能删除有名函数
26.事件冒泡(一定存在,子元素发生的事件,父元素只要有同名的就会被后续触发)
1.冒泡价值:事件委托
给父元素绑定事件 利用事件对象.target获取目标子元素 减少元素绑定次数:提升效率
2.阻止事件冒泡 e.stopPropagation();
27.事件捕获:父子元素拥有相同事件,子元素触发前,父元素会先触发
e.stopPropagation() 同样适用
28.事件发生三大阶段
1.捕获阶段
2.目标阶段
3.冒泡阶段