DOMContentLoaded
事件在初始HTML文档完全加载和解析后触发,而无需等待样式表、图片和子框架完成加载。它表示DOM树已准备好进行操作。
DOMContentLoaded
事件可用于执行依赖于访问和操作DOM元素的JavaScript代码。通过将代码包裹在DOMContentLoaded
事件的监听器中,确保代码仅在DOM完全加载后运行。
以下是使用DOMContentLoaded
事件的示例:
<!DOCTYPE html>
<html>
<head>
<title>DOM Content Loaded示例</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
// DOM操作代码
var element = document.getElementById('myElement');
element.textContent = 'DOM已加载完成!';
});
</script>
</head>
<body>
<div id="myElement">等待DOM内容加载...</div>
</body>
</html>
在上面的示例中,DOMContentLoaded
事件监听器中的JavaScript代码在DOM完全加载后才访问和修改myElement
div。一旦DOM准备就绪,元素的文本内容将更改为"DOM已加载完成!"。
使用DOMContentLoaded
事件确保JavaScript代码操作的是正确的DOM结构,并且不会因为访问尚未加载的元素而遇到错误。