前端知识点总结

一.实用的BOM对象属性方法

BOM（Browser Object Model）是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象提供了独立于内容的、可与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的window对象是BOM的顶层对象，其它对象都是该对象的子对象。

BOM主要包括以下几个：

项目	作用位置
window	浏览器窗口
location	地址栏
history	浏览历史
screen	显示器屏幕
navigator	浏览器软件
document	网页

1-1.window对象主要的属性

（1）name:指定浏览器窗口的名字。
（2）frames[]:返回窗口中所有命名的框架。
（3）pageXOffset：表示文档向右滚动的像素数。IE不支持，使用scrollLeft代替。
（4）pageYOffset：表示文档向下滚过的像素数。IE不支持，使用scrollTop代替。
（5）parent返回父窗口。
（6）top返回最顶层的先辈窗口。
（7）self返回当前窗口的引用，等价于window的属性。
（8）screenLeft/screenTop/screenX/screenY:浏览器中文档窗口的左上角在屏幕上的x和y坐标，只读属性。IE，Safari，Opera支持screenLeft和screenTop，而Firefox和safari支持ScreenX和ScreenY。
（9）innerHeight：窗口中文档区域显示的高度，不含菜单栏工具栏等部分。IE不支持使用html的clientHeight代替（innerWidth同）。
（10）outHeight：表示浏览器的高度，包含工具和菜单栏等。IE不支持此属性且没有提供可代替的属性。（outWidth同）。
document.documentElement 就是html标记对象
document.body 就是标记对

1-2.window对象的主要方法

（1）alert：弹出对话框。
（2）prompt（[text],[defaulttext]）:弹出一个输入对话框。
（3）confirm（text）弹出一个确认对话框，
（4）close（）关闭窗口
（5）open（[url],[name],[option]）打开一个新窗口。
（6）延时器setTimeout（）可以实现js的异步执行。
（7）定时器setInertval（）。

---

2-1.Location对象的主要属性

• window.location.host (返回主机名或当前url端口号)
• window.location.hostname(返回当前域名)
• window.location.pathname(返回当前页面的路径和文件名)
• window.location.hash(返回当前锚点部分hash值)
• window.location.href整个url字符串(在浏览器中就是完整的地址栏，不能打开新的页面，只能在当前页面跳转)
• window.location.search(返回查询参数部分)

2-2.Location对象的主要方法

• location.reload() 重新加载当前页面，默认不传参如果存在缓存会从浏览器缓存中加载。如果传入boolean类型的true，则会强制从服务器加载。

location.reload() // 可能从浏览器缓存加载
location.reload(true) // 强制从服务器端加载

• location.assign() 在浏览器的历史记录中增加一条新记录
• location.replace() 使用新url覆盖浏览器的当前历史记录
  每次修改location的属性（除hash外），页面都会以新URL重新加载；
  虽然修改location.hash页面不会重新加载，但是会在浏览器中生成一条新的历史记录

3.History对象

History对象包含用户在（浏览器窗口）访问过的url。
History对象是window对象的一部分，可通过window.history属性对其进行访问。

3-1.History对象的属性

length：返回浏览器历史列表中URL的数量

3-2.History对象方法

• back() 加载history列表中的前一个url

back() 方法可加载历史列表中的前一个 URL（如果存在）。

调用该方法的效果等价于点击后退按钮或调用 history.go(-1)。

• forward() 加载history列表中的下一个url

forward() 方法可加载历史列表中的下一个 URL。

调用该方法的效果等价于点击前进按钮或调用 history.go(1)。

• go() 加载history列表中的某个具体页面(history.go(number|URL))

URL 参数使用的是要访问的 URL，或 URL 的子串。而 number 参数使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。

4.Screen

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

4-1.Screen对象的属性

• availHeight 属性

availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

• availWidth 属性

availWidth 属性声明了显示浏览器的屏幕的可用宽度，以像素计。在 Windows 这样的操作系统中，这个可用高度不包括分配给半永久特性（如屏幕底部的任务栏）的垂直空间。

• bufferDepth属性设置或返回调色板的比特深度
• colorDepth 返回目标设备或缓冲器上的调色板比特深度
• deviceXDPI 返回显示屏幕每英寸水平点数
• deviceYDPI 返回显示屏幕每英寸垂直点数
• fontSmoothingEnabled 返回用户是否在显示器控制面板中启用了字体平滑
• height 返回显示器屏幕的高度
• logicalXDPI 返回显示屏幕每英寸的水平方向的常规点数
• logicalYDPI 返回显示屏幕每英寸的垂直方向的常规点数
• pixelDepth 返回显示屏幕的颜色分辨率(比特每像素)
• updateInterval 设置或返回屏幕的刷新率
• width 返回显示屏幕的宽度

每个window对象的screen属性引用一个screen对象。screen对象中存放着显示着浏览器屏幕的信息。javascript程序将利用这些信息来优化他们的输出，以达到用户的显示要求。例如，一个程序可以根据显示器的尺寸选择使用大图像还是使用小图像，它还可以根据显示器的颜色深度选择使用 16 位色还是使用 8 位色的图形。另外，JavaScript 程序还能根据有关屏幕尺寸的信息将新的浏览器窗口定位在屏幕中间。

5.navigator

navigator 包含有关浏览器的信息。
navigator 对象集合
plugins[] 返回对文档中所有嵌入式页面的引用(该集合是一个plugin对象的数组，其中的元素代表浏览器已经安装的插件)，plugin-in对象提供的是有关插件的信息，其中包括它所支持的MIME类型的列表。

5-1.navigator对象的属性

• appCodeName返回浏览器的代码名
• appMinorVersion 返回浏览器的次级版本
• appName 返回浏览器的名称
• appVersion 返回浏览器的平台和版本信息
• browserLanguage 返回当前浏览器的语言
• cookieEnabled 返回浏览器中是否启用cookie的布尔值
• cpuClass 返回当前浏览器的cpu等级
• onLine 返回指明系统是否处于脱机模式的布尔值
• platform 返回运行浏览器的操作系统平台
• systemLanguage 返回OS使用的默认语言
• userAgent 返回客户机发送服务器的user-agent头部的值
• userLanguage 返回OS的自然语言设置

5-2.navigator对象的方法

• javaEnabled 规定浏览器是否启用java。
• taintEnabled 规定浏览器是否启用数据污点（data tainting）

navigator 对象包含的属性包含了正在使用的浏览器，可以使用这些属性进行平台专用的配置。虽然这个对象的名称显而易见的是Netscape的Navigator浏览器，但其他实现了javascript的浏览器也支持这个对象。navigator对象的实例是唯一的，可以用 Window 对象的 navigator 属性来引用它。

6.HTML DOM Document对象

Document 对象
每个载入浏览器的HTML文档都会成为Document对象。
Document对象使我们可以从脚本中对html页面的所有元素进行访问。

document 对象是window对象的一部分，可通过window.document对其进行访问

6-1.document对象集合

• all[]提供对文档中所有html元素的访问
  all集合返回对文档中所有html元素的引用
  document.all[i]
  document.all[name]
  document.all.tags[tagname]
• anchors返回对文档中所有Anchor瞄点对象的引用
• applets 返回对文档中所有applets对象的引用
• forms 返回对文档中所有Form对象的引用
• images[] 返回对文档中所有image[]对象的引用
• links[] 返回对文档中所有area和link对象的引用

6-2.Document对象属性

提供对body对象的直接访问。对于定义了框架集的文档，该属性引用最外层的

• coolie 设置或返回与当前文档所有有关的cookie
• domain 返回当前文档的域名
• lastModified 返回文档被最后修改的日期和时间
• referrer 返回载入当前文档的文档的url
  如果当前文档不是通过超级链接访问的，则为 null。这个属性允许客户端 JavaScript 访问 HTTP 引用头部。
• title 返回当前文档的标题
• URL 返回当前文档的url

6-3.Document对象的方法

• close() 关闭用document.open()方法打开的输出流，并显示选定的数据
• getElementById() 返回对拥有指定id的第一个对象的引用
• getElementsByName() 返回带有指定名称的对象的集合
• getElementsByTagName() 返回带有指定标签名的对象的集合
• open 打开一个流，以收集任何一个来自document.write()和document.writeln()方法的输出
• write() 向文档写html表达式或javascript代码
• writeln() 等同于write()方法，不同的是在每一个表达式后写一个换行符。

document 对象描述HTMLDocument 接口对 DOM Document 接口进行了扩展，定义 HTML 专用的属性和方法。很多属性和方法都是 HTMLCollection 对象（实际上是可以用数组或名称索引的只读数组），其中保存了对锚、表单、链接以及其他可脚本元素的引用。
这些集合属性都源自于 0 级 DOM。它们已经被 Document.getElementsByTagName() 所取代，但是仍然常常使用，因为他们很方便。write() 方法值得注意，在文档载入和解析的时候，它允许一个脚本向文档中插入动态生成的内容

二 .列举JS原生对象Array对象的实例方法和属性

Array 对象用于在单个的变量中存储多个值。
创建 Array 对象的语法：

new Array();
new Array(size);
new Array(element0, element1, …, elementn);

• 参数

参数 size 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。
参数 element …, elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

• 返回值

返回新创建并被初始化了的数组
如果调用构造函数Array（）时没有使用参数，那么返回的数组为空，length字段为0。
当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数，元素为undefined的数组。
当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。
当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

1 .Array对象的属性

属性	描述
constructor	返回对创建此对象的数组函数的引用

• 用法
  object.constructor

var test=new Array();

if (test.constructor==Array)
{
document.write("This is an Array");
}

输出：This is an Array

function employee(name,job,born)
{
this.name=name;
this.job=job;
this.born=born;
}

var bill=new employee("Bill Gates","Engineer",1985);

document.write(bill.constructor);

输出：
function employee(name, job, born)
{this.name = name; this.job = job; this.born = born;}

属性	对象
length	可设置或返回数组中元素的数目

用法
arrayObject.length
数组的length属性总是比数组中定义的最后一个元素的下标大1。对于哪些具有连续性元素，而且以0开始的常规数组而言，属性length声明了数组元素的个数
数组的length属性在用构造函数Array（）创建数组时被初始化。给数组添加新元素时，如果必要，将更新length的值
设置 length 属性可改变数组的大小。如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组将增大，新的元素被添加到数组的尾部，它们的值为 undefined。

属性	描述
prototype	属性使您有能力向对象添加属性和方法。

用法：
object.prototype.name=value

2 .Array对象的方法

• concat() 方法用于连接两个或多个数组，并返回结果
  该方法不会改变现有数组，而仅仅会返回一个被连接数组的副本
  用法：

arrayObject.concat(arrayX,arrayX,......,arrayX)

arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值：返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

• join() 把数组中所有元素放入字符串，元素通过指定的分隔符进行分隔。
  语法 arrayObject.join(separator)

参数	描述
separator	可选。指定要使用的分隔符。如何省略该参数，则使用逗号作为分隔符。

返回值
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

• pop() 删除并返回数组的最后一个元素
  语法：arrayObject.pop()
  pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

• shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
  语法：arrayObject.shift()
  返回值：数组原来第一个元素的值
  说明：
  如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。（该方法会改变原数组的长度）

• push()向数组的末尾添加一个或更多元素，并返新的长度
  语法： arrayObject.push(newelement1,newelement2,…,newelementX)

参数	描述
newelement1	必需。要添加到数组的第一个元素。
newelement2	可选。要添加到数组的第二个元素。
newelementX	可选。可添加多个元素。

返回值
把指定值添加到数组后返回的新长度
说明：push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。push() 方法和 pop() 方法使用数组提供的先进后出栈的功能。

• reverse()颠倒数组中元素的顺序
  语法：arrayObject.reverse()
  注意：该方法会改变原来数组而不会创建新数组

• slice() 方法可以从已有数组中返回选定元素。
  语法：arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
提示：您可使用负值从数组的尾部选取元素。如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

• sort() 方法
  sort方法用于对数组的元素进行排序
  语法：arrayObject.sort(sortby)

参数	描述
sortby	可选规定排序顺序。必须是函数

对数组的引用。请注意，数组在原数组上进行排序，不生成副本。
说明
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

• splice()
  从数组中添加/删除项目，然后返回被删除的项目。
  注意：该方法会改变原始数组
  用法：arrayObject.splice(index,howmany,item1,…,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX	可选。向数组添加的新项目

返回值

类型	描述
Array	包含被删除项目的新数组，如果有的话

说明：
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

• toSource() 方法表示对象的源代码
  该原始值由 Array 对象派生的所有对象继承。
  toSource() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
  语法：object.toSource()
  浏览器支持：只有 Gecko 核心的浏览器（比如 Firefox）支持该方法，也就是说 IE、Safari、Chrome、Opera 等浏览器均不支持该方法。

• toString() 把数组转为字符串，并且返回结果
  语法：arrayObject.toString()
  返回值
  arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。
  说明：当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

• toLocaleString() 方法
  定义和用法：把数组转换为本地字符串。
  语法：arrayObject.toLocaleString()
  返回值
  arrayObject 的本地字符串表示。
  说明
  首先调用每个数组元素的 toLocaleString() 方法，然后使用地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

• unshift()
  unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度
  语法：arrayObject.unshift(newelement1,newelement2,…,newelementX)

参数	描述
newelement1	必需。向数组添加的第一个元素。
newelement2	可选。向数组添加的第二个元素。
newelementX	可选。可添加若干个元素。

返回值：
arrayObject 的新长度。
说明：
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。

• valueOf（）
  valueOf() 方法返回 Array 对象的原始值。
  该原始值由 Array 对象派生的所有对象继承。
  valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。
  语法：arrayObject.valueOf()