js dom加载完成后设置

在JavaScript中，DOM（文档对象模型）加载完成后执行某些操作是很常见的需求。以下是一些基础概念和相关方法：

基础概念

DOM（文档对象模型）：DOM是HTML和XML文档的编程接口。它提供了对文档的结构化的表示，并定义了访问和操作文档的方式。
加载完成事件：当浏览器完成HTML文档的解析并构建DOM树后，会触发一系列事件，其中最常用的是DOMContentLoaded事件。

类型与应用场景

1. `DOMContentLoaded` 事件

类型：原生JavaScript事件。
应用场景：适用于需要在DOM完全加载后立即执行的脚本，但不需要等待图片或其他外部资源加载完成的情况。

2. `window.onload` 事件

类型：原生JavaScript事件。
应用场景：适用于需要在页面所有资源（包括图片、CSS、脚本等）完全加载完成后执行的脚本。

3. 使用jQuery的`$(document).ready()`

类型：jQuery提供的方法。
应用场景：适用于使用jQuery的项目，功能类似于DOMContentLoaded事件。

示例代码

使用原生JavaScript的`DOMContentLoaded`事件

document.addEventListener('DOMContentLoaded', function() {
    console.log('DOM fully loaded and parsed');
    // 在这里执行你的操作，例如设置元素样式或绑定事件
    var element = document.getElementById('myElement');
    if (element) {
        element.style.color = 'red';
    }
});

使用`window.onload`事件

window.onload = function() {
    console.log('All resources finished loading!');
    // 在这里执行你的操作
    var element = document.getElementById('myElement');
    if (element) {
        element.style.color = 'blue';
    }
};

使用jQuery的`$(document).ready()`

$(document).ready(function() {
    console.log('DOM is ready');
    // 在这里执行你的操作
    $('#myElement').css('color', 'green');
});

可能遇到的问题及解决方法

问题1：脚本在DOM元素之前执行

原因：脚本放在HTML文件的头部，导致在DOM元素还未加载时就执行了。 解决方法：将脚本放在<body>标签的底部，或者使用上述事件监听方法。

问题2：事件绑定失败

原因：尝试绑定的元素在事件触发时还不存在。 解决方法：确保事件绑定在DOM加载完成后进行，或者使用事件委托机制。

通过以上方法和注意事项，可以有效解决在DOM加载完成后设置相关操作的问题。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Js DOM

什么是DOM DOM，文档对象模型（Document Object Model）。 HTMLCollection 对象注意：IE9及以上版本才支持！...link.style.color = 'red' link.style.fontSize = '24px' 操作类Class 获取/设置类...console.log(myclass[0].className); //aaa 操作属性获取属性 - getAttribute() 设置属性...内部元素的事件会先被触发，然后再触发外部元素在捕获中，外部元素的事件会先被触发，然后才会触发内部元素的事件 addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型...show1() { console.log('show1'); } 取消默认事件 1，可在onclick=""上直接加return false 2，通过获取dom

3.7K1 0

js如何控制一次只加载一张图片，加载完成后再加载下一张

今天看到一个面试题，是关于img图片加载方面的，有必要记录一下。其实关于这个问题，只要知道图片什么时候加载完成就能解决了。...通过onload事件判断Img标签加载完成实现逻辑：新建一个Image对象实例，为实例对象设置src属性等，在onload事件中添加此实例对象到父元素中，然后将图片地址数组中的第一个元素剔除，继续调用此方法直到存储图片地址的数组为空...动态创建img标签，设置src属性时，即使这个img标签没有添加到dom元素中，也会立即发送一个请求。...; } dom文档中不存在test元素时，即使设置了背景图片，也不会发送请求...一个完整的页面是由js、html、css组成的，按照解析机制，html元素会优先解析，尽管css样式是放在head标签内的，但也不意味着它会优先加载，它只有等到html文档加载完成后才会执行。

1431 0

JavaScript 技术篇-js创建dom节点，并设置属性

setAttribute() 是设置属性的方法。...var s_div = document.createElement('div'); // 创建节点 s_div.setAttribute("id", "copy"); // 设置属性...s_div.innerText = "吃饭"; // 设置text值 document.body.appendChild(s_div); // 添加节点可用看到效果图：已经加入到 body...节点里的最下面位置了，而且样式就如我所设置的一样。

4.8K1 0

HTML JS DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。...HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。...HTML DOM 树 ? 通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

9.6K2 0

JS它DOM

DOM：document object model。文档对象模型。它主要由许多节点。而基于JS对象的一切视角，DOM核心是节点对象和操作方法的属性。从下面三方面来介绍DOM。...见导图：二、DOM之CSS样式对于这部分的内容，涉及到的也是CSS样式的获取和操作。...JS中提供了专门儿用于获取元素尺寸和大小的方法。实际大小：针对于元素的实际大小。主要与四个因素有关，padding。margin，border，scroll。而以下提供的几种方法，针对于不同的因素。...会有不同的结果，仅依据需求使用就可以周边大小：小结：DOM是JS学习的一个核心内容。...当中涉及到的元素节点的属性和基本操作也是前台页面中最重要的组成，通过这些，才干使JS中基于对象的思想发挥作用。能够说，B/S UI页面中的一切都是建立在这些元素的基础之上的。

3.2K2 0

js DOM系统

justify-content: space-between; font-size: 20px; margin-bottom: 10px; } DOM

6.6K3 0

JS DOM学习笔记

元素的onload事件是元素自己加载完毕时触发，body onload才是全部加载完成。...window.onload = function () { //...... } //动态注册事件，窗体加载完成后执行，和body onload效果差不多 7、window.控件Id(不建议使用），推荐...document.createElement("input"); //创建一个input标签 btn.type = "button";//input标签类型为按钮 btn.value = "提交"; //设置按钮值...的区别：window.onload只能注册一次，是在所有的Dom元素创建完毕、图片、CSS都加载完毕后才被触发；而jQuery的ready则是在Dom元素创建完毕后被触发，这样可以提高网页的响应速度 15...、js打印一个对象的所有属性： //传入一个对象 function (swiper){ var msg = ""; for(var item

4K4 0

js的DOM理解

arguments.callee,func.caller,变量赋值前必须声明，局部this必须被赋值 (Person.call(null/undefined) 赋值什么就是什么),拒绝重复属性和参数复制代码 DOM...什么是DOM 1.DOM — > Document Object Model 2.DOM定义了表示和修改文档所需的方法。...DOM对象即为宿主对象，由浏览器厂商定义，用来操作html和xml功能的一类对象的集合。也有人称DOM是对HTML以及XML的标准编程接口。...复制代码 DOM基本操作 1.对节点的增删改查查看元素节点 document代表整个文档 document.getElementById() //元素id 在Ie8以下的浏览器，不区分id大小写，而且也返回匹配...querySelector() // css选择器在ie7和ie7以下的版本中没有，非实时 .querySelectorAll() // css选择器在ie7和ie7以下的版本中没有，非实时复制代码 DOM

4.2K3 0

js 深度解析DOM

1：DOM开篇 DOM元素上 DOM元素下 <!...oH1.parentNode.removeChild(oH1); oP.parentNode.removeChild(oP); 注意点: 在js

4.9K2 0

js入门——Dom基础

DOM=DocumentObject Model，文档对象模型。 Dom有三个不同的部分。...1、核心DOM 也是最基础的文档结构的标准模型 2、XMLDOM 针对XML文档的标准模型 3、HTML DOM 针对HTML文档的标准模型对于一个新生程序猿来说。...而DOM作为以上的标准。当然会对其上面进行规划：依据DOM，文档每一个成分都是一个节点。对于上面的文档。事实上就是一颗树。通过一个样例来了解一下： js"> js"> DOM节点树中的节点分为：元素节点、文本节点、属性节点。

2.7K1 0

Ajax与DOM实现动态加载

首先说下问题背景：想要通过异步请求一个文本文件，然后通过该文件的内容动态创建一个DOM节点添加到网页中。...基于这个需要了解： 1 DOM如何动态添加节点　　2 Ajax异步请求　　3 Chrome浏览器如何处理本地请求　　DOM如何动态添加节点　　想要动态的添加节点，就需要良好的理解DOM...下面看一下创建一个DOM节点的方法过程，首先需要有一个挂载的div，这个div需要设置上一个id，这样方便通过getElementById来获取。...参考：　　【1】《Javascript DOM编程艺术》　　【2】如何解决XMLHttpRequest cannot load...

1.6K10 0

DOM 加载的生命周期

这里讨论的是浏览器加载资源和设置DOM的状态的时机，如果单纯说是网页的加载流程显得有点大，所以取了个名字是 DOM 加载的生命周期。...这里我们默认 DOM 就是一个网页加载时的HTML ：从 DOM 准备 – 加载完成的阶段 domLoading：这是整个过程的起始时间戳，浏览器即将开始解析第一批收到的 HTML 文档字节。...domInteractive：表示浏览器完成对所有 HTML 的解析并且 DOM 构建完成的时间点，表示 DOM 准备就绪的时间点。...domComplete：顾名思义，所有处理完成，并且网页上的所有资源（图像等）都已下载完毕，也就是说，加载转环已停止旋转，表示网页及其所有子资源都准备就绪的时间点。...loadEvent：作为每个网页加载的最后一步，浏览器会触发 onload 事件，以便触发额外的应用逻辑。

8283 0

js+dom原生总结

...

5.6K2 0

使用原生 JavaScript 在页面加载完成后处理多个函数

因为下面的 HTML 元素还没有加载出来，head 中的处理这部分 HTML 元素的脚本已经被执行了。...这样做虽然可以解决在网页内容加载完成之后执行对应 JavaScript 代码，但是很不方便，因为我们需要把所有要加载的函数名都写进去，修改起来就会很麻烦。...前面说过 window.onload 事件加载的缺陷是只能在页面中使用一次。而使用监听器的方法，就可以监听为 window 的 onload 事件分别加载多个函数了。...如果不支持监听器，那么就使用默认的 window.onload 方法加载。...这样，就实现了页面加载完成之后处理多个函数了。 ----

2.8K2 0

js-HTML DOM EventListener

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。 addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

3.6K1 0

使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏

loaderbg类//页面加载完成之后隐藏loading$(window).load(function () { $(".loaderbg").hide();});//设置页面加载3秒之后隐藏loading...; },3000);})*/第一种方法是等待网页全部加载完成后再隐藏loading，但同时如果网页其他资源文件加载缓慢（如图片等），loading也会随之存在更长时间。...第二中方法是设置定时隐藏loading，可以根据实际需求更改隐藏时间，默认为3s。建议实际使用时，删除 alert("页面加载完成啦！"); 避免引起用户反感，只做效果测试。...DOCTYPE html> 使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏...，支持定时或加载完成后隐藏，地址：https://www.afengblog.com/website-loading.html<!

3.8K4 0

css加载慢导致加载瞬间白屏（dom比css加载快导致）

2，css样式压缩下，用sass编译一下，放在head顶部，head再用incloud包起来，放在文件夹；

2.2K2 0

js执行会阻塞DOM树的解析和渲染，那么css加载会阻塞DOM树的解析和渲染吗

所以我干脆就先把DOM树的结构先解析完，把可以做的工作做完，然后等你css加载完之后，在根据最终的样式来渲染DOM树，这种做法性能方面确实会比较好一点。 3.css加载会阻塞js运行吗？ ...由上面的推论，我们可以得出，css加载不会阻塞DOM树解析，但是会阻塞DOM树渲染。那么，css加载会不会阻塞js执行呢? 同样，通过代码来验证. js运行预期结果: 在link后面的js代码，应该要在css加载完成后才会运行实际结果: 6.gif 由上图我们可以看出，位于css加载语句前的那个js代码先执行了，但是位于css加载语句后面的代码迟迟没有执行...，直到css加载完成后，它才执行。....png](/img/bVbf3O2) 结论由上所述，我们可以得出以下结论: 1.css加载不会阻塞DOM树的解析 2css加载会阻塞DOM树的渲染 3css加载会阻塞后面js语句的执行、因此，为了避免让用户看到长时间的白屏时间

2.3K2 0

Java加载js

Android 中可以通过webview来实现和js的交互，在程序中调用js代码，只需要将webview控件的支持js的属性设置为true Android（Java）与JavaScript（HTML）交互有四种情况...： 1） Android（Java）调用HTML中js代码 2） Android（Java）调用HTML中js代码（带参数） 3） HTML中js调用Android（Java）代码 4） HTML中js...脚本设置 Android（Java）与js（HTML）交互的接口函数是： mWebView.addJavascriptInterface(getHtmlObject(), "jsObj"); /.../ jsObj 为桥连对象 Android容许执行js脚本需要设置： webSettings.setJavaScriptEnabled(true); （2） js（HTML）访问Android（Java...Java）访问js（HTML）代码 Android（Java）访问js（HTML）端代码是通过loadUrl函数实现的，访问格式如：mWebView.loadUrl("javascript: showFromHtml

8.8K8 0

js滚动加载（无限加载）（转）

实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。 2 当页面的内容很多，出现了滚动条。...实现的思路： 1 如果真实的内容比视窗高度小，则一直加载到超过视窗 2 如果超过了视窗，则判断下面隐藏的部分的距离是否小于一定的值，如果是，则触发加载。（即滚动到了底部）

17.5K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

js dom加载完成后设置

基础概念

相关优势

类型与应用场景

1. DOMContentLoaded 事件

2. window.onload 事件

3. 使用jQuery的$(document).ready()

示例代码

使用原生JavaScript的DOMContentLoaded事件

使用window.onload事件

使用jQuery的$(document).ready()

可能遇到的问题及解决方法

问题1：脚本在DOM元素之前执行

问题2：事件绑定失败

社区

活动

资源

关于

腾讯云开发者

热门产品