js浏览器bom对象
2019-06-04 本文已影响0人
pretty_rain
1.常用的bom对象
window、location、history、navigator、document
2.window对象
万物都是window对象的一个属性和方法
/*万物都是window的一个属性*/
var dsc = "222";
console.log(window.dsc);
window.document.body;
// 任何我们定义的全局变量 函数 对象等都会成为window对象的属性
// document其实是window对象的属性
var name="属性";
var fn = function(){
document.write('方法')
}
document.write(window.name);
window.fn();
3.location对象的常用方法和属性
var arreles = window.document.querySelectorAll('botton');
arreles[0].addEventListener("click",function(){
/* window.location="test.html";*/
console.log(window.location.href);
console.log(window.location.port);
console.log(window.location.protocol);
})
arreles[1].addEventListener("click",function(){
window.location.href="3.history.html";
})
arreles[2].addEventListener("click",function(){
window.location.reload();
})
4.history的常用方法和属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<botton>后退1</botton>
<botton>前进1</botton>
<botton>后退2</botton>
<botton onclick="window.location.href='test.html'">ddd</botton>
</body>
</html>
<script>
var eles = document.querySelectorAll("botton");
eles.forEach(function(item,index){
item.addEventListener("click",function(){
if(index==0){
//后退
history.back();
}else if(index==1){
//前进
history.forward();
}else{
//后退
history.go(-1);
}
})
})
</script>
5.navigator的常用属性
// 利用userAgent属性判断是哪个浏览器
function CheckBrowser(){
var u_agent = navigator.userAgent;
var browser_name='未知浏览器';
if(u_agent.indexOf('Firefox')>-1){
browser_name='Firefox';
}else if(u_agent.indexOf('Chrome')>-1){
browser_name='Chrome';
}else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
browser_name='IE11';
}else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
browser_name='IE(8-10)';
}else if(u_agent.indexOf('MSIE')>-1){
browser_name='IE(6-7)';
}else if(u_agent.indexOf('Opera')>-1){
browser_name='Opera';
}else{
browser_name+=',info:'+u_agent;
}
document.write('浏览器类型为:'+browser_name+'<br>');
document.write('userAgent属性值为:'+u_agent+'<br>');
}
CheckBrowser()
6.document的用法
<body>
<!--document 对象集合-->
<!--document 对象集合得到的是一个数组，他们提供了对全体 HTML 元素或特定元素的访问-->
<form></form>
<form></form>
<form></form>
<form></form>
<a href="http://www.baidu.com">百度</a>
<a href="#">未知</a><br />
</body>
</html>
<script>
// 对象集合属性
document.write("文档包含："+document.forms.length+"个表单"+"<br />");//forms[]对象集合统计表单个数
document.write(document.all.length+"<br />");//15
document.write(document.links[0]);//输出：http://www.baidu.com/
</script>
