HTML | DOM 嵌入 src 属性

在HTML文档中，如果需要引用外部资源，比如图片、音频、视频等，就需要使用src属性。src属性可以指定资源的URL地址，浏览器会根据URL地址加载资源并显示。在DOM编程中，我们可以使用getElementById()、getElementsByTagName()等方法获取到对应的HTML元素，然后使用setAttribute()方法来动态修改src属性的值或者使用getAttribute()方法获取src属性的值。

HTML中的src属性

在HTML中，src属性一般用于引用外部资源，比如图片、音频、视频等。通常情况下，我们会在img、audio、video等元素中使用src属性来指定资源的URL地址，例如：

<img src="https://example.com/image.jpeg">
<audio src="https://example.com/audio.mp3"></audio>
<video src="https://example.com/video.mp4"></video>

在这些元素中，src属性指定的URL地址可以是相对路径或者绝对路径。

JavaScript中的src属性

在JavaScript中，我们可以通过DOM操作来获取或者设置HTML元素的src属性。例如，通过getElementById()方法获取到对应的img元素，然后使用getAttribute()和setAttribute()方法来分别获取和修改src属性的值：

var imgElement = document.getElementById('myImg');
var srcValue = imgElement.getAttribute('src');
imgElement.setAttribute('src', 'https://example.com/new-image.jpeg');

另外，当我们需要在JavaScript中动态创建HTML元素时，也可以使用src属性来指定资源的URL地址。例如，以下代码动态创建一个img元素并添加到文档中：

var imgElement = document.createElement('img');
imgElement.setAttribute('src', 'https://example.com/image.jpeg');
document.body.appendChild(imgElement);

总结

在HTML中使用src属性来引用外部资源，可以方便地加载并显示对应的资源。在JavaScript中，我们可以通过DOM操作来获取或者设置HTML元素的src属性，从而实现动态修改或者创建HTML元素的需求。