JavaScript—内置对象

端碗吹水

发布于 2020-09-23 11:20:22

7530

发布于 2020-09-23 11:20:22

文章被收录于专栏：程序猿的大杂烩

JavaScrip—内置对象

1.Browser 对象

window 对象表示浏览器中打开的窗口

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

location 对象包含有关当前URL地址栏的信息

screen 对象包含有关客户端显示屏幕信息

history 对象包含用户在浏览器窗口中访问过的URL，也就是历史记录

navigator 对象包含有关浏览器的信息。

其中history和location对象是window 对象其中的一部分，window 是Browser 对象中的最大对象，代表整个浏览器的窗口。

window 对象的一些常见的属性、方法和事件：

属性：

closed 返回窗口是否已被关闭

innerheight 返回窗口文档显示区的高度，会随着浏览器的伸缩而改变

innerwidth 返回窗口文档显示区的宽度，会随着浏览器的伸缩而改变

opener 返回对创建此窗口的窗口的对象引用。

outerheight 返回窗口的外部高度。

outerwidth 返回窗口的外部宽度。

parent 返回父窗口

name 设置或返回窗口的名称。

方法：

close() 关闭浏览器窗口

alert() 弹出对话框

confirm() 弹出确认按钮和取消按钮的对话框

prompt() 弹出可提示用户输入的输入框

scrollBy() 按照指定的像素值来滚动内容，x表示左右，y表示上下

setTimeout() 设置在指定的毫秒数后调用函数或计算表达式。

open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

使用scrollBy和setTimeout方法，可以让滚动条自动滚动。

代码示例：

运行结果：

事件：

onresize 此事件会在窗口或框架被调整大小时发生，可以用于当用户试图调整窗口的大小时，显示一个对话框。

代码示例：

运行结果：

还可以配合innerheight 和innerwidth 属性，每一次改变窗口大小都可以记录一下当前窗口的宽、高。

代码示例：

运行结果：

思维导图：

2.HTML DOM 对象

Document HTML文档对象，每个载入浏览器的 HTML 文档都会成为 Document 对象。 Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

Element 对象表示 HTML 元素。Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点，所谓的节点就是一个个的标签元素，Document 对象可以得到Element 对象，可通过 document .Element 对其进行访问。

HTML DOM 节点

在 HTML DOM （文档对象模型）中，每个部分都是节点：

文档本身是文档节点
所有 HTML 元素是元素节点
所有 HTML 属性是属性节点
HTML 元素内的文本是文本节点
注释是注释节点

Document 对象的一些常见的属性、方法：

属性：

URL 返回当前文档的 URL。

domain 返回当前文档的域名。

title 返回当前文档的标题。

referrer 返回载入当前文档的 URL。

lastModified 返回文档当前被加载的日期和时间。

方法：

getElementById() 查找拥有指定id的元素，并返回这个元素的对象引用

getElementsByName() 返回带有指定name属性值的元素对象集合。

getElementsByTagName() 返回带有指定标签名的对象集合。

write() 向文档写 HTML 表达式或 JavaScript 代码。

writeln() 等同于 write() 方法，不同的是在每个表达式之后写一个换行符，也就是换行版的write() 方法。

关于writeln()方法，这个方法虽然说可以换行，但是它换行的方式是加一个\n并不是加一个<br>，在浏览器中只会把\n解析成空白符，空白符就会解析成空格，所以使用仅仅使用writeln()方法是没有换行效果的，只会多一个空格。不过可以配合<pre>标签实现换行效果，<pre>标签可以进行文本预处理，而\n属于文本中的换行符，所以会被正常识别。

代码示例：