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

相关文章
|
5月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
36 0
|
9月前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
61 0
|
JavaScript 前端开发
js函数防抖
js函数防抖
42 0
15zTree - 其他鼠标事件监听
15zTree - 其他鼠标事件监听
47 0
|
JavaScript
JS函数节流
JS函数节流
115 0
|
JavaScript
js函数节流
js函数节流
|
Web App开发 前端开发 JavaScript
|
JavaScript
JS函数防抖与函数节流
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执行周期则执行该动作,然后进入下一个新周期 函数节流(throttle)与 函数防抖(debounce)都是为了限制函数的执行频次,以优化函数触发频率过高导致的响应速度跟不上触发频率,出现延迟,假死或卡顿的现象。
3415 0

热门文章

最新文章