加载外部js文件window.onload时无法读取null的属性"querySelectorAll“ - 腾讯云开发者社区

文章/答案/技术大牛

发布

HTML解析之DOMContentLoaded和onload

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

2K2 0

JAVA保姆式上手教程之免费JAVA 案例day02-js高级

它表示的浏览器窗口 window对象是js中的顶层对象，所有的js函数，变量等都是window对象成员甚至Dom的document也是window对象的属性之一 frameset 可以把window页面进行分割...并且在浏览器加载html文件中的所有标签时，把html文件中的所有标签页加载成不同的标签对象，以及标签中的属性，也加载成属性对象，标签中的文本也加载成文本对象。...浏览器在加载某个标签时，标签的文本数据，被加载成当前标签的一个子标签。当我们把一个html文件加载完成之后，他们就得到这个html文件中的所有标签，属性，文本对象。...可以使用js技术结合Document对象，对html文件中的所有标签，进行各种操作。...在浏览器把html文件加载完成之后，标签被称作标签对象（元素节点），标签中的文件称为文本节点（文本对象），标签的属性称为属性节点（属性对象）。

3601 0

您找到你想要的搜索结果了吗？

是的

没有找到

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

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

1.5K3 0

前端之JavaScript

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

2K4 0

BOM概述

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

1.8K1 0

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

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

1.5K5 0

JS懒加载实现

原理服务端渲染后的图片地址并不立即赋给img标签的src属性，而是赋给自定义属性如data-src 当img标签呈现在当前浏览器可视窗口时，动态设置img标签的src属性相关API document.documentElement.clientHeight...offsetTop-scroolTop<clientHeight 代码实现 let imgs = document.querySelectorAll('img'); function lazyImg(...images[i].src = images[i].getAttribute("data-src") } } } } //窗口滚动时执行懒加载...window.onload = window.onscroll = function(){ lazyImg(imgs) } 上述代码已经实现了一个基本的懒加载，但是存在性能问题我们使用防抖函数优化一下...== null) clearTimeout(timeout); timeout = setTimeout(fn, delay); } } window.onload

10.9K3 0

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.8K6 0

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

14.5K1 0

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

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

9432 0

【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文件夹引入。

1.2K1 0

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

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

2.4K1 0

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.4K3 0

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

7262 0

带你搞懂图片懒加载

懒加载原理一张图片就是一个标签，浏览器是否发起请求图片是根据的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++){ //图片距离顶部的距离大于可视区域和滚动区域之和时懒加载

9791 0

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

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

1.3K3 0

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

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

1.1K2 0

JS ajax 例子「建议收藏」

用 js ， jQuery 编写 ajax 的样式，三种写法，例子： //用 js 原生写法 function sendGet(url){ xhr.onreadystatechange =function...：将项目放在 TomCat 下的 root 文件夹下，浏览器输入 localhost:8080/history.html 即可运行。...= function(){ //页面加载时，替换 history 的状态 history.replaceState(null,"首页","history.html?...id="+ src.target.title); //取消所有td元素的背景色 var tdList = document.querySelectorAll("td"); for...= history.state["cellTitle"]; var tdList = document.querySelectorAll("td"); //取消所有单元格的背景色，只设置被选中的单元格的背景色

4.3K4 0

从零开始学 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。...，这两个属性和方法作用相同，并且都保存跳转前的地址（在浏览器中可以点击返回按钮）。

9523 0

JavaScript基础

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

2.5K2 0

点击加载更多

HTML解析之DOMContentLoaded和onload

JAVA保姆式上手教程之免费JAVA 案例day02-js高级

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

前端之JavaScript

BOM概述

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

JS懒加载实现

Js框架设计之DomReady

JS事件篇

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

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

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

javascript-继承之jquery

1-Electron基础

带你搞懂图片懒加载

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

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

JS ajax 例子「建议收藏」

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

JavaScript基础

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐