第十二周笔记

最新推荐文章于 2022-10-26 22:56:33 发布

Ascssy

最新推荐文章于 2022-10-26 22:56:33 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/weixin_48999849/article/details/117091473

版权

HTML DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。
HTML DOM 树形结构:
实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" border="0" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡 开/关 灯</p>

</body>
</html>

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

DOM：

DOM 是 W3C（万维网联盟）的标准。

DOM 定义了访问 HTML 和 XML 文档的标准：

“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM标准被分为 3 个不同的部分：

①核心 DOM - 针对任何结构化文档的标准模型
②XML DOM - 针对 XML 文档的标准模型
③HTML DOM - 针对 HTML 文档的标准模型

HTML DOM

HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。

换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

DOM 对象树

当网页被加载时，浏览器会创建页面的文档对象模型。

HTML DOM 模型被构造为对象的树：
在这里插入图片描述
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

通常，通过 JavaScript，需要操作 HTML 元素。

为了做到这件事情，必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id=“intro” 元素：

如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

如果未找到该元素，则 x 将包含 null。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<p id="intro">hahaha</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script>

</body>
</html>

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

使用 HTML DOM 改变 HTML

一、改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Fri May 28 2021 19:53:52 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

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

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档

二、改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，使用document.getElementById(id).innerHTML=新的 HTML

本例改变了 <p>元素的内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本新文本新文本";
</script>
<p>修改文本修改文本修改文本</p>

</body>
</html>

运行结果：
在这里插入图片描述
三、改变 HTML 属性

如需改变 HTML 元素的属性，使用语法document.getElementById(id).attribute=新属性值

本例改变了 <img> 元素的 src 属性：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

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

上面的 HTML 文档含有 id=“image” 的元素
我们使用 HTML DOM 来获得 id=“image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

使用 HTML DOM 改变CSS

一、改变 HTML 样式

如需改变 HTML 元素的样式，使用这个语法document.getElementById(id).style.property=新样式

下面的例子会改变 <p> 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<p id="p1">sawadika</p>
<p id="p2">sawadika</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过jio本修改。</p>

</body>
</html>

运行结果：
在这里插入图片描述
二、使用事件

HTML DOM 允许我们通过触发事件来执行代码。比如以下事件：

元素被点击。
页面加载完成。
输入框被修改。

例1：
本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<h1 id="id1">我的标题 100</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'">
点我!</button>

</body>
</html>

运行结果：
在这里插入图片描述
点击 “点我!” 后的结果：

例2：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zpyooooo</title>
</head>
<body>

<p id="p1">这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。 这是一个文本。</p>
<input type="button" value="隐藏文本" onclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" onclick="document.getElementById('p1').style.visibility='visible'" />

</body>
</html>