DOM对象

最新推荐文章于 2021-06-09 20:57:57 发布

Chtide

最新推荐文章于 2021-06-09 20:57:57 发布

阅读量179

点赞数

分类专栏： js学习文章标签： js

本文链接：https://blog.csdn.net/chdetective/article/details/115695531

版权

js学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了DOM对象模型，包括DOM的概念、Node节点的类型和访问元素属性的方法。通过示例展示了如何使用JavaScript操作DOM树来改变页面内容、样式和响应事件。此外，还提供了一个实际的倒计时功能的实现，当点击按钮后，按钮变为不可选状态，显示10秒倒计时，倒计时结束后恢复原状。

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

提示：以下是本篇文章正文内容，下面案例可供参考

一、DOM对象模型

1. 什么是DOM？

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
在这里插入图片描述
DOM树：

<html>
	<head>
		<title>这是标题</title>
	</head>
	<body>
		<div>
			<h1 style="color:red">这是内容</h1>
			<a href="1.html">这是链接</a>
		</div>
	</body>
</html>

2.Node节点

HTML中的所有内容都可以用节点（Node）来描述
节点共有12种类型，常见的节点类型有
元素节点 elementNode
属性节点 attributeNode
文本节点 textNode

通过操作DOM树，JS可以实现：
改变页面中任意的HTML元素
改变页面中任意的HTML属性
改变页面中任意的CSS样式
删除页面中任意的HTML元素和属性
添加任意的HTML元素和属性到页面中
对页面中任意的事件做出响应
对页面中的任意元素添加事件

访问Node节点

在这里插入图片描述
通过层级关系访问节点

使用以上方法时要注意换行符、空白符等也是一个节点

通过层级关系访问元素

在这里插入图片描述

每个Node节点包括如下属性
节点类型 NodeType
节点名 NodeName
节点值 NodeValue

访问节点文本内容的方法
innerHTML （会返回所有的内部内容，包括子元素的标签）
innerText
textContent

3.访问元素属性

通过element.属性名访问或通过element[属性名]访问（可使用变量）

<a id="app" class="text black large" href="1.html"></a>
document.getElementsByTagName('a')[0].id //app
document.getElementsByTagName('a')[0].href //完整路径
document.getElementsByTagName('a')[0].className // 'text black large'
document.getElementsByTagName('a')[0].classList //['text,'black','large']

二、练习

创建获取按钮，点击该按钮后，按钮变为不可选状态（属性disabled=true），文本变为“获取中”，同时右侧出现10秒倒数，倒计时结束后按钮重新变为可选，文本变回“获取”，可再次点击

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p id="p"></p>
		<input type="button" id="btn" value="获取" onclick="aa()" />


		<script type="text/javascript">
			var data2;
			var date3;
			var stop;

			function aa() {
				data2 = new Date(1000 * 11)
				date3 = data2.getSeconds();
				stop = setInterval(function() {cc();}, 1000)
			}

			function cc() {
				document.getElementById("btn").disabled = true;
				document.getElementById("btn").value = "获取中";
				var count = 0;
				count++;
				date3 = date3 - count;
				document.getElementById("p").innerHTML = date3 + "秒后获取验证码";
				if (date3 == 0) {
					document.getElementById("btn").disabled = false;
					document.getElementById("p").innerHTML = null;
					clearInterval(stop);
				}
			}
		</script>
	</body>
</html>

运行效果：
在这里插入图片描述

这个程序写的不是很好，请见谅。哈哈哈

Chtide

关注

0
点赞
踩
0

收藏

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

文章目录一、DOM对象模型1. 什么是DOM？2.Node节点3.访问元素属性二、练习提示：以下是本篇文章正文内容，下面案例可供参考一、DOM对象模型1. 什么是DOM？当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。DOM树：<html> <head> <title>这是标题</title> </head> <body> <div> <h
复制链接

扫一扫