JS 页面加载触发事件 document.ready和onload的区别

一、JS 页面加载触发事件 document.ready和onload的区别

1、onload：当用户进入页面时就会触发。

2、document.ready：是当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

1、onload：事件常用来检测访问者的浏览器类型和版本，然后根据这些信息载入特定版本的网页。

2、document.ready：是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用所绑定的函数。

1、onload：常被用来处理用户进入或离开页面时所建立的 cookies。

2、document.ready：是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

参考资料来源：百度百科-Javascript事件

参考资料来源：百度百科-ready(fn)

二、js里面 document 什么意思

1、JavaScript中的`document`是一个代表整个HTML文档的对象。

2、`document`对象在Web开发中非常重要，因为它提供了对HTML文档内容的访问和操作。通过`document`对象，我们可以读取、修改和创建HTML元素，以及处理各种文档相关的事件。

3、在JavaScript中，你可以使用`document`对象来获取页面上的元素。例如，如果你有一个ID为“myElement”的元素，你可以使用`document.getElementById('myElement')`来获取这个元素。一旦你获取了这个元素，你就可以对其进行各种操作，如更改其内容、样式或添加事件监听器。

4、除了获取元素外，`document`对象还提供了许多方法和属性，用于创建和修改HTML文档的内容。例如，你可以使用`document.createElement()`方法创建一个新的HTML元素，然后使用`appendChild()`或`insertBefore()`方法将其添加到文档中。你还可以使用`document.createTextNode()`方法创建一个新的文本节点，并将其添加到元素中。

5、此外，`document`对象还提供了许多事件，如`DOMContentLoaded`、`load`和`click`等。你可以使用`addEventListener()`方法为这些事件添加监听器，以便在事件发生时执行特定的代码。

6、总的来说，`document`对象是JavaScript中非常重要的一个对象，它提供了对HTML文档内容的全面访问和操作。通过学习和掌握`document`对象的使用，你可以更加灵活地进行Web开发，实现各种复杂的功能和交互效果。

三、js代码如何封装添加class

1、在JavaScript中，封装一个添加类名的函数是实现代码复用的有效方式。以下是一个简单的函数，它接受两个参数：`element`是你想要添加类的DOM元素，`className`是你想要添加的类名。函数首先检查`element`是否是有效的DOM元素，然后获取当前的类名，并将其与新的类名结合。如果类名已经存在，它将确保不会重复添加。最后，函数将更新后的类名设置回元素。

2、function addClass(element, className){

3、 if(element.nodeType=== Node.ELEMENT_NODE){

4、 let classList= element.classList;

5、 if(!classList.contains(className)){

6、//假设有一个ID为'my-element'的元素

7、const myElement= document.getElementById('my-element');

8、//调用addClass函数向元素添加'my-class'类

9、addClass(myElement,'my-class');

10、确保在调用`addClass`函数之前，DOM已经完全加载。这通常意味着你应该在文档的`DOMContentLoaded`事件触发后或在``标签之前调用该函数。