不论是使用location跳转新的网址，还是使用history跳转，都会导致浏览器刷新网页，重新请求大部分重复的CSS、JS等文件。使用location.hash修改网址的hash部分，不会导致网页刷新，但网址并不美观，而且会影响SEO，让搜索引擎误判两个不同hash的网页为同一个网页。
history提供了pushState()函数。通过pushState()修改网址时，浏览器不会刷新网页，所有CSS、JS以及图片资源都还存在，此时使用JavaScript控制页面切换，可以实现无感知刷新网页。该函数接收三个参数，语法如下：
参数说明：
◇ history：表示历史对象。
◇ data：表示该状态对应的数据对象；state的含义是状态，pushState就像数组一样将这个state放到数组列表中，当触发popstate事件时，浏览器将这个data对象从数组中取出，传递给popstate事件。
◇ title：表示网页标题，但是目前所有浏览器都会忽略该参数，不论设置什么值都没有效果，因此在使用history.pushState()函数时要配合修改document.title属性才能修改网页标题，也可以通过修改<title>标签来修改网页标题。
◇ newUrl：表示调用history.pushState()之后网址栏显示的新网址。
在执行过history.pushState()函数的页面，当用户点击后退或前进时，会触发window对象的onpopstate事件。在网页中监听onpopstate事件，接收state变化通知，从而进行网址切换。这种切换不会导致网页刷新，对用户更友好。
13.4.2.html使用pushState()方法修改网址，如下所示。
动手写13.4.2(www.chuimin.cn)
执行13.4.2.html，注意网址变化时网页不会刷新，如下图所示。
图13.4.2 使用history.pushState()刷新网页
history.pushState()需要配合window.onpopstate()事件一起使用，才能完全实现浏览器网页的前进、后退、刷新和跳转。
点击浏览器后退按钮，第一次触发popstate事件，因为之前没有对该网址设置stateData，所以此时event.state为null；接下来点击浏览器前进按钮，第二次触发popstate事件，此时event.state即为调用函数history.pushState()设置的stateData。
history.replaceState()与location.replace()类似，直接替换当前访问state，不会增加新的历史记录。
使用history.pushState()可以实现与location.assign()一样的效果，且完全不需要二次加载整个网页。
有关零基础JavaScript从入门到精通的文章
DOM文档树形结构由不同节点组成，图14.1.1文档对象模型展示的都是节点，各个节点具有特定的分类：◇ 根节点，最顶层的标签称为根节点，是HTML文档的最顶层标签。表14.2.1节点类型列表提示文档全部由节点组成，标签是节点的一种类型，通常情况下，也使用元素表示标签。图14.2.2节点类型所有节点都具有nodeName属性，用来表示节点名称，比如comment.nodeName是“#comment”，document.nodeName是“#document”，text.nodeName是“#text”。......
2023-11-08
图15.4.8网页卸载事件发生unload事件时，网页的所有资源会立刻释放，向服务器发送请求几乎都会失败，此时只能完成一些可以立刻完成的操作，比如缓存资源、清理Cookie等。图15.4.9beforeunload事件设置了beforeunload事件的页面，浏览器会提醒数据可能不会被缓存。图15.4.10beforeunload事件为了避免网站显示迷惑性的文字，吓唬用户，部分浏览器全部使用统一的文字描述，比如图15.4.9提示“系统可能不会保存您所做的更改”。......
2023-11-08
图10.4.9字符串拼接2.split()方法与拼接相反的是拆分，split()函数将字符串拆分成字符串数组，语法如下：参数说明：◇ str：表示字符串、字符串变量或字符串对象。◇ limit：可选参数，表示最多拆分成多少个子字符串；如果拆分后数组的长度大于limit，则下标大于limit的元素全部丢弃，不返回剩余的字符串；如果缺少该参数，则按照分隔符全部拆分。图10.4.10字符串拆分......
2023-11-08
图15.4.5网页滑动事件滑动一次鼠标会多次触发window的scroll事件。鼠标的滑动事件mousewheel除了用于网页滑动，也可以用于控制日期选择器、Slider幻灯片滑动。mousewheel并不属于标准事件，常见浏览器仅有Chrome、Edge、IE支持，在Firefox下需要使用DOMMouseScroll代替。动手写15.4.6执行15.4.6.html，输出结果到网页，如下两图所示。图15.4.6鼠标滑动事件图15.4.7鼠标滑动事件目前浏览器没有统一鼠标滑动事件，需要对两个事件兼容时，一般直接添加两个事件。......
2023-11-08
continue语句用于终止本次循环，继续执行下一次循环，语法格式如下：语法格式说明：◇ continue有两种使用形式，默认不加标签名，结束紧邻的循环语句。◇ continue跟随标签名，表示终止本次循环之后跳转的位置。图6.4.3continue语句终止本次循环上例使用continue语句跳过奇数。提示continue跳出外层循环会使代码的可读性变得很差，一般情况下不建议使用。......
2023-11-08
表13.2.3document对象方法◇ document.getElementById，即使存在多个相同id，也返回第一个节点，从语义上不应该存在多个相同id。动手写13.2.3执行13.2.3.html，输出结果到网页，如下图所示。图13.2.3document对象方法HTMLCollection和NodeList并不是数组，只是和数组的数据结构类似，不具有数组相关方法，俗称伪数组。函数内部的arguments对象也属于伪数组。提示HTMLCollection使用时一般将其实例转换为数组，比如使用boldCollection=[].slice.call，转换成数组后，节点变化不再影响数组长度。......
2023-11-08
