DOMContentLoaded

简介: DOMContentLoaded

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结构,并且不会因为访问尚未加载的元素而遇到错误。

相关文章
05jqGrid - 事件
05jqGrid - 事件
36 0
|
9月前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
54 0
|
JavaScript 前端开发
js函数防抖
js函数防抖
41 0
|
Web App开发 JavaScript 前端开发
页面生命周期:DOMContentLoaded,load,beforeunload,unload
页面生命周期:DOMContentLoaded,load,beforeunload,unload
248 0
页面生命周期:DOMContentLoaded,load,beforeunload,unload
|
JavaScript
JS函数节流
JS函数节流
113 0
|
JavaScript
js函数节流
js函数节流
|
JavaScript
jquery对象和dom对象-6
jquery对象和dom对象-6
101 0
jquery对象和dom对象-6
|
Web App开发 前端开发 JavaScript
|
JavaScript
JS函数防抖与函数节流
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期 函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
3411 0
|
JavaScript 数据安全/隐私保护