JavaScript_动态创建对象、window对象、定时器、JavaScript中获取对象的方法总结、location对象

最新推荐文章于 2022-08-26 10:56:16 发布

BeatRex

最新推荐文章于 2022-08-26 10:56:16 发布

阅读量557

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript JavaScript获取对象的方法

本文链接：https://blog.youkuaiyun.com/BeatRex/article/details/86540437

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍如何使用JavaScript动态创建DOM元素，包括按钮点击事件触发元素的创建与更新，以及利用window对象的定时器方法实现页面元素的定时操作。同时，讲解了不同类型的定时器及其清除方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态创建对象

document.creatElement("标签名"); //创建一个标签
document.body.appendChild(对象); //在body中创建对象
//创建的标签会放到body的最末尾

实例：在页面中点击出现图片
在这里插入图片描述

this指针

this指针指向本对象
实例：点击按钮使得按钮内的数字自增
在这里插入图片描述

window对象

window.open()方法
打开一个网页弹窗window.open("URL");
window.close()方法window.close()方法
关闭已经打开的网页弹窗window.close();
定时器
一次性定时器：window.setTimeout("js代码",时间);
在设定的时间之后执行一次js代码，时间以毫秒为单位，1s=1000ms
反复性定时器：window.setInterval("js代码",时间);
每间隔设定的时间执行一次代码，时间以毫秒为单位
清除定时器：

window.clearTimeout(定时器名);
window.clearInterval(定时器名);

实例：设置一个定时器，并设置一个按钮，点击后清除定时器
在这里插入图片描述

JavaScript中获取对象的方法总结：

Id：document.getElementById(“id名”);
标签：document.getElementsByTagName(“标签名”)获取的是对象的集合//相当于一个数组
对象.getElementsByTagName(“标签名”)
Name：document.getElementsByName(“name名”);form集合//数组
className:document.getElementsByClassName(“class名”);集合//数组【firefox】
document.images;获取img对象//数组
document.links;获取连接对象//数组
document.forms;获取表单对象//数组
document.body:body标签对象
document.documentElement:HTML对象
event:事件信息对象
this：当前对象

location对象

href属性：
地址栏的信息，可赋值给变量。也可以添加URL实现跳转
assign()方法：
加载新的文档，实现页面跳转，点击返回按钮可返回之前的页面
replace()方法：
用新文档替换当前文档，无法点击返回按钮返回之前的页面
reload()方法：
重新加载当前文档，实现刷新

实例：实现注册成功倒计时跳转页面功能
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		window.init;
		function init(){
			window.setTimeout("tiaozhuan()",5000);
			window.setInterval("shijian()",1000);
		}
		function tiaozhuan(){
			location.replace("www.baidu.com");
		}
		function shijian(){
			var time=document.getElementById("sj");
			var n=time.innerHTML;
			time.innerHTML=n-1;
		}
	</script>
</head>
<body>
	<div>注册成功！<span id="sj">5</span>秒后实现跳转</div>
</body>
</html>