JavaScript基础14-JS操作页面_点击事件

最新推荐文章于 2023-11-09 11:55:23 发布

橘久啊。

最新推荐文章于 2023-11-09 11:55:23 发布

阅读量376

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46174745/article/details/118415601

版权

JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

JS操作页面

DOM简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。

HTML DOM 树：

在这里插入图片描述

节点树中的节点彼此拥有层级关系。

父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

如何改变 HTML 元素的内容 (innerHTML)
如何改变 HTML 元素的样式 (CSS)
如何对 HTML DOM 事件对做出反应
如何添加或删除 HTML 元素
本文介绍事件处理，例如点击一个按钮，然后给出一个响应。这样的场景，我们经常看到。例如，你在某些小说网站，点击下一章，有时候因为点错了广告，会弹出一个alert框，再点击这个框，发现又弹出了一个框。我们接下来模拟这个场景，请看下面示例。

onclick（点击）事件

onclick事件：点击了该 HTML 元素

事件属性添加 JavaScript 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
	</head>
	<body>
		<form >
		// 给input标签定义一个onclick事件，触发该事件的时候，调用该事件指定的函数
			<input type="button" value="点击" onclick="alert('第一次弹窗');alert('第二次弹窗')">
			
		</form>
	</body>
</html>

橘久啊。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础14-JS操作页面_点击事件

JS操作页面DOM简介通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。HTML DOM 树：节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）通过可编程的对象模型，JavaScript 获得了足够的能力来创建
复制链接

扫一扫

专栏目录