三，History对象
保存用户上网的历史记录，可通过window.history属性访问
常用属性和方法
| 类别 | 名称 | 说明 |
| 属性 | length | 返回历史记录列表中的网址数 |
| 方法 | back() | 加载 History 对象列表中的前一个URL |
| 方法 | forward() | 加载 History 对象列表中的下一个URL |
| 方法 | go() | 加载 History 对象列表中的某个具体URL |
<body> <div> <input type="button" value="跳转窗口" onclick="gotodemo01()"> </div> </body> <script> function gotodemo01(){ window.location.href="demo01.html" } </script>
<body> <div> <input type="button" value="打开窗口" onclick="openwin()"></input> <input type="button" value="关闭窗口" onclick="closewin()"> <input type="button" value="跳转窗口" onclick="gotodemo01()"> <input type="button" value="前进" onclick="qinajin()"> </div> </body> <script> function openwin(){ window.open("https://www.baidu.com.cn","win1") } function closewin(){ window.close() } function gotodemo01(){ window.location.href="demo01.html" } function qinajin(){ window.history.forward(); } </script>
<body> passerby <div> <input type="button" value="后退" onclick="goblock()"> </div> </body> <script> function goblock(){ window.history.back(); } </script>
四，Location对象
包含有关当前URL的信息，可通过window.location属性访问
常用属性
| 名称 | 说 明 |
| host | 设置或返回主机名和当前URL的端口号 |
| hostname | 设置或返回当前URL的主机名 |
| href | 设置或返回完整的URL |
常用方法
| 名称 | 说 明 |
| reload() | 重新加载当前文档 |
| replace() | 用新的文档替换当前文档 |
五，Document对象的常用方法
Document对象代表整个HTML文档
Document对象的常用方法
| 名 称 | 说 明 | 唯一 |
| getElementById() | 返回对拥有指定id的第一个对象的引用 | 对象的id唯一 |
| getElementsByName() | 返回带有指定名称的对象的集合 | 相同name属性 |
| getElementsByTagName() | 返回带有指定标签名的对象的集合 | 相同的元素 |
| write() | 向文档写文本、HTML表达式或JavaScript代码 |
写了一个小例子：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>使用document对象操作页面</title> <style type="text/css"> body, input, div, p{ margin: 0; padding: 0; } body { font-size: 14px; font-family: "微软雅黑"; line-height: 25px; } .content { width: 600px; margin: 30px auto; } .content img { float: left; width: 180px; } .r { float: right; width: 400px; } input[name="changephone"] { width: 100px; height: 28px; line-height: 28px; text-align: center; font-size: 14px; font-family: "微软雅黑"; margin: 10px 0 10px 0; } input[name="size"] { width: 50px; text-align: center; } #replace { border: 1px solid rgb(179, 179, 179); height: 60px; } </style> </head> <body> <div class="content"> <img src="images/pro4.jpg" alt="1+8Plus" /> <div class="r"> 产品名称：<span id="phone123">1+8 Plus</span> <br> <input name="changephone" value="更换产品名称" type="button" onclick="changeName();" /><br> 规格选择： <input name="size" type="text" value="64G" /> <input name="size" type="text" value="128G" /> <input name="size" type="text" value="256G" /> <input name="size" type="text" value="512G" /><br> <input name="b2" type="button" value="input内容" onclick="all_input()" /> <input name="b3" type="button" value="所有规格" onclick="s_input()" /> <input name="b4" type="button" value="清空页面内容" onclick="clearAll()" /> <p id="replace"></p> </div> </div> <script type="text/javascript"> function changeName(){ document.getElementById("phone123").innerHTML="ABC" } function all_input(){ var inputArray = document.getElementsByTagName("input"); var inputHtml = ""; for(var i=0; i<inputArray.length; i++){ var myinput = inputArray[i]; inputHtml = inputHtml + myinput.value + ""; } document.getElementById("replace").innerHTML=inputHtml; } function s_input(){ var inputArray = document.getElementsByName("size"); var inputHtml = ""; for(var i=0; i<inputArray.length; i++){ var myinput = inputArray[i]; inputHtml = inputHtml + myinput.value + ""; } document.getElementById("replace").innerHTML=inputHtml; } function clearAll(){ document.getElementById("replace").innerHTML=""; } </script> </body> </html>
