JavaScript Web APIs学习总结

以后声明变量我们有限使用哪一个？

const
有了变量先给const，如果发现它后面是要被修改的，再改为let

为什么const声明的对象可以修改里面的属性？

因为对象是引用类型，里面存储的是地址，只要地址不变，就不会报错
建议数组和对象使用const来声明

什么时候使用let声明变量？

如果基本数据类型的值或者引用类型的地址发生变化的时候，需要用let
比如，一个变量进行加减运算，比如for循环中的i++

Web API阶段我们学习哪两部分？

DOM和BOM

DOM是什么？有什么作用？

DOM是文档对象模型
操作网页内容，可以开发网页内容特效和实现用户交互

DOM树是什么？

将HTML文档以树状结构直观的表现出来，我们称之为文档树或者DOM树
作用：文档树直观的体现了标签与标签之间的关系

DOM树怎么创建的？

浏览器根据html标签生成的JS对象（DOM对象）
DOM的核心就是把内容当对象来处理

document是什么？

是DOM里面提供的一个对象
网页所有内容都在document里面

获取一个DOM元素我们使用谁？能直接操作修改吗？

querySelector()
可以直接操作修改

获取多个DOM元素我们使用谁？能直接修改吗？如果不能可以怎么做到修改？

querySelectorAll()
不可以，只能通过遍历的方式依次给里面的元素做修改

获取页面中的标签我们最终常用哪两种方式？

querySelectorAll()
querySelector()

它们两者的区别是什么？

querySelector()只能选择一个元素，可以直接操作
querySelectorAll()可以选择多个元素，得到的是为数组，要遍历得到每一个元素

它们两者小括号里面的参数有神马注意事项？

里面写css选择器
必须是字符串，也就是必须加引号

设置/修改DOM元素内容有哪2种方式？

元素.innerText属性
元素.innerHTML属性

三者的区别是什么？

元素.innerText属性，只识别文本，不能解析标签
元素.innerHTML属性 能够识别文本，能够解析标签
如果还在纠结到底用谁，可以选择innerHTML

设置/修改元素样式属性通过什么属性引出来？

style

如果需要修改一个div盒子的样式，比如padding-left，如何写？

element.style.paddingLeft=‘300px’
小驼峰命名法
不要忘记加单位

使用className有什么好处？

可以同时修改多个样式

使用className有什么注意事项？

直接使用className赋值会覆盖以前的类名

使用className和classList的区别？

前者修改大量样式的更方便
后者修改不多样式的时候方便
classList是追加和删除不影响以前类名

定时器函数有什么作用？

可以根据时间自动重复执行某些代码

定时器函数如何开启？

setInterval(函数名，时间)

定时器函数如何关闭？

let 变量名=setInterval(函数，间隔时间)
clearInterval(变量名)

什么是事件监听？

就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为注册事件

事件监听三要素是什么？

事件源（谁被触发了）
事件类型（用什么方式触发，点击还是鼠标经过）
事件处理程序（要做什么事情）

事件对象是什么？

也是个对象，这个对象里有事件触发时的相关信息

事件对象在哪里？

在事件绑定的回调函数的第一个参数就是事件对象

环境对象this是什么？

它代表着当前函数运行时所处的环境

判断this指向的粗略规则是什么？

谁调用，this就是谁

回调函数

把函数当作另外一个函数的参数传递，这个函数就是回调函数
回调函数本质还是函数，只不过把它当成参数使用
使用匿名函数作为回调函数比较常见

阻止冒泡如何做？

事件对象.stopPropagation()

阻止元素默认行为怎么做？

e.preventDefault()

事件委托的好处是什么？

减少注册次数，提高了程序性能

事件委托是委托给了谁？父元素还是子元素？

父元素

如何找到真正触发的元素？

事件对象.target.tagName

页面加载事件有哪两个？如何添加？

load事件，监听整个页面资源给window添加
DOMContentLoaded，给document添加，无需等待样式表、图像等完全加载

被卷去的头部或者左侧用哪个属性？是否可以读取和修改？

scrollTop/scrollLeft
可以读取，也可以修改

检测页面滚动的头部距离（被卷去的头部）用哪个属性？

document.documentElement.scrollTop

offsetWidth和offsetHeight是得到元素什么的宽高？

内容+padding+border

offsetTop和offsetLeft得到位置以谁为准？

带有定位的父级
如果都没有则以 文档左上角 为准

总结

实例化日期对象怎么写？

new Date()

日期对象方法里面月份和星期有什么注意的

月份是0~11 星期是0 ~6

获取时间戳有那三种方式，重点记住哪个？

date.getTime()
Date.now()
+new Date()
重点记住+new Date()因为可以返回当前时间戳或者指定的时间戳

什么是DOM结点？

DOM树里面每一个内容都称之为结点

DOM结点的分类

元素节点 比如div标签
属性节点 比如class属性
文本节点 比如标签里面的文字

我们重点记住哪个节点？

元素节点
可以更好地让我们理清标签元素之间的关系

查找父节点用哪个属性？

parentNode

查找所有子节点用哪个属性？

children

查找兄弟节点用哪个属性？

nextElementSibling
previousElementSibling

location.href属性获取完整的url地址，对其赋值时用于地址的跳转

search属性获取地址中携带的参数，符号?后面部分

hash属性获取地址中的哈希值，符号#后面部分

reload方法用来刷新当前页面，传入参数true时表示强制刷新

localStorage作用是什么？

可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也存在

localStorage存储，获取，删除的语法是什么？

存储：localStorage.setItem(key,value)
获取：localStorage.getItem(key)
删除：localstorage.removeItem(key)

正则表达式是什么？

是用于匹配字符串中字符组合的模式

正则表达式有什么作用？

表单验证（匹配）
过滤敏感词（替换）
字符串中提取我们想要的部分（提取）

正则表达式使用分为几步？

定义正则表达式
检测查找是否匹配

正则表达式检测查找 test方法和exec方法有什么区别？

test方法用于判断是否有符合规则的字符串，返回的是布尔值，找到返回true，否则返回false
exec方法用于检索（查找）符合规则的字符串，找到返回数组，否则为null

什么是元字符以及他的好处是什么？

是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能
比如英文26个字母，我们使用元字符a-z简洁和灵活

总结

+表示重复至少1次
？表示重复0次或者1次
*表示重复0次或多次
{m,n}表示重复m到n次

字符类.(点)表示什么意思？

匹配除了换行符之外的任何单个字符

字符类[]有若干代表什么意思？

匹配除了[]里面的任何单个字符