DOM相关的方法概念
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM相关的方法概念相关的知识，希望对你有一定的参考价值。
DOM相关的方法概念
window对象
跳转到其他浏览器
window.open('http://www.163.com')
关闭窗口
close()
浏览器窗口的内部高宽度(兼容所有浏览器)—包含滚动条
可以获取浏览器窗口的整个宽高
console.log(innerWidth,innerHeight);//document可视化窗口
console.log(outerWidth,outerHeight);//window窗口高度
浏览器窗口相对于电脑窗口的位置
screenLeft，screenTop ，screenX ，screenY
location.href=‘’跳转页面
window.location.href ='http://www.163.com'
location对象
点击按钮，跳转页面
<body>
<button id="demo">点击跳转页面</button>
<script>
location.assign('https://www.baidu.com/')
//获取标签元素
var bn = document.getElementById('demo');
bn.onclick = function()
location.href = 'http://www.163.com'
location.assign('https://www.baidu.com/')
//注意这里的replace是没有历史记录的
location.replace('http://www.163.com')
</script>
获取当前网页的地址
<body>
<button id="demo">点击跳转页面</button>
<script>
var bn = document.getElementById('demo');
bn.onclick = function()
console.log(location.href);
</script>
</body>
//http://127.0.0.1:5500/bomtest.html
hash获取到url中#后的字符串，如果没有，则返回空字符串。
search获取到url中？后的字符串，且不获取#后之后的值如果没有，则返回空字符串。
console.log(location.search);//?a=1&b=2
console.log(location.hash);//#abc
点击按钮跳转页面的同时带上内容，并接收解析
<button id="demo_1">a</button>
<button id="demo_2">b</button>
<button id="demo_3">c</button>
<button id="demo_4">d</button>
<script>
var nbs = Array.from(document.getElementsByTagName('button'))
for(var i=0;i<nbs.length;i++)
nbs[i].onclick = fun;
function fun()
// 跳转页面附带对象内容的值
location.href = './index.html?key='+this.innerHTML;
</script>
注意：锚点链接会有一个历史记录，跳转到上（下）一次的位置。
| 方法 | 功能 |
|---|---|
| hostname | 返回 web 主机的域名手机 |
| pathname | 返回当前页面的路径和文件名 |
| port | 返回 web 主机的端口 （80 或 443） |
| protocol | 返回所使用的 web 协议（http:// 或 https://） |
screen对象
console.log(screen.availWidth);//不包含任务栏
console.log(screen.Width);//包含任务栏
获取定位：
navigator.geolocation.getCurrentPosition(function(pos)
console.log(pos);//真实定位
,function(err)
// 要么就是报错
)
history对象
有历史记录不需要重新渲染页面
SSR SEO搜索优化 Server Side Render
CSR 单页面渲染 Client Side Render
history.back();
history.forward();
history.go(0);//刷新
history.go(-1);//回退一个
history.go(1);//前进一个
var div = document.getElementById('d1')
div.onclick = fn;
function fn()
history.go(0);//刷新
添加状态
替换状态
获取状态数据
history.pushState(a:1,'a','#a')
history.replaceState(btoa:1,'a','#a')
console.log(history.state);
以上是关于DOM相关的方法概念的主要内容，如果未能解决你的问题，请参考以下文章