当前位置：网站首页>DOM相关的方法概念

DOM相关的方法概念

2022-07-24 03:36:00 【勇敢*牛牛】

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);
原网站

版权声明
本文为[勇敢*牛牛]所创，转载请带上原文链接，感谢
https://blog.csdn.net/m0_46672781/article/details/125897937

边栏推荐

猜你喜欢

随机推荐