学习笔记---BOM

最新推荐文章于 2024-05-31 16:22:19 发布

sunsea_

最新推荐文章于 2024-05-31 16:22:19 发布

阅读量231

点赞数

文章标签：学习 javascript 前端

本文链接：https://blog.csdn.net/weixin_43730624/article/details/123167053

版权

1. window对象

BOM 的核心是 window 对象，表示浏览器的实例。window 对象在浏览器中有两重身份，一个是ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义全局方法。

1.1. Global作用域

因为 window 对象被复用为 ECMAScript 的 Global 对象，所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。比如：

var name = 'zhangsan';
var sayName = function(){
	console.log(this.name);
}
console.log(window.name);//zhangsan
sayName();//zhangsan
window.sayName();//zhangsan

这里，变量 name 和函数 sayName()被定义在全局作用域中，它们自动成为了 window 对象的成员。因此，变量 name 可以通过 window.name 来访问，而函数 sayName()也可以通过 window.sayName()来访问。因为 sayName()存在于全局作用域，this.name 映射到 window.name，所以就可以显示正确的结果。

1.2. Window窗口

1.2.1. 窗口位置

screenLeft和screenTop
属性返回窗口相对于屏幕的X和Y坐标。(火狐浏览器不支持)
screenX和screenY
属性返回窗口相对于屏幕的X和Y坐标。(ie浏览器不支持，火狐可以使用此属性)
pageXOffset
设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset
设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

注意： IE8及更早IE版本不支持该属性,但可以使用 “document.body.scrollLeft” 和 “document.body.scrollTop” 属性。

1.2.2. 窗口大小

innerWidth
页面视图区的宽度
innerHeight
页面视图区的高度
outerWidth
浏览器窗口的宽度
outerHeight
浏览器窗口的高度

注意： 所有主流浏览器都支持innerWidth,innerHeight,outerWidth,outerHeight 属性。注意：IE8及更早IE版本不支持这些属性。

1.2.3. screen对象

屏幕总宽度/高度(像素单位):
- screen.width
- screen.height
可用宽度/高度(像素单位): 总高度-浏览器选项卡高度
- screen.availWidth
- screen.availHeight
颜色深度:
screen.colorDepth
颜色分辨率:
screen.pixelDepth

1.3. Window open()

window.open()方法可以用于导航到指定 URL，也可以用于打开新浏览器窗口。这个方法接收 4个参数：要加载的 URL、目标窗口、特性字符串和表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。通常，调用这个方法时只传前 3 个参数，最后一个参数只有在不打开新窗口时才会使用。

1.3.1. 语法

window.open(URL,name,specs,replace)

1.3.2. 参数

1.3.2.1. URL

可选。打开指定的页面的URL。如果没有指定URL，打开一个新的空白窗口。

1.3.2.2. name

可选。指定target属性或窗口的名称。支持以下值：

_blank：URL加载到一个新的窗口。这是默认
_parent：URL加载到父框架
_self：URL替换当前页面
_top：URL替换任何可加载的框架集
name：窗口名称

1.3.2.3. specs

可选。一个逗号分隔的项目列表。支持以下值：

hannelmode=yes\|no\|1\|0	是否要在影院模式显示 window。默认是没有的。仅限IE浏览器
directories=yes\|no\|1\|0	是否添加目录按钮。默认是肯定的。仅限IE浏览器
fullscreen=yes\|no\|1\|0	浏览器是否显示全屏模式。默认是没有的。在全屏模式下的 window，还必须在影院模式。仅限IE浏览器
height=pixels	窗口的高度。最小.值为100
left=pixels	该窗口的左侧位置
location=yes\|no\|1\|0	是否显示地址字段.默认值是yes
menubar=yes\|no\|1\|0	是否显示菜单栏.默认值是yes
resizable=yes\|no\|1\|0	是否可调整窗口大小.默认值是yes
scrollbars=yes\|no\|1\|0	是否显示滚动条.默认值是yes
status=yes\|no\|1\|0	是否要添加一个状态栏.默认值是yes
titlebar=yes\|no\|1\|0	是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes\|no\|1\|0	是否显示浏览器工具栏.默认值是yes
top=pixels	窗口顶部的位置.仅限IE浏览器
width=pixels	窗口的宽度.最小.值为100

1.3.2.4. replace

Optional.Specifies规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目，还是替换浏览历史中的当前条目。支持下面的值：

true：URL 替换浏览历史中的当前条目。
false：URL 在浏览历史中创建新的条目。

1.4. 系统对话框

使用 alert()、confirm()和 prompt()方法，可以让浏览器调用系统对话框向用户显示消息。这些对话框与浏览器中显示的网页无关，而且也不包含 HTML。它们的外观由操作系统或者浏览器决定，无法使用 CSS 设置。此外，这些对话框都是同步的模态对话框，即在它们显示的时候，代码会停止执行，在它们消失以后，代码才会恢复执行。

1.4.1. alert()

alert()接收一个要显示给用户的字符串（不是字符串会调用toString()方法转换成字符串）。
alert()只接收一个参数，对话框只有确认按钮。

一般会用于在项目中前后台传参时，判断是否进入某一步，有没有拿到数据。

1.4.2. confirm()

确认框通过调用 confirm()来显示。确认框跟警告框类似，都会向用户显示消息。但不同之处在于，确认框存在确认和取消按钮。点击确认返回值为true，点击取消或关闭对话框返回值为false。

1.4.3. prompt()

提示框，通过调用 prompt()方法来显示。提示框的用途是提示用户输入消息。点击确认按钮返回文本框的值，点击取消或关闭对话框返回null。
prompt()方法接收两个参数：要显示给用户的文本，以及文本框的默认值（可以是空字符串）。

1.5. location

location对象是提供了与当前窗口中加载的文档有关的信息，还提供一些导航功能。
location既是window的对象也是document的对象，而document是window对象的属性。直接使用location对象也可以。

console.log(window.location === document.location); //true
console.log(location === document.location);	//true
console.log(location === window.location);	//true

1.5.1. 属性

host：返回服务器名称和端口号
hostname：返回不带端口号的服务器名称
href：返回当前加载页面的完整URL
pathname：返回URL的目录和文件名
port：返回URL中指定的端口号
protocol：返回页面使用的协议
search：返回URL的查询字符串。这个字符串以问号开头

1.5.2. 方法

assign()
传递一个url参数，打开新url，并在浏览记录中生成一条记录。
replace()
参数为一个url，结果会导致浏览器位置改变，但不会在历史记录中生成新记录。
reload()
重新加载当前显示的页面，参数可以为boolean类型，默认为false，表示以最有效方式重新加载，可能从缓存中直接加载。如果参数为true，强制从服务器中重新加载。

1.6. history对象

该对象保存着用户上网的历史记录。出于安全方面的考虑，开发人员无法得知用户浏览过的URL，不过借由用户访问过的页面列表，同样可以在不知道实际URL的情况下实现后退前进。

length
返回历史列表中的网址数
注意： Internet Explorer和Opera从0开始，而Firefox、Chrome和Safari从1开始。
back()
加载 history 列表中的前一个 URL
forward()
加载 history 列表中的下一个 URL
go()
加载 history 列表中的某个具体页面，负数表示向后跳转，正数表示向前跳转。

1.7. 超时调用和间歇调用

javascript是单线程语言，但是可以通过超时值和间歇时间来调度代码在特定时刻执行。

1.7.1. setTimeout(执行代码，时间(ms))

该方法返回一个数值ID，表示超时调用，这个超时调用ID是计划执行代码的唯一标识符通过它来取消超时调用。可以通过clearTimeout(ID);

<body>
    <script>
        var id = setTimeout(()=>{
            console.log('hello world');//立即执行函数ES6
        }, 1000);
        console.log(id);
        //取消超时调用
        clearTimeout(id);
    </script>
</body>

1.7.2. setInterval(执行代码，时间(ms))

按照指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。调用该方法也会返回一个间歇调用ID，该ID可以用户在将来某个时刻取消间歇调用。

<body>
    <script>
        var div = document.createElement('div')
        var id = setInterval(()=>{
            div.innerHTML = new Date().toLocaleString();//立即执行函数ES6
        }, 1000);
        document.body.appendChild(div);
		//取消间歇调用
        clearInterval(id);
	</script>
</body>