第二章 JavaScript操作BOM

history对象与location对象的作用是什么？

# history对象

在JavaScript中，window对象通过histor对象提供对浏览器的会话历史记录的访问

并且从HTML5开始，提供了对history栈中内容的操作

# history对象的方法和属性

跳转页面：

history.back():后退

history.forward():前进

history.go(num):前进或者后退基于本页面的第num个页面，前后由正负决定

状态属性：

history.state:当前历史记录状态对象，可以通过pushState存储或者replaceState修改

history.length:返回历史堆栈中页面个数

添加/修改状态方法：

history.pushState(stateObj,title,url);

stateObj:存在于当前历史记录的状态对象，是一个js对象，可以用来存储数据,通过history.state获取

title:标题，可写可忽略

URL:该参数定义了新的历史url记录，并且会显示在浏览器url上。然而要注意的是，浏览器并不会立即执行这个url

新的url可以是绝对路径，也可以是相对路径，但是新的url必须域当前url同源，否则会抛出异常。

示例：history.pushState({ a: n }, "shop", "?data=" + n);

pushState的优点在于：

以对象的形式在当前历史记录存储数据，可以存储的数据非常灵活

基于哈希的方式，要把所有相关的数据编码为短字符串。localStorage就只能存字符串

history.replaceState(stateObj,title,url):替换当前历史记录状态

事件:

popstate:每当活动的历史记录项发生改变时触发。注意push和replace不会触发，只有前进或者后退等使历史记录改变时才会触发。

hashchange:pushState绝对不会触发事件，即使新的url与旧的url仅哈希不同也是如此

# location对象

window.location:只读属性其中包含有关文档的当前位置的信息

虽然window.location一个只读location对象，但是设置一个DOMString.

因此，window.location ="url"与location.href="url"同义

location对象属性与方法：

.href="url":加载url

.replace("url"):效果与href相同。重新加载页面并将window.location.pathname插入到hash

.assign("url"):加新新的文档。效果与href相同

区别：

　　　　replace不产生新的浏览历史记录，href和assign会产生

因此，现在replace时候，浏览历史记录将不能后退

document对象的常用属性与方法有哪些？

对象属性

document.title 　　　　　　 //设置文档标题等价于HTML的title标签

document.bgColor 　　　　 //设置页面背景色

document.fgColor 　　　　 //设置前景色(文本颜色)

document.linkColor 　　　 //未点击过的链接颜色

document.alinkColor 　　 //激活链接(焦点在此链接上)的颜色

document.vlinkColor 　　 //已点击过的链接颜色

document.URL 　　　　　 //设置URL属性从而在同一窗口打开另一网页

document.fileCreatedDate //文件建立日期，只读属性

document.fileModifiedDate //文件修改日期，只读属性

document.fileSize 　　　　 //文件大小，只读属性

document.cookie　　　　 //设置和读出cookie

document.charset 　　　　 //设置字符集简体中文:gb2312

———————————————————————

常用对象方法

document.write() 　　　　　　　　　　　　 //动态向页面写入内容

document.createElement(Tag)　　　　　 //创建一个html标签对象

document.getElementById(ID) 　　　　　 //获得指定ID值的对象

document.getElementsByName(Name) //获得指定Name值的对象

document.getElementsByClassName(“className”) //获得指定class值的对象(数组)

document.getElementsByTagName(“TagName”) //获得指定Tag对象

document.body.appendChild(oTag)

JavaScript内置对象有哪些？

1.Array数组对象
unshift( ) 数组开头增加
功能：给数组开头增加一个或多个

参数：一个或多个

返回值：数组的长度

原数组发生改变

shift( ) 数组开头删除一项
功能：给数组开头删除一个

参数：无

返回值：被删除的内容

原数组发生改变

push( ) 数组末尾增加
功能：给数组末尾增加一项或多项

参数：一个或多个

返回值：数组的长度

原数组发生改变

pop( ) 数组末尾删除一项
功能：给数组末未删除一项

参数：无

返回值：被删除的内容

原数组发生改变

concat( ) 数组的拼接
ary1.concat( ary2,ary3....)

使用concat可以实现数组的克隆，concat（）中不传参数

splice（index, howmany, item1, ...itemx）
splice 可以根据参数实现数组的删除，增加，替换

前两个参数 index 和 howmany 是必需的参数，后面的参数可选参数

splice（index, 0 ，item1， item2...) 增加
从索引 index 开始增加，增加的内容插入到索引 index 前面

splice(index, n) 删除
从索引 index 开始删除n个，如果只有一个参数splice（index），就是从索引 index 开始后面的内容全部删除

splice（index， n，item1，item2...）替换
从索引 index开始替换 n 个，替换的内容为item1, item2....

slice（n，m）截取
从索引 n 截取到索引 m 但不包括 m ，原数组不发生改变

slice（0）或splice（）可以实现数组的克隆

reverse（）数组翻转

返回值是翻转后的新数组，原数组发生改变

sort（）数组排序
使用方法：sort（function （a，b）{return a-b}）从小到大排

sort（function （a，b）{return b-a}）从大到小排

toString( ) 数组转字符串
把数组转成以逗号分隔的字符串

join（拼接形式）拼接
把数组拼接成以其他形式分割的字符串，配合eval（）可以实现数学运算 eval（join（‘+’））

数组常用但不兼容的方法：
indexOf（查找内容）查找
ary.indexOf（查找内容）查找数组中是否有某项，有的话返回该项的所引，没有话返回-1；

forEach（）遍历
forEach接收两个参数，一个callback，thisArg
callback接收三个参数：1）item 2）index 3）input
thisArg用来改变callback中的this指向；
forEach 没有返回值，但是map有返回值

map（）遍历

2.string字符串
charAT（index）通过索引找字符

charCodeAt（index）通过索引找到字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似，只不过前者返回的是位于指定位置的字符的编码，而后者返回的是字符子串。

indexOf（）从前往后找，找到返回内容的索引，找不到返回-1；

lastIndexOf（）从后往前找，找到返回内容的索引，找不到返回-1；

slice（n，m）从索引n 查找到索引m 但不包括m，slice可以取负值

substring（n，m）从索引n 查找到索引m ，但不包括m，不可以取负值

substr（n，m）从索引n开始截取m 个

split（切割形式）把一个字符串分割成字符串数组。

toUpperCase（）转大写字母

toLowerCase（）转小写字母

3.Math对象
Math.floor（）向下取整

Math.ceil（）向上取整

Math.random（）取0-1之间的随机小数

Math.round（）四舍五入

Math.abs（）取绝对值

Math.pow（x，y） x的y次幂

Math.sqrt（）开平方

Math.max（）取最大值

Math.min（）取最小值

4.Date日期对象
new Date（）创建一个日期对象

getFullYear（）返回年份

getMonth（）返回月份数（0-11），想要得到几月，需要加一

getDay（）返回一周的第几天（0-6），想要得到星期几，需要加一

getDate（）返回日

getHours（）返回时

getMinutes（）返回分

getSeconds（）返回秒

getTime（）返回从1970年1月1日00：00到现在的毫秒数（格林尼治时间），也就是时间戳

setYear(yearInt) 设置年份.2位数或4位数

setFullYear(yearInt) 设置年份.4位数

setMonth(monthInt) 设置月份(0-11)

setDate(dateInt) 设置日(1-31)

setHours(hourInt) 设置小时数(0-23)

setMinutes(minInt) 设置分钟数(0-59)

setSeconds(secInt) 设置秒数(0-59)

setMilliseconds(milliInt) 设置毫秒(0-999)

confirm()方法 confirm("对话框中显示的纯文本")

confirm()与alert ()、 prompt()区别

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变 prompt( )：两个参数，输入对话框，用来提示用户输入信息，常用于收集用户关于特定问题而反馈的信息 confirm( )：一个参数，确认对话框，显示提示对话框的消息

open()方法 window.open("弹出窗口的url","窗口名称","窗口特征”)

location和history对象的应用

<a href="javascript:location.href='news.html'">查看新闻中心</a>

<a href="javascript:history.back()">返回主页面</a>

定时函数

setTimeout() setTimeout("调用的函数",等待的毫秒数)

setInterval() setInterval("调用的函数",间隔的毫秒数)

setTimeout()在等待指定时间后执行函数，且只执行一次

setInterval()是每隔固定时间后执行一次函数，循环执行

清除函数

clearTimeout() clearTimeout(setTimeOut()返回的ID值)

clearInterval () clearInterval(setInterval()返回的ID值)