Day11_BOM&DOM课堂笔记

Day11 BOM&DOM 笔记

1 回顾

1. 内置构造函数 Boolean
2. 内置构造函数 Number
   toFixed()、toString()
   Number.MAX_VALUE、Number.MIN_VALUE
3. 内置构造函数 String
   charAt()、indexOf()、lastIndexOf()、slice()、substring()、substr()、split()、toUpperCase()、toLowerCase()、charCodeAt()
   String.fromCharCode()
4. 内置内对 Math
   Math.PI、Math.abs()、Math.sqrt()、Math.pow()、Math.floor()、Math.ceil()、Math.round()、Math.max()、Math.min()、Math.random()
5. 内置构造函数 Date
   getFullYear()、getMonth()、getDate()、getDay()、getHours()、getSeconds()、getMiniutes()、getMilliseconds()、getUTC...、set、setUTC... getTime()、setTime()
   Date.now()、Date.UTC()
6. 内置构造Array
   访问器方法：join()、concat()、slice()
   修改器方法：push()、pop()、unshift()、shift()、splice()、sort()、reverse
   ES5增加的访问器方式：forEach（）、filter()、map()、every()、some()、reduce()、reduceRight()、indexOf()、lastIndexOf()
7. 内置构造函数 Function
   call()、apply()、bind()

2 BOM

BOM 全称 Browser Object Model，译为浏览器对象模型。

BOM 是浏览器为 JavaScript 提供的能够对浏览器进行相关操作的 API。

2.1 window

window 页面打开的那一刻就自动创建了。

运行在浏览器上的 js，window 是全局对象，所有的全局变量都是 window 的属性。使用 window 属性可以省略 window.

① 弹框

// 警告框
alert('警告！');
window.alert('警告！');

// 确认框 该方法返回布尔值
confirm('你确定吗？');
window.confirm('你确定吗？');

// 输入框 该方法返回用户输入的内容，string 类型的数据
prompt('请输入内容');
window.prompt('请输入内容');

② 打开新窗口

// 打开新的空白窗口
window.open();

// 打开新窗口并设置地址
window.open('url');

// 在旧窗口打开页面
window.open('url', '窗口名字');

// 设置新窗口的大小
window.open('url', '', 'width=400,height=300');

// 关闭本窗口，不可以省略window. 前提：只有被open打开页面才能调用close()自我关闭
window.close()

// 调用打印接口
window.print();

③ 页面滚动

// 设置目标坐标  滚动到指定位置
window.scrollTo(x, y);

// 设置对象作为参数，设置效果  // 滚动到指定位置
window.scrollTo({
    left: 水平坐标,
    top: 垂直坐标，
    behavior: 'smooth'
});

// 设置滚动多少距离
window.scrollBy(水平距离, 垂直距离);

// 设置滚动多少距离 带效果
window.scrollBy({
  	left: 水平距离,
    top: 垂直距离，
    behavior: 'smooth'
});

④ 定时器

多次定时：

// 创建定时，第一个参数是回调函数； 第二个参数是事件间隔，单位是毫秒
setInterval(function() {
    
}, 2000);

// 有名字的函数作为定时器的回调函数
setInterval(run, 2000);
function fun() {}

// setInterval() 第三个以后的参数用于给回调函数传参
// 100 和 200 会分别传递给 num1 和 num2
setInterval(function(num1, num2) {
    
}, 2000, 100, 200);

// 如果停止多次定时
// setInterval() 的返回值是该定时器的唯一标识，要清除该定时器必须使用唯一标识
clearInterval(定时器唯一标识);

单次定时器：

// 创建一个单次定时器，方法返回定时器唯一标识
// setTimeout() 的参数与 setInterval 完全一致
setTimeout(function() {
    
}, 2000);

// 清除单次定时
clearTimeout(单次定时器的唯一标识)

⑤ window 对象属性和方法总结

window.name			窗口的名字，可读可写
window.length		子窗口的数量，只读
window.innerWidth	视口宽度，只读
window.innerHeight	视口高度，只读
window.location		获取location对象
window.history		获取history对象
window.navigator	获取navigator对象
window.screen		获取screen对象
window.document		获取document对象

window.open()		打开新窗口
window.close()		关闭本窗口
window.print()		调用打印机
window.alert()		警告框
window.comfirm()	确认框
window.prompt()		输入框
window.scrollTo()	滚动到目标位置
window.scrollBy()	滚动多少距离
window.setInterval()	创建一个多次定时器
window.clearInterval()	清除一个多次定时器
window.setTimeout()		创建一个单次定时器
window.clearTimeout()	清除一个单次定时器

2.2 history

该对象描述的是所在窗口的历史记录信息，属性方法如下：

history.length		可以获取本窗口中历史记录的个数
history.back()		后退一步（上一个历史记录）
history.forward()	前进一步（下一个历史记录）
history.go(n)		前进n步或后退n步，整数就是前进，负数就是后退

2.3 location

该对象描述当前页面的URL地址信息，输入方法如下：

location.href		完整的URL。可读可写。
location.protocol	URL中的协议部分。可读可写。
location.hostname	URL中的主机名部分。可读可写。
location.port		URL中的端口号部分。可读可写。
location.host		URL中的主机名+端口号部分。可读可写。
location.pathname	URL中的路径部分。可读可写。
location.hash		URL中的锚点部分。可读可写。
location.search		URL中搜索字符串部分。可读可写。

location.reload()	刷新当前页面。
location.assign()	跳转到指定页面，保留历史记录。
location.replace()	跳转到指定页面，原页面在历史记录中抹去。

2.4 navigator

该对象用于描述浏览器的版本信息以及所在操作系统的信息。

navigator.userAgent;

2.5 screen

该对象描述屏幕信息，属性如下：

screen.width		屏幕的宽
scrree.height		屏幕的高

3 DOM 介绍

**MDN 文档对象模型手册：**https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model

1）DOM 英文全称“Document Object Model”，译为“文档对象模型”。

2）DOM 是一个与平台和编程语言无关的接口，通过这个接口程序和脚本可以动态的访问和修改文档的内容、结构和样式。

3.1 五大节点类型

1. 元素节点 element
2. 属性节点 attribute
3. 文本节点 text
4. 注释节点 comment
5. 文档节点	document

5.2 节点的属性

nodeName	节点名称，元素节点通过nodeName获取标签名
nodeValue	节点值。
nodeType    节点类型。 元素:1; 属性节点:2; 文本节点:3； 注释节点:8; 文档节点:9