当前位置：网站首页>DOM related method concepts

DOM related method concepts

2022-07-24 03:41:00 【Brave * Niuniu】

DOM Related method concepts

window object

Jump to another browser

window.open('http://www.163.com')

close window

 close()

The internal height and width of the browser window ( Compatible with all browsers )— Include scroll bar
You can get the full width and height of the browser window

console.log(innerWidth,innerHeight);//document Visualization window 
console.log(outerWidth,outerHeight);//window Window height

The position of the browser window relative to the computer window

screenLeft,screenTop ,screenX ,screenY

location.href=‘’ Jump to the page

window.location.href ='http://www.163.com'

location object

Click button , Jump to the page

<body>
    <button id="demo"> Click to jump to the page </button>
    <script>
location.assign('https://www.baidu.com/')
		// Get tag elements 
        var bn = document.getElementById('demo');
        bn.onclick = function(){
    
            location.href = 'http://www.163.com'
        	location.assign('https://www.baidu.com/')
        	// Notice the replace There is no historical record 
        	location.replace('http://www.163.com')
        }
	</script>

Get the address of the current web page

<body>
    <button id="demo"> Click to jump to the page </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 Get url in # String after , without , Returns an empty string .
search Get url in ？ String after , And don't get # If there is no value after , Returns an empty string .

 console.log(location.search);//?a=1&b=2
 console.log(location.hash);//#abc

Click the button to jump to the page and bring the content , And receive parsing

  <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(){
    
            //  Jump to the value of the object content attached to the page 
            location.href = './index.html?key='+this.innerHTML;
        }
   </script>

Be careful ： Anchor links will have a history , Jump to （ Next ） Once position .

Method	function
hostname	return web The domain name of the host phone
pathname	Returns the path and filename of the current page
port	return web Host port （80 or 443）
protocol	Return to used web agreement （http:// or https://）

screen object

console.log(screen.availWidth);// Does not contain taskbar 
console.log(screen.Width);// Contains the taskbar

Get positioning ：

navigator.geolocation.getCurrentPosition(function(pos){
    
                console.log(pos);// True positioning 
            },function(err){
    
                //  Or you report an error 
            })

history object

There is no need to re render the page with history
SSR SEO Search optimization Server Side Render
CSR Single page rendering Client Side Render

history.back();
history.forward();
history.go(0);// Refresh 
history.go(-1);// Back one 
history.go(1);// Forward one

var div = document.getElementById('d1')
div.onclick = fn;
function fn(){
    
    history.go(0);// Refresh 
}

Add state
Replacement status
Get status data

history.pushState({
    a:1},'a','#a')
history.replaceState({
    btoa:1},'a','#a')
console.log(history.state);

原网站

版权声明
本文为[Brave * Niuniu]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/205/202207240336351297.html

当前位置：网站首页>DOM related method concepts

DOM related method concepts