整理复习不停步，今天复习对象和js的三大组成，整理自定义对象的一些方法使用，以及内置对象的方法属性；整理BOM、DOM的一些相关的基础知识
一.对象
1.遍历对象的方法
（1）for...in：这个方法会遍历原型链上的属性
let obj={
name:"小明",
age:"16"
}
for(let key in obj){
console.log(`键名:${key},键值：${obj[key]}`);
}
输出：键名:name,键值：小明；键名:age,键值：16
（2）Object.keys(obj)：将所有的键名以数组的形式返回
let obj={
name:"小明",
age:"16"
}
console.log(Object.keys(obj));
输出： ['name', 'age']
(3)Object.values(obj)：返回一个数组，其元素是在对象上找到的可枚举属性值。
let obj={
name:"小明",
age:"16"
}
console.log(Object.values(obj));
输出： ['小明', '16']
（4）Object.entries()
let obj={
name:"小明",
age:"16"
}
console.log(Object.entries(obj));
输出：[['name', '小明'],['age', '16']]
2.String对象
(1)str.length:属性字符串对象字符串长度
(2)str.indexOf():
给定一个参数：要搜索的子字符串，搜索整个调用字符串，并返回指定子字符串第一次出现的索引。给定第二个参数：一个数字，该方法将返回指定子字符串在大于或等于指定数字的索引处的第一次出现。
(3)str.replace(substr,replacement)
参数
substr：必需。需要被替换的字符串值
replacement：必需。替换后的字符串值。
默认情况下使用replacement替换找到的第一个substr的值. 需要全部替换需要加上全局标志 g
let str="aabca"
console.log(str.replace("a","d")); //dabca
console.log(str.replace(/a/g,"d")); //ddbcd
（4）str.substr(start,length)
参数
start：必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。
length：可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。
let str="aabca"
console.log(str.substr(1));
输出：abca
(5)str.toLowerCase()
把字符串转换为小写。
(6)str.toUpperCase()
把字符串转换为大写。
3.Number对象
num.toFixed():把数字转换为字符串，结果的小数点后有指定位数的数字。
4.Math对象
(1)Math.PI PI属性代表圆周率
(2)Math.ceil(x) 对一个数x进行上舍入
(3)Math.floor(x) 对一个数x进行下舍入
(4)Math.max(x) 返回指定数中带有较大的值的那个数。
(5)Math.min(x,y) 返回指定数中带有较小的值的那个数。
(6)Math.random() 返回介于 0 ~ 1 之间的一个随机数，包含0不包含1。
(7)获取指定范围的随机整数
function randomInt(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
5.Date对象
Date 对象用于处理日期和时间。
(1)new Date() 创建date代表指定当前系统时间
(2)new Date(dateVal) 根据dateVal指定的时间创建date对象
注意：dateVal的值为字符串时：必须用月/日/年的格式来表示，“/”或“-”作为日期分隔符，小时、分钟、和秒钟之间用冒号分隔，
dateVal也可以是数字类型的参数,数字类型的参数代表毫秒值，该毫秒值是从1970 年 1 月 1 日 到指定日期的毫秒数
console.log( new Date("2014/05/06"));
输出：Tue May 06 2014 00:00:00 GMT+0800 (中国标准时间)
(3)new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]]) 根据指定年月日时分秒创建date对象 注意：month中的值从0开始，0—11代表12个月 (4)dateObject.toLocaleString() 可根据本地时间把 Date 对象转换为字符串，并返回结果。
let date=new Date()
console.log( date.toLocaleString());
输出：2022/9/23 08:39:52
Date对象的常用方法
date.getTime() 可返回距 1970 年 1 月 1 日之间的毫秒数。
let date=new Date()
console.log( date.getTime());
输出：1663893175013
二、javeScript
（1）构成部分
核心( ECMAScript)：JavaScript语言的核心，包含基本语法、数据类型、关键字...
文档对象模型( DOM)：提供访问和操作网页内容的方法和接口，可操作HTML中的标签内容、样式、结构
浏览器对象模型( BOM)：提供与浏览器交互的方法和接口。可操作浏览器窗口，比如浏览器地址栏，浏览器访问历史等；
(2)window对象
Window对象是BOM顶层对象，表示浏览器窗口或者网页中的框架。
Window 对象是脚本中的全局对象，可以在任何地方调用，脚本中任何对象的使用最终都要追溯到对window对象的访问，所以在使用window对象的各种属性和方法时，window前缀可以省略。
1)window对象的属性和方法
setInterval():按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout():在指定的毫秒数后调用函数或计算表达式。
clearInterval():取消由 setInterval() 设置的 timeID。
clearTimeout():取消由 setTimeout() 方法设置的 timeID
scrollTo():浏览器滚动到指定的位置
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
（3）BOM
BOM(Browser Object Model)即浏览器对象模型使 JavaScript 有能力与浏览器“对话”。
1）在BOM中，window对象是顶层对象，其它对象均是其子对象
2) history浏览器的浏览历史
3) location对象代表当前显示的文档的地址
4) navigator对象提供有关浏览器的各种信息
5) screen对象提供显示器屏幕相关的一些信息
6) frames为window对象的数组型属性，每一个数组元素对应框架集(frameset)中的一个框架(frame)所对应的窗口
7) document对象是对DOM的引用，代表了当前浏览器窗口中的网页文档
screen对象：
| availWidth | 显示器屏幕可用宽度，除任务栏外 |
|---|---|
| availHeight | 显示器屏幕可用高度，除任务栏外 |
| Width | 实际宽 |
| Height | 实际高 |
history对象：该对象记录了浏览器的浏览历史，并提供一组方法访问曾经访问过的历史页面。
| length | 整数值，表示浏览器历史列表中的URL的个数 |
|---|---|
| back() | 返回到浏览器列表中当前页面之前的页面，与浏览器的“返回”功能相同 |
| forward() | 前进到浏览器中当前页面之后的页面，与浏览器的“前进”按钮功能相同 |
| go(1) | 访问浏览器列表中指定的页面，该方法接受一个参数。参数可正可负。 |
location对象：该对象存储了当前显示的文档的地址，包括完整的URL地址以及组成URL地址的各个部分。其中各个属性被重新赋值后，浏览器将自动刷新，载入新的URL地址。
| 属性 | 描述 |
|---|---|
| hash | 表示URL地址中的锚点部分，包括前导符“#”。可读可写 |
| host | 表示URL中的主机名和端口，即IP地址或者域名端口，可读可写 |
| hostname | 表示URL中的主机名部分。可读可写 |
| href | 表示当前页面完整的URL地址，可读可写。 |
| pathname | 表示URL中的页面路径部分，包含页面文件名称，可读可写 |
| port | 表示URL地址中的端口部分，可读可写 |
| protocol | 表示URL中的协议部分，包括尾部的“：”符号，可读可写。如http: |
| search | 表示URL中的参数部分，可读可写。如：?name=mary |
navigator对象：该对象提供有关浏览器的各种信息，所有浏览器都支持该对象
| userAgent | 返回由客户机发送服务器的 user-agent 头部的值。 |
|---|---|
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值。 |
（4）DOM
DOM(文档对象模型)是一个使程序和脚本能够动态地访问和更新文档的内容、结构以及样式，并独立于平台和语言的接口。
1）DOM基本操作
获取HTML元素：
getElementById() ： 在文档中查找指定的id节点，如果找到则返回该节点
getElementsByTagName()：返回带有指定标签名的对象的数组
getElementsByName()：返回带有指定名字（name）对象的数组
getElementsByClassName(类名)：返回带有指定类名（className）对象的数组
document.querySelector(“选择器”);//返回页面中的第一个元素
document.querySelectorAll(“选择器”);//返回页面中所有匹配的元素
值操作： 文本内容操作：
| innerHTML ： 可以操作元素对象中的 HTML 代码（带有标签的文本） | |
|---|---|
| 获取文本 | 节点对象.innerHTML |
| 设置文本 | 节点对象.innerHTML = 值 |
| innerText ： 可以操作元素对象中文本（不带标签的纯文本） | |
| 获取文本 | 节点对象.innerText |
| 设置文本 | 节点对象.innerText = 值 |
| textContent： 可以操作 文本节点或元素节点 中 的 文本 （ 推荐使用 ） | |
| 获取文本 | 节点对象.textContent |
| 设置文本 | 节点对象.textContent = 值 |
表单元素： input.value 表单元素进行值获取或设置时直接使用 .value属性即可
样式操作
1)style属性
在获取到HTML节点后，可以对节点的样式进行操作， 最常见的就是直接使用style属性。 style属性将作为HTML节点的行内样式进行使用，优先级高，使用便捷。
node.style.border=’1px solid #ff0’;
注意：在使用CSS属性时，如果名称中有 - 时，必须改写成驼峰命名法
node.style.font-size=’18px’; //错误的写法
node.style.fontSize=’18px’; //正确的写法
2)类名className
正常情况下，HTML的属性可以直接当成节点属性使用，但是 class是个例外，因为class在JS中是保留字，用于实现ES6的类，所以在使用类名时，必须改成 className来使用。
node.className=’active’;
node.className=’off’;
DOM节点操作
特殊节点:
(1)html节点
document.documentElement -> html标签
(2)body节点
document.body -> body标签
注意点：
document.documentElement.clientHeight 它拿到的是整个窗口高度
document.body.clientHeight 拿到内容的高度
Node对象的属性与方法总表
| 查询节点 | |||
|---|---|---|---|
| 方法 | getElementById(); | 返回对拥有指定 id 的第一个对象的引用。 | |
| getElementsByName() | 返回带有指定名称的对象集合。 | ||
| getElementsByTagName() | 返回带有指定标签名的对象集合。 | ||
| getElementsByClassName(); | 返回带有指定类名的对象集合 | ||
| 属性 | parentNode | 父节点 | |
| firstChild | 列表中的第一个节点 | ||
| lastChild | 列表中的最后一个节点 | ||
| childNodes | 所有子节点的列表 | ||
| previousSibling | 上一个兄弟节点 | ||
| nextSibling | 下一个兄弟节点 | ||
| 增加节点 | |||
| appendChild() | 追加节点 | ||
| insertBefore() | 插入节点 | ||
| 修改节点 | |||
| replaceChild() | 替换节点 | ||
| 删除节点 | |||
| removeChild() | 删除节点 | ||
| 创建节点 | |||
| createElement() | 创建一个元素节点 | ||
| createTextNode() | 创建一个文本节点 | ||
| setAttribute() | 给某个节点添加一个属性 | ||
| getAttribute() | 获取某个节点属性的值。 | ||
| 节点信息 | |||
| nodeName | 节点名称 | ||
| nodeValue | 节点值 | ||
| nodeType | 节点类型 |
事件
事件是用户与计算机交互的行为
(1)事件的四要素
事件源：事件发生的源头，就是事件发生的那个标签
事件类型：发生的是什么事件，比如：点击click
事件处理函数：当事件发生时，去调用的函数
事件对象：事件发生时的相关信息都保存到事件对象中
(2)注册事件
target.addEventListener(type, listener, useCapture);
target：文档节点；type：字符串，事件名称，不含“on”；listener：事件发生后触发的回调函数；useCapture：是否使用捕捉，true为捕捉，false为冒泡，一般用 false 。
(3)删除事件
target.removeEventListener(event,function);
(4)常用事件
| 鼠标事件 | ||
|---|---|---|
| click | 点击事件 | 点击鼠标左键触发 |
| dblclick | 双击事件 | 双击鼠标左键触发 |
| mouseover | 移入事件 | 鼠标指针移到一个元素上触发 |
| mouseout | 移出事件 | 鼠标指针移出一个元素上触发 |
| mousemove | 移动事件 | 鼠标在一个元素上移动持续触发 |
| mousedown | 鼠标按下 | 单击鼠标任何一个按键触发 |
| mouseup | 鼠标抬起 | 松开鼠标任何一个按键触发 |
| 键盘事件 | ||
| keydown | 键按下 | 用户按下一个键盘按键时触发 |
| keyup | 键弹起 | 用户在键盘按键被松开时触发 |
| keypress | 按键一次 | 按下且抬起一个键 |
| 表单事件 | ||
| submit | 表单提交 | |
| input | 输入事件 | HTML5新增事件，输入内容时触发 |
| blur | 元素失去焦点 | |
| focus | 元素获取焦点 | |
| change | 用户改变域的内容 | |
| 窗口事件 | ||
| load | 窗口加载 | 是网页加载完毕时发生 |
(5)事件捕获和冒泡
事件捕获：由外到内进行事件传播
事件冒泡： 由内到外进行事件传播
