文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

加载外部js文件window.onload时无法读取null的属性"querySelectorAll“

加载外部js文件时无法读取null的属性"querySelectorAll"是因为在加载js文件时，可能会出现DOM元素还未完全加载完成的情况，此时使用querySelectorAll方法会报错。解决这个问题的方法有以下几种：

  1. 确保在加载外部js文件之前，DOM元素已经完全加载完成。可以将外部js文件的引入放在页面底部，或者使用defer或async属性来延迟js文件的执行。
  2. 使用DOMContentLoaded事件来确保DOM元素加载完成后再执行js代码。可以将需要执行的代码放在DOMContentLoaded事件的回调函数中，确保DOM元素已经准备就绪。
  3. 使用try-catch语句来捕获错误，避免报错导致代码中断执行。在使用querySelectorAll方法之前，可以使用条件判断语句先判断相关的DOM元素是否存在，如果不存在则不执行querySelectorAll方法。
  4. 使用setTimeout函数来延迟执行querySelectorAll方法，确保DOM元素已经加载完成。可以设置一个适当的延迟时间，让DOM元素有足够的时间加载完成后再执行querySelectorAll方法。

总结起来，加载外部js文件时无法读取null的属性"querySelectorAll"是因为DOM元素还未完全加载完成导致的。可以通过确保DOM元素加载完成、使用DOMContentLoaded事件、使用try-catch语句或延迟执行的方式来解决这个问题。

腾讯云相关产品和产品介绍链接地址：

  • 腾讯云官网：https://cloud.tencent.com/
  • 云服务器（CVM）：https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
  • 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
  • 云存储（COS）：https://cloud.tencent.com/product/cos
  • 区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关搜索:错误TypeError:无法读取null的属性'querySelectorAll‘，错误TypeError:无法读取null的属性'getElementsByTagName’main.js:1错误TypeError:无法读取null的属性'querySelectorAll‘Flickity:未捕获TypeError:无法读取null的属性“”querySelectorAll“”未捕获的TypeError:无法读取null VSCODE的属性'querySelectorAll‘未捕获子项:无法在window.onload读取null的属性(读取“”TypeError“”)使用外部js文件时无法加载jwplayer噩梦js无法读取null的属性“”focus“”节点js无法读取null的属性'headers‘同构样式加载器，无法读取null的属性“”apply“”jQuery文件上传。无法读取null的属性“innerHTML”无法读取null + passport.js的属性“body”Vue.js:无法读取null的属性“classList”Discord.JS -无法读取null的属性“roles”Hapi.js无法读取null的属性“statusCode”fooplugins/Footable -尝试从JSON加载表时，“无法读取null的属性'name‘”运行ESLint时出错:无法读取null的属性'range‘提取组件时，无法读取null错误的属性“”focus“”Discord.js TypeError:无法读取null的属性“”id“”Discord.js TypeError:无法读取null的属性“roles”discord.js状态“无法读取null的属性'setActivity‘”
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

HTML解析之DOMContentLoaded和onload

但如果是引入外部JS文件的话会有一点不同，要先加载该JS文件，然后执行，然后在往下解析HTML。...defer 当浏览器遇到 script 标签时，文档的解析不会停止，JS文件的加载与文档解析并行（异步），待到文档解析DOM构建完成，脚本才会执行...async 当浏览器遇到 script 标签时，文档的解析不会停止，JS文件的加载与文档解析并行（异步），脚本下载完成后开始执行脚本，脚本执行时文档会停止解析...看图（图片来源于网络） 蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。 总结defer和async的区别： 加载时是一样的，相对于HTML解析是异步的。...，因为此时HTML解析完成，DOM树构建完成，但外部css文件可能还没加载完成。

1.6K20

浏览器渲染页面与DOM相关常见的面试题以及问题

,在浏览器显示HTML时，它会注意到需要获取其他地址内容的标签,这时，浏览器会发送一个获取请求来重新获得这些文件,这些文件就包括CSS/JS/图片等资源，这些资源的地址都要经历一个和HTML读取类似的过程...构建过程中可能会产生的阻塞 html的代码，是从上到下一行行执行的，也就是说如果js代码写在head头里，且没有用加在window.onload方法里，那么他是无法读取到body里的标签的。...但与此同时，如果还有外部文件，则是同时加载（不阻塞后续外部文件link、script加载）。但是外部文件内的代码不会执行，只会在代码解析到它的时候执行。...添加async属性之后，script加载的外部文件成为了异步加载，这时相当于它于原本的html解析过程同步进行。... js添加defer属性之后，script加载的外部文件成为了异步加载，执行是同步的

1.2K30

    • BOM概述

    ，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性（BOM包含DOM） window对象是浏览器的顶级对象，它具有双重角色： 它是JS访问浏览器窗口的一个接口...-- 正常情况下，我们的script应该写在body末尾，写在这个部分是无法正常使用的 --> // 这时就需要采用页面加载事件来等待页面加载完成后再去加载...的执行机制如下: 先执行执行栈中的同步任务 异步任务(回调函数)放入任务队列中 一旦执行栈的所有同步任务执行完毕,系统就会按照次序读取任务队列中的异步任务,于是被读取的异步任务结束等待状态,加载进执行栈的末尾并开始执行...互联网上的每个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它 protocol://host[:port]/path/[?...省略时使用方案的默认端口 path 路径 由零个或多个'/'隔开的字符串,一般用来表示主机上的一个目录或文件地址 query 参数 以键值对的形式,用&隔开 fragment 片段 #后面内容常用于连接

    1.1K10

    前端之JavaScript

    ; 3、外部引入 变量、数据类型及基本语法规范 　　JavaScript...undefined 5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null 1种复合类型： object javascript...操作元素属性 var 变量 = 元素.属性名 读取属性 元素.属性名 = 新属性值 改写属性 属性名在js中的写法 1、html的属性和js里面属性写法一样 2、“class” 属性写成 “className...2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。...; }() 封闭函数的作用 封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：

    1.9K40

    小兔JS教程（二）-- JavaScript 解释型语言的特点

    可是我忘记了一点，就是在全局作用域中，所有的js变量，都是默认挂载在window对象上的。 所以，我写onload，就是相当于window.onload。...在默认情况下，window.onload 是null。...它的灵活体现在： 1.可以动态地给对象添加属性，或者给属性赋值。 2.只要你愿意，随时随地可以引入外部的js脚本，并且立即执行。...这两点是编译型语言无法直接做到的，比如你写一个Person类，然后编译成Person.class，这些就已经尘埃落定的，你要修改一个方法，或者添加一个属性，就只好重新编译一下class，然后才会生效。...这也是为什么，你在学习JavaWeb的时候，每当新增一个方法，就必须要重启tomcat的原因。因为tomcat需要重新把你编译好的class文件加载到它的容器内部，才可以。

    1.1K50

    Js框架设计之DomReady

    4、一般的HTML标签的都转换成DOM节点的速度很快,但是有写却很慢,比如图片,外部脚本文件,外部css样式表,等的文件,当浏览器解释到这一类的标签,回去指定的路径加载对应的文件, 这里注意JS文件:浏览器下载完指定的脚本文件后...6、此外, style标签与link标签,它们在加载样式文件时是不会堵塞,但它们一旦异步加载好,就立即开始渲染已经构建好的元素节点们, 这可能会引起reflow, 这也影响速度. 7、另一个影响DOM构建的标签是...总结:上面的种种原因都会影响到DOM的构建,所以我们贸然的使用getElementById,ByTageName等等方法获取页面的元素时,很可能页面上的HTML标签还没有转换成为DOM节点,所以就会报null...的错误 二、使用DomReady机制解决因DOM解析未完成前使用document.getElementById获取报null错误的问题 1、在早期的浏览器中,提供了一个window.onload方法,这个方法会在浏览器加载完所有的文件..., 它与真正的DomContentLoaded有区别,在旧的JS书籍中m都会让我们把Js函数写到window.onload函数中, 防止Dom树还没有建好,就对节点进行操作,产生错误

    1.5K60

    JS事件篇

    事件篇 window.onload:事件 Dom查询 innerhtml ----获取节点的html内容，或者设置对应节点html内容 读取或者设置节点的相关属性 获取元素节点的子节点 children...父节点.removeChild(子节点)：删除子节点 使用innerHTML也可以完成DOM的增删改操作 阻止a标签默认行为的常用三种方式 a标签的索引问题 JS修改元素的样式 读取元素的内联样式 获取当前元素显示的样式...eval函数 ---- window.onload:事件 浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载...window.onload事件会在整个页面加载完成之后，才会触发，将对应的script代码，写在里面，可以确保script代码可以在页面加载完成之后，才会执行 <!...确保是一次性事件 documnet.onmouseup=null; //当鼠标松开时，释放点击事件的捕获 //浏览器兼容性 obj.releaseCapture

    12.6K10

    前端学习(5)~html详解(三)

    应用程序缓存为应用带来三个优势： 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。... 每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性，则页面不会被缓存（除非在 manifest 文件中直接指定了该页面）。...- 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） CACHE MANIFEST 第一行，CACHE MANIFEST，是必需的： CACHE MANIFEST /theme.css.../logo.gif /main.js 上面的 manifest 文件列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。...当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。

    59520

    【javascript系列】史上最全javascript系列教程（一）

    ("css任意选择器") 返回第⼀个 document.querySelectorAll("css任意选择器") 返回符合的所有 document.documentElement 获取HTML元素 document.body...获取body元素 JS编写的合适位置 JS的输出 浏览器窗口输出 持续更新中.........(“css任意选择器”) 返回第⼀个 document.querySelectorAll(“css任意选择器”) 返回符合的所有 document.documentElement 获取HTML...写在head标签内需要写上window.onload包着，要不然会报错，因为执⾏js时⻚⾯标签还没加载 window.onload的作⽤是当⻚⾯加载完成后⾃动触发事件，⼀个⻚⾯应该只有⼀个window.onload...JS的最佳编写位置为body结束标签之前。 JS可以写在单独的.js文件夹引入。

    1K10

    用框架的你，可能早已忽略了这些事件API

    DOM 树，但像 和样式表之类的外部资源可能尚未加载完成。...load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。 beforeunload/unload —— 当用户正在离开页面时。...window.onload 当整个页面，包括样式、图片和其他资源被加载完成时，会触发 window 对象上的 load 事件。可以通过 onload 属性获取此事件。...我们希望我们的函数在 DOM 加载完成时执行，无论现在还是以后。 document.readyState 属性可以为我们提供当前加载状态的信息。...它有 3 个可能值： loading —— 文档正在被加载。 interactive —— 文档被全部读取。 complete —— 文档被全部读取，并且所有资源（例如图片等）都已加载完成。

    1.8K10

    javascript-继承之jquery

    js： 使用 querySelectorAll 来查询 DOM 节点； 使用 fetch 来代替 ajax； 事件处理使用了事件代理； 使用 DOM 标准化写了 polyfill； 使用了自定义元素。...DOMContentLoaded * 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload * 这也就是$(document...).ready() 比 window.onload 执行早的原因 * * arguments.callee 博客里面有一篇文章 [js-递归] 里面专门讲到了，这里不再解释了...DOMContentLoaded * 页面上所有的DOM，样式表，脚本，图片，flash都已经加载完成了，才会触发window.onload * 这也就是$(...document).ready() 比 window.onload 执行早的原因 * * arguments.callee 博客里面有一篇文章 js-递归里面专门讲到了

    1.1K30

    1-Electron基础

    ({width:700,height:300}) //加载主界面视图文件 mainWindow.loadFile("test.html") //编写关闭窗口时的逻辑 mainWindow.on...package.json中的main属性声明，一般为main.js或index.js，创建或销毁窗口等所有系统事件，都需要定义在主进程的控制文件中，统一由主进程管理。..., 当BrowserWindow实例被销毁后, 相应的渲染进程也会被终止 Electron运行流程 读取package.json的中的入口文件,即main.js main.js在主进程中创建渲染进程 读取应用页面的布局和样式...mainWindow = new BrowserWindow({ width:500, height:500, //开放nodejs，必须加入这两句 否则无法在渲染进程中正常加载...}) }) 渲染进程 var fs = require('fs'); //加载fs window.onload = function(){ //获取按钮和div控件 var

    53220

    带你搞懂图片懒加载

    懒加载原理 一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了...图片懒加载的原理就是我们先设置图片的 data-src 属性（当然也可以是其他任意的，只要不会发送 http 请求就行了，作用就是为了存取值）值为其图片路径，由于不是 src，所以不会发送 http 请求...其他情况），这时候我们再将data- src属性替换为 src 属性即可 js代码： // onload是等所有的资源文件加载完毕以后再绑定事件 window.onload = function(){...// 获取图片列表，即img标签列表 var imgs = document.querySelectorAll('img'); // 获取到浏览器顶部的距离 function...document.documentElement.scrollTop || document.body.scrollTop; for(var i=0;i<imgs.length;i++){ //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

    77910

    高性能Javascript--脚本的无阻塞加载策略

    同样的事情发生 在使用 src 属性加载 JavaScript 的过程中。浏览器必须首先下载外部文件的代码,这要占用一些时间,然后 解析并运行此代码。...通过这种方法,就不再需要两个 标签(每个标签加载一个文件),一个标签就可以加载他们。这是在HTML页面包含多个外部Javascript的最佳方法。 　　...window.onload=function(){}必须等待网页中所有的内容加载完毕后 ( 包括元素的所有关联文件，例如图片 ) 才能执行，即Javascript此时才可以访问页面中的任何元素。...在上述的基础上，对比一下defer与async的异同： 相同之处： 加载文件时不阻塞页面渲染 使用这两个属性的脚本中不能调用document.write方法 有脚本的onload的事件回调 区别点： html...页面的标签越少，页面的加载速度就越快，响应也更迅速。不论外部脚本文件还是内联代码都是如此。

    96430

    从零开始学 Web 之 BOM（一）BOM的概念，一些BOM对象

    2、BOM 顶级对象 BOM 的顶级对象是：window window 是浏览器的顶级对象，当调用 window 下的属性和方法时，可以省略 window。...1、弹框时页面无法加载； 2、各个浏览器的样式不相同，且样式不可自定义。...4、页面加载对象 提出问题： 我们知道，如果将 script 标签放在 head 里面的话，页面加载的时候是先加载的 script 标签，之后才加载 body 里面的标签。...2、window.onload 事件会在页面加载完毕（页面中所有内容、标签、属性以及外部引入的 js文件）时触发。 3、window.onload 可以省略 window。...，这两个属性和方法作用相同，并且都保存跳转前的地址（在浏览器中可以点击返回按钮）。

    67230

    如何避免 JavaScript 模块化中的函数未定义陷阱

    假设在一个普通的 JavaScript 文件中，我们编写了如下代码，这段代码定义了一个 pageLoad 函数，用于在页面加载时执行一些初始化操作： // script.js function pageLoad...转换为模块：当我们决定将 script.js 转换为模块后，需要在 HTML 文件中添加 type="module" 属性以告知浏览器这是一个模块文件： <!...; } window.onload = pageLoad; // 正常工作 模块的私有作用域：当代码转为模块后，pageLoad 函数不再属于全局作用域，而是属于模块内部，默认情况下外部无法直接访问...外部库加载问题 问题描述： 在普通 JavaScript 文件中，外部库（如 jQuery、Lodash 等）通常通过 标签直接加载，并默认附加到全局对象上。...模块化后，这些外部库可能不会自动成为全局对象的一部分，从而导致依赖于全局变量的代码无法正常工作。

    10310

    如何快速地开发一个chrome扩展插件

    在这些文件中，有一个manifest.json文件，它是扩展的描述文件，定义了扩展的名称和版本号等信息。...，你还可以添加其它属性，只要你的扩展需要的属性，你都可以在这里添加配置。... 在devtools.js文件里，我可以可以放入我们实际的扩展内容。...扩展的调试 在我们本地开发好扩展之后，我们可以通过本地浏览器进行调试。 首先，我们需要先进入扩展程序页面，打开开发者模式 然后，我们可以通过选择加载已解压的扩展程序加载我们的扩展。...，用到的知识都是基础的js，html，css，我们只需要知道一些和浏览器交互的属性和操作的api，就可以开发出一个属于自己的浏览器扩展。

    48520

    JavaScript基础

    基础 JS代码编写的三个位置： 编写到标签的指定属性中 我是按钮 <a href="javascript:alert.../编写<em>js</em>代码 将代码编写到<em>外部</em><em>的</em><em>js</em><em>文件</em>中，然后通过标签将其引入 script标签一旦用于引入<em>外部</em><em>文件</em>了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新<em>的</em>...求多个数中<em>的</em>最小值 Math.sqrt() 对一个数进行开方 DOM 页面<em>加载</em> <em>window.onload</em> = function () { } getElementById()：返回带有指定ID <em>的</em>元素...<em>读取</em>元素<em>的</em><em>属性</em>： 语法：元素.<em>属性</em>名 ele.name ele.id ele.value ele.className 修改元素<em>的</em><em>属性</em>： 语法：元素.<em>属性</em>名 = <em>属性</em>值 innerHTML...，当后代元素上<em>的</em>事件被触发<em>时</em>，将会导致其祖先元素上<em>的</em>同类事件也会触发。

    2K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券