JavaScript的BOM实例分析

这篇文章主要讲解了“JavaScript的BOM实例分析”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript的BOM实例分析”吧！

10年专注成都网站制作，成都定制网站，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于成都定制网站,高端网页制作,对成都湿喷机等多个行业，拥有丰富设计经验。

location对象

location对象提供了与当前窗口中加载的文档有关的信息，还提供了一些

导航的功能，它既是window对象的属性，也是document对象的属性。

语法：location.href

功能：返回当前加载页面的完整URL

说明：location.href与window.location.href等价

语法：location.hash

功能：返回URL中的hash(#号后跟零或多个字符),如果不包含则返回空字符串

语法：location.host

功能：返回服务器名称和端口号（如果有）

语法：locationhostname

功能：返回不带端口号的服务器名称。

语法：location.pathname

功能：返回URL中的目录和（或）文件名。

语法：location.port

功能：返回URL中指定的端口号，如果没有，返回空字符串。

语法：location.protocol

功能：返回页面使用的协议

语法：location.search

功能：返回URL的查询字符串。这个字符串以问号开头。

语法：location.replace(url)

功能：重新定向URL

说明：使用location.replace不会再历时记录中生成新纪录。

语法：location.reload()

功能：重新加载当前显示的页面。

说明：

location.reload()有肯从缓冲中加载

location.reload(true)从服务器重新加载

history对象

history对象保存了用户在浏览器中访问页面的历史记录

语法：history.back()

功能：回到历史记录的上一步

说明：相当于使用了history.go(-1)

语法：location.forward()

功能：回到历时记录的下一步

说明：相当于使用了history.go(1)

语法：history.go(-n)

功能：回到历时记录的前n步

语法：history.go(n)

功能：回到历史记录的后n步

navigator对象

useragent：用来识别浏览器名称，版本，引擎以及操作系统等信息的内容。

screen对象

语法：screen.availWidth

功能：返回可用的屏幕宽度

语法：screen.availHeight

功能：返回可用的屏幕高度

location01.html:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Document</title>

<styletype="text/css">

.box1{

height:900px;

background:#ccc;

}

.box2{

height:500px;

background-color:#333;

}

</style>

</head>

<body>

<divid="box1"></div>

<inputtype="button"id="btn"value="返回顶部">

btn.onclick=function(){

location.hash='#box1';

console.log(location.hash);

}

console.log(location.href);

console.log(location.hash);

console.log(location.host);

console.log(location.hostname);

console.log(location.pathname);

console.log(location.port);

console.log(location.protocol);

console.log(location.search);

</script>

</body>

</html>

location02.html:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<body>

<inputtype="button"value="刷新"id="btn">

/*setTimeout(function(){

//location.href="https://www.baidu.com";

//window.location="https://www.baidu.com";

location.replace("https://www.baidu.com");

},1000);*/

document.getElementById('btn').onclick=function(){

location.reload();

//location.reload(true);

}

</script>

</body>

</html>

history01.html:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<body>

<ahref="example_2.html">example_2.html</a>

<inputtype="button"value="后退"id="btn1">

<inputtype="button"value="前进"id="btn2">

varbtn1=document.getElementById('btn1');

varbtn2=document.getElementById('btn2');

btn1.onclick=function(){

//history.back();

history.go(-1);

}

btn2.onclick=function(){

history.forward()

//history.go(1);

}

</script>

</body>

</html>

navigator.html:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<body>

functiongetBrowser(){

varexplorer=navigator.userAgent.toLowerCase();

varbrowser="";

if(explorer.indexOf("msie")>-1){

browser="IE";

}elseif(explorer.indexOf("chrome")>-1){

browser='Chrome';

}else{

browser='asdf';

}

returnbrowser;

}

varmsg="您用的是"+getBrowser()+'浏览器';

console.log(msg);

</script>

</body>

</html>

screen.html:

<!DOCTYPEhtml>

<html>

<head>

<metacharset="UTF-8">

<title>Document</title>

</head>

<body>

console.log(screen.availWidth);

console.log(screen.availHeight);

console.log(window.innerWidth);

console.log(window.innerHeight);

</script>

</body>

</html>

感谢各位的阅读，以上就是“JavaScript的BOM实例分析”的内容了，经过本文的学习后，相信大家对JavaScript的BOM实例分析这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！

上一篇：ecmascript是什么

下一篇：用JavaMail写发送邮件程序碰到的问题是什么