如何在HTML页面中预先自动执行js脚本

2022年12月18日前端开发评论72,531字数 549阅读1分49秒阅读模式

最近面试遇到一个很有趣的问题,给我一段json数据,让我把它们显示到HTML页面中,并可以对数据进行编辑并更新数据源。

问题很简单,但是我对JS不熟啊,于是就尴尬了,我该如何实现把变量数据预填到输入框中呢?

网上大部分案例是通过vue实现的,要么是通过点击按钮实现传输变量,可是要是用原生JS该怎么办呢?

其实答案也简单,就是用window.onload,在DOM元素加载完成后,自动去执行脚本函数,把数据变量插入到输入框中即可。

首先了解下DOM:

DOM加载过程

网页文档加载都是按顺序执行的。

一般浏览器渲染操作顺序大致是一下几个步骤:

  1. 解析HTML结构
  1. 加载外部脚本和样式表文件
  1. 解析并执行脚本代码
  1. 构造HTML DOM模型
  1. 加载图片等外部文件
  1. 页面加载完毕

从以上顺序可以看出,js等脚本会在DOM文档构造之前执行,这样js就无法访问DOM文档对象模型。

所以一般把可执行脚本放在页面初始化事件处理函数中,这样能确保文档加载完毕后再执行脚本。

所以我们一般这样写: window.onload = function(){//执行脚本}

window.onload表示页面加载完了后(包括dom和js)

Vida_2022-12-18_09-56-55.jpg

通过上面这段自动执行函数脚本,就可以把数据变量预先插入到HTML页面中了。

可以说超级简单,但是要是不会,还真的挺难搞定这个任务的。

不用JS,纯CSS实现导航栏Tab切换效果 前端开发

不用JS,纯CSS实现导航栏Tab切换效果

CSS 的强大之处有的时候超乎我们的想象,Tab切换,常规而言确实需要用到一定的脚本才能实现。下面看看如何使用纯CSS实现导航栏Tab切换效果 不用 Javascript,使用纯 CSS 方案,实现类...
2024最新 Vue.js 的一般性学习路径 前端开发

2024最新 Vue.js 的一般性学习路径

可以根据自己的经验水平和学习方式进行调整。 初学者: 了解前端基础: 熟悉HTML、CSS和JavaScript。 了解基本的编程概念和Web开发原理。 学习Vue.js核心概念: 官方文档:阅读Vu...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定