最近面试遇到一个很有趣的问题，给我一段json数据，让我把它们显示到HTML页面中，并可以对数据进行编辑并更新数据源。
问题很简单，但是我对JS不熟啊，于是就尴尬了，我该如何实现把变量数据预填到输入框中呢？
网上大部分案例是通过vue实现的，要么是通过点击按钮实现传输变量，可是要是用原生JS该怎么办呢？
其实答案也简单，就是用window.onload，在DOM元素加载完成后，自动去执行脚本函数，把数据变量插入到输入框中即可。
首先了解下DOM：
DOM加载过程
网页文档加载都是按顺序执行的。
一般浏览器渲染操作顺序大致是一下几个步骤：
- 解析HTML结构
- 加载外部脚本和样式表文件
- 解析并执行脚本代码
- 构造HTML DOM模型
- 加载图片等外部文件
- 页面加载完毕
从以上顺序可以看出，js等脚本会在DOM文档构造之前执行，这样js就无法访问DOM文档对象模型。
所以一般把可执行脚本放在页面初始化事件处理函数中，这样能确保文档加载完毕后再执行脚本。
所以我们一般这样写： window.onload = function(){//执行脚本}
window.onload表示页面加载完了后（包括dom和js）
通过上面这段自动执行函数脚本，就可以把数据变量预先插入到HTML页面中了。
可以说超级简单，但是要是不会，还真的挺难搞定这个任务的。
