JavaScript DOM（一）--页面加载完成事件与获取元素节点

最新推荐文章于 2024-04-22 19:40:19 发布
最新推荐文章于 2024-04-22 19:40:19 发布
阅读量9.5k 收藏 2
点赞数 2
文章标签： javascript DOM jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SDUST_JSJ/article/details/73136114
版权

window.onload与$(document).ready()比较

比较项\js or jQuery window.onload $(document).ready()
执行时机 需要等到网页中所有内容加载完成后执行（包括图片） 网页中DOM结构绘制完成后执行
编写个数 不能同时编写多个 可以同时编写执行多个
简化写法 无 $(document).ready(function() {}) 简写为 $(function(){})

注：
如果在body上监听了onload事件，window.onload事件将不再触发。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery ready与js onload</title>
    <script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
    <script type="text/javascript">
        console.log('begin.time:', Date.now());
        window.onload = function () {
            console.log(&
最低0.47元/天 解锁文章
kylin_zdd1993
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript DOM文档事件
m0_67942533的博客
09-07 4557
JavaScript DOM文档事件
[03]Web前端进阶—JS页面加载后执行事件
Π指针
08-25 1758
有单独的html页面里面写js代码的问题，js在什么时候运行好"DOMContentLoaded"事件：页面的DOM加载并解析完毕之后触发JS代码，不会等待图片,css等资源的加载。“onload事件”：页面所有资源加载完毕时触发JS代码。
原生JS实现DOM加载完成马上执行JS代码的方法
12-10
用原生JS我们经常使用[removed]事件来加载页面。但是[removed]是在页面元素都加载完毕后才执行，如果页面内有大的图片的话，会在页面展现后好久时间后才执行。所以有时我们需要在DOM载入时马上执行一些函数。jQuery提供了document.ready方法用来代替[removed]。但又不愿意仅为了这一个需求而引入整个JQuery库，于是就把jQuery的方法提取出来，单独使用了。 如果只需要对DOM进行操作，那么这时就没必要等到页面全部加载了。Firefox有DOMContentLoaded事件可以轻松解决，可惜的就是IE没有。 MSDN关于JSCRIPT的
JS DOM中的获取节点和操作节点
最新发布
m0_63977330的博客
04-22 1697
HTML除了一些内置属性之外,程序员还可以根据需要自定义一些属性, 自定义的属性建议以data-开头// DOM操作内置属性 DOM对象.内置属性名// 获取自定义属性,也可以获取内置属性,但是获取类名的时候,需要使用class// dom对象.getAttribute("自定义属性名或者内置属性名")// 设置自定义属性,也可以设置内置属性,但是设置类名的时候,需要使用class// dom对象.setAttribute("自定义属性名或者内置属性名", "属性值")
通用domReady方法，类似于jquery
summer7310的专栏
10-04 731
function myReady(fn){     //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式     if ( document.addEventListener ) {         document.addEventListener("DOMContentLoaded", fn, false);     } else {    
JS 进阶(5) DOM操作：dom加载完毕执行js、创建节点、遍历节点、查找节点、删除节点
weixin_39141044的博客
11-02 5871
一、dom加载完毕执行js dom可以看成一个树形结构，dom的加载顺序就是从上到下，我们一再强调将js文件放在尾部，就是因为如果js脚本在dom文档构造之前执行，这样js就无法访问dom文档对象模型。 1.1 jquery 等待页面dom树加载完毕，再执行代码 写法一：标准写法 $(document).ready(function(){ ... }); 写法二：简写 $(function...
javascript原生判断DOM是否加载完毕执行方法
A-Select °
06-22 950
readyState document.readyState 返回当前文档的状态 属性如下： uninitialized 还未开始加载 loading 加载中 interactive 已加载，文档与用户可以开始交互 complete 加载完成 DOMContentLoaded 当 DOMContentLoaded事件触发时，仅当DOM加载完成，不包括样式表，图片，flash onload 当 onload 事件触发时，页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了 根据执行时DOM是否已
JavaScript DOM-元素节点操作
weixin_50313248的博客
11-20 287
节点操作 创建 var font = document.createElement('font'); // 创建元素节点 document.body.appendChild(font); // 把元素节点追加到DOM树上 添加 parentNode.appendChild( node ) parentNode.append( node ) 在父节点中追加 node 子对象, 后者为新方法 parentNode.insertBefore(node, child); parentN
JavaScript学习 — DOM获取页面元素
weixin_67614925的博客
05-20 183
文章目录获取方式创建一个页面传统获取方式ES6新型获取方式父子关系 获取方式 创建一个页面 <body> <div id="family"> <div class="father"> 爸爸 <div class="son">儿子</div> </div> </div> <div id="b">我是div&lt
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
10-16
在JavaScript（JS）前端开发中，掌握页面加载事件、数组操作、DOM节点操作以及循环和分支结构是非常重要的。下面将详细讲解这些知识点。 1. **页面加载事件**： - `window.onload` 事件是在整个页面包括所有资源...
JavaScript-DOM--:JavaScript DOM编程艺术源代码
03-24
通过JavaScript，我们可以获取这些节点，改变它们的属性，添加或删除子节点，甚至移动节点，从而更新页面内容。 例如，`document.getElementById()`方法是DOM操作的基础，它允许我们通过元素ID找到特定的DOM节点。...
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
10-24
CSS伪元素（Pseudo-Elements）是一种特殊的样式规则，用于定义文档中没有实际DOM节点的元素部分，例如`::before`和`::after`。这些伪元素在页面渲染时被插入到元素内部，但并不在DOM树中可见。在某些场景下，我们...
14---JavaScript-and-DOM-Manipulation
04-28
通过 JavaScript，我们可以使用 DOM API 来获取、创建、修改或删除这些节点。 在实际应用中，DOM 操作通常包括以下步骤： 1. **选取元素**：使用 `document.getElementById`、`document.querySelector` 或 `...
javascript经典特效---XML超酷页面效果一.rar
01-02
本资源"javascript经典特效---XML超酷页面效果一.rar"提供了一个使用JavaScript与XML结合实现的酷炫页面效果实例。 XML（Extensible Markup Language）是一种可扩展标记语言，常用于存储和传输数据。XML文件结构...
等前端页面加载完成后再获取数据
SsiGan的博客
09-26 712
原文链接：https://www.cnblogs.com/yifeixue/p/11543250.html 最近项目前端部分，js出现了异步处理的问题，所以部分参数想获取便不易获取，渲染其他组件便没法获取参数 然后找到了这篇博客，用第五种方法，在页面加载完后，再获取数据，成功！ ...
DOM的加载过程
Compromise_的博客
08-16 1096
构建dom树：html解析器
js获取页面元素的 7种方法
jerisem的博客
07-31 8394
1、通过ID来获取页面元素： document.getElementById('id'); <div id='box'></div> <script> let box = document.getElementById('box'); console.log(box); // 输出是整条语句 <div id='box'></div> </script>
页面加载完成后执行JS的方式
热门推荐
橙-极纪元-cplvfx-JJY.Cheng
12-09 1万+
页面加载完成后执行JS的方式 总结几种页面加载完成以后再执行当前js文件的方式：
DOM深入学习 --- 浏览器事件简介（二）
秋天，黄叶坠地，凉风有信。
03-09 525
浏览器事件简介 事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。 这是最有用的 DOM 事件的列表，你可以浏览一下： 鼠标事件： click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。 contextmenu —— 当鼠标右键点击一个元素时。 mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。 mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。 mousemove —— 当鼠标移动时。 键盘事

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值