HTML DOM Image 对象

在HTML中，Image对象可以通过<img>标签创建。此外，使用DOM API，我们可以动态地创建和修改图片对象，而不需要重新加载网页。HTML DOM Image对象代表了一个图片，我们可以使用它的属性和方法来访问和修改图片。

创建一个Image对象

我们可以使用Image()构造函数来创建一个Image对象，并为src属性指定图片的路径：

var img = new Image();
img.src = './images/image.jpg';

也可以使用<img>标签创建一个Image对象，并在HTML中显示：

<img src="./images/image.jpg" id="image" />

然后在JavaScript中，我们可以使用getElementById()方法获取这个Image对象：

var img = document.getElementById('image');

Image对象的属性

Image对象有很多有用的属性，以下是一些常用的属性：

alt: 获取或设置图片的替代文本
complete: 如果图片已经加载完成，则返回true
height: 获取或设置图片的高度
naturalHeight: 获取图片的原始高度
naturalWidth: 获取图片的原始宽度
src: 获取或设置图片的URL
width: 获取或设置图片的宽度

Image对象的方法

Image对象还有一些常用的方法，如下：

decode(): 使用异步方式解码图片，但当图片已经加载过时，该方法将被忽略
getAttribute(): 获取图片的属性值
setAttribute(): 设置图片的属性值

示例

下面是一个使用Image对象的完整示例。我们将在页面中创建一个图像，然后动态地修改它的 src 属性，显示不同的图片：

<!DOCTYPE html>
<html>
<head>
	<title>Image Object Example</title>
</head>
<body>
	<div>
		<img id="my-image" src="./images/image1.jpg" />
	</div>
	<button onclick="changeImage()">Change Image</button>

	<script>
		function changeImage() {
			var img = document.getElementById("my-image");
			img.src = "./images/image2.jpg";
		}
	</script>
</body>
</html>

结论

Image对象是HTML DOM API中的一个重要对象，它允许我们在网页中动态地创建、访问和修改图片。上述介绍的属性和方法只是其中一部分，更多关于Image对象的用法请参考官方文档。

HTML DOM Hidden 对象 HTML DOM Input Color 对象