JavaScript入门之BOM与DOM

最新推荐文章于 2024-09-16 08:47:17 发布

这个名字真难起

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量140

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107409058

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、BOM：BOM提供了一系列与浏览器窗口进行交互的对象，每个对象都提供了很多方法与属性，Window对象是其顶层对象；使用这些对象可以访问和操控浏览器窗口，这些操作不与页面内容发生直接联系。
2、DOM： HTML DOM 定义了访问和操作 HTML 文档的标准方法，即如何获取、修改、添加或删除 HTML 元素。
3、Window对象：Window对象表示一个浏览器窗口或一个框架；如果文档包含框架（frame或iframe标签），浏览器除为HTML文档创建一个Window对象外还为每个框架创建一个额外的Window对象。
4、Element对象：在HTML DOM中，Element对象表示HTML元素，该对象可以拥有类型为元素节点、文本节点、注释节点的子节点。NodeList 对象表示节点列表，比如HTML元素的子节点集合。通过Document对象的getElementById()方法或getElementsByTagName()或getElementsByClassName()方法或getElementsByName()方法获取Element对象。

Window对象

常用属性：
在这里插入图片描述
常用方法：

setInterval与setTimeout区别：

setInterval(function,time)：先等待time毫秒，再开始无限循环执行function函数，间隔为time毫秒。
setTimeout(function,time)：先等待time毫秒，再执行一次function函数，就结束了。

二者均返回一个id，可以分别通过clearInterval(id)和clearTimeout(id)方法传入对应的id从而将这两个计时器关闭。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="结束" onclick="stop()" />
		<input type="button" value="按钮" onclick="start()" />
		
		<script>
			function test(){
				console.log(111)
			}
			
			var id = setInterval("test()",1000);//开始循环每1s执行一次test方法
			function stop(){
				clearInterval(id);//由此关闭setInterval函数
			}
			function start(){
				id = setInterval("test()",1000);//由此再开启一次循环执行test方法
			}
			
			var id = setTimeout("test()",60000);//倒计时60秒后执行一次test方法
			clearTimeout(id);//由此关闭setTimeout方法
		</script>
	</body>
</html>

Document对象

常用属性：
在这里插入图片描述
常用方法：

History对象

常用属性：
在这里插入图片描述
常用方法：

Location对象

常用属性：
在这里插入图片描述
location.href：
控制浏览器地址栏的内容，可由此属性跳转到不同网页。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function jump(){
				//打开后浏览器会自动跳转到百度页面
				window.location.href="http://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" onclick="jump()" />
	</body>
</html>