BOM对象

sunshinegaigai

于 2019-06-23 18:07:12 发布

阅读量109

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_42578658/article/details/93378256

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了BOM（浏览器对象模型）中的核心对象，包括Array、Window、Location、History和Document对象。讲解了如何使用window对象进行窗口操作，如打开和关闭窗口、设置定时器。此外，还详细阐述了Location对象的跳转功能，History对象的back()、forward()和go()方法，以及Document对象对页面元素的访问和文档属性的获取。最后，提及了DOM对象在元素和内容操作中的应用。

摘要由CSDN通过智能技术生成

Array对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二维数组</title>
</head>
<body>
姓名 数学 语文 英语
<hr/>
<script type="text/javascript">
var students,i,j;
students=new Array();
students[0]=new Array("张三",76,90,80);
students[1]=new Array("李四",89,97,86);
students[2]=new Array("王五",90,78,88);
for(i in students){
for (j in students[i]){
	document.write(students[i][j]+"\t");
}
document.write("<br/>");
}

</script>
</body>
</html>

window对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window对象的使用</title>
</head>
<body>
<script type="text/javascript">
var width=innerWidth;
var height=innerHeight;
alert(width+"*"+height);
</script>
</body>
</html>

打开和关闭窗口的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开和关闭窗口的使用</title>
<script type="text/javascript">
var myWindow;
function openNewWin(){
	myWindow=window.open("example02.html","myWindow","width=200,height=150,top=200,left=100");
}
function closeNewWin(){
	myWindow.close();
}
</script>
</head>
<body>
   <p><a href="javascript:openNewWin()">打开新窗口</a></p>
   <p><a href="javascript:closeNewWin()">关闭窗口</a></p>
</body>
</html>

定时器的使用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>定时器的使用</title>
<script>
function showTime(){
	var now=new Date();
	var dataTime=now.toLocaleTimeString();
	time=document.getElementById("time");
	time.innerHTML=dataTime;
}
var time=window.setInterval("showTime()",1000);//setInterval是用于周期性执行脚本
function clear(){
	window.clearInterval(timer);//没有这个方法，则一直在页面关闭之后才能停止
	window.status="已取消定时器";
}
</script>
</head>
<body>
<div id="time"></div>
<p><a href="javascript:clear()">取消定时器</a></p>
</body>
</html>

location对象

跳转到新地址

location.href="http://www.itcast.cn";

history对象

back(）加载历史纪录中前一个页面

forward(）加载历史记录中后一个页面

go(）加载历史记录中某一个页面
history.go(-1)//后退一页
history.go(1)//前进一页
history.go(0)//重新加载当前页面，相当于location.reload()

document对象

body 访问<body>元素

lastModified 获得文档最后修改的日期和时间

referrer 获得该文档的来路URL地址，当文档通过超链接被访问时有效

title 获得当前文档的标题

write()向文档写HTML或JavaScript代码

DOM对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>指定节点操作</title>
<script type="text/javascript">
function init(){
	var one=document.getElementById("one");
	one.style.fontWeight="bold";
	var lis=document.getElementsByTagName("li");
	lis[3].style.color="red";
}
function init(){
	var a=document.lastChild;//找到<html>元素
	a=a.lastChild;//找到<body>元素
	a=a.childNodes[1];//找到<ul>元素
	a=a.childNodes[1];//找到第一个<li>元素
	a.style.color="red";//将字体颜色设置为红色
}
</script>
</head>
<body onload="init()">
<ul>
	<li id="one">标题一</li>
	<li id="two">标题二</li>
	<li id="three">标题三</li>
	<li id="four">标题四</li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素对象常用操作</title>
<script type="text/javascript">
function init(){
	var text=document.createTextNode("传智博客欢迎您");
	var p=document.createElement("p");
	p.appendChild(text);
	document.body.appendChild(p);
}
</script>
</head>
<body onload="init()">

</body>
</html>

属性元素与内容操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素属性与内容操作</title>
<script type="text/javascript">
function init(){
var test=document.getElementById("test");//获取test元素对象
test.innerHTML="<p>传智博客,打造会代码的全面设计师</p>";//元素内容操作
test.setAttribute("style", "font-weight:bold;font-size:18px;");//设置元素属性
test.className="top";
}
</script>
</head>
<body onload="init()">
<div id="test">test</div>
</body>
</html>

sunshinegaigai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM对象

Array对象<!DOCTYPE html><html><head><meta charset="UTF-8"><title>二维数组</title></head><body>姓名数学语文英语<hr/><script type="text/javascri...
复制链接

扫一扫

专栏目录