学习周记7

最新推荐文章于 2022-09-02 16:21:29 发布

Ddddd_xr

最新推荐文章于 2022-09-02 16:21:29 发布

阅读量425

点赞数

本文链接：https://blog.csdn.net/Ddddd_xr/article/details/116424098

版权

JavaScript HTML DOM

一、DOM简介
- HTML DOM (文档对象模型)
二、HTML DOM - 改变 HTML
三、HTML DOM - 改变CSS
- 1、改变 HTML 样式
- 2、使用事件
四、HTML DOM 事件

一、DOM简介

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

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

HTML DOM 模型被构造为对象的树：
HTML DOM 树
在这里插入图片描述

二、HTML DOM - 改变 HTML

1、改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

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

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

</body>
</html>

结果
在这里插入图片描述
注：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

2、改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=新的 HTML
实例

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

<h1 id="header">旧标题</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
<p>"旧标题" 被 "新标题" 取代。</p>
<p>用语法修改HTML元素内容</p>
</body>
</html>

结果
在这里插入图片描述
解释：
上面的 HTML 文档含有 id=“header” 的 < h1 > 元素
我们使用 HTML DOM 来获得 id=“header” 的元素
JavaScript 更改此元素的内容 (innerHTML)

3、改变 HTML 属性

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

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>
	
<img id="image" src="../image/z2%20.jpg" width="160" height="160" >
<script>
document.getElementById("image").src="../image/z4.jpg";
</script>
<p>原图片为 图片2 ,脚本将图片修改为 图片4 </p>
	
</body>
</html>

结果
在这里插入图片描述
上述例子改变了 < img > 元素的 src 属性
解释
上面的 HTML 文档含有 id=“image” 的 < img > 元素
我们使用 HTML DOM 来获得 id=“image” 的元素
JavaScript 更改此元素的属性（把 “图2” 改为 “图4”）

三、HTML DOM - 改变CSS

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

1、改变 HTML 样式

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

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

<p id="p1">原版效果</p>
<p id="p2">修改后效果</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>通过脚本修改了段落的颜色、字体、字号。</p>

</body>
</html>

结果
在这里插入图片描述
上述例子改变了 < p > 元素的样式

2、使用事件

HTML DOM 允许我们通过触发事件来执行代码。
比如以下事件：元素被点击、页面加载完成、输入框被修改等
实例

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

<h1 id="id1">通过触发事件来执行代码</h1>
<button type="button" onclick="document.getElementById('id1').style.color='blue'">
点我!</button>

</body>
</html>

结果
在这里插入图片描述
点击后

上述例子改变了 id=“id1” 的 HTML 元素的样式，当用户点击按钮时样式会发生改变。

四、HTML DOM 事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

1、对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
οnclick=JavaScript
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
实例

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

<h1 onclick="this.innerHTML='点击后改变了内容!'">点击文本!</h1>

</body>
</html>

结果
在这里插入图片描述
点击后

以下例子中从事件处理器调用了一个函数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="点击后改变了内容!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

结果与上面一例相同

2、使用 HTML DOM 来分配事件

HTML DOM 允许使用 JavaScript 来向 HTML 元素分配事件
实例
向 button 元素分配 onclick 事件：
< script >
document.getElementById(“myBtn”).οnclick=function(){displayDate()};
< /script >
实例

<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>

结果
在这里插入图片描述
点击后

3、onload 和 onunload 事件

onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
< body οnlοad=“checkCookies()”>

4、onchange 事件

onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
实例
< input type=“text” id=“fname” οnchange=“upperCase()”>
实例

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

<script>
function myFunction(){
	var x=document.getElementById("fname");
	x.value=x.value.toUpperCase();
}
</script>
</head>
<body>
输入字母: <input type="text" id="fname" onchange="myFunction()">
<p>当离开输入框后，函数被触发，将小写字母转为大写字母。</p>


</body>
</html>

结果
在这里插入图片描述

在这里插入图片描述

5、onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<body>
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">请将鼠标移动到我身上</div>
<script>
function mOver(obj){
	obj.innerHTML="谢谢！"
}
function mOut(obj){
	obj.innerHTML="请将移动鼠标"
}
</script>
</body>
</body>
</html>