DOM编程初探

DOM编程小结（一）

这篇博客将会介绍以下内容：

• 我要用DOM编程解决的问题
• DOM编程API的整理
• 小问题
• 几点无关的忠告

---

问题

想象一下你的网站非常庞大（事实就是这样），完全加载完需要很长的时间，如果等待加载完用户才能看到网页。
显然，用户体验和加载时间成反比，加载时间和网页大小成正比，和网速大小成反比。
我们的网页越大，网速越慢，用户体验就会越差，直接的后果就是用户丢失。
当然，数据量小，网速快的情况下并不明显。确实，在第一个版本中，我的网站就是一次性加载完，再呈现给用户。

解决思路

边下载边显示，这就要求后台的脚本中显式调用前台的js函数。

随之而来的问题

再原来的版本中，后台给前台的就是约定好格式的字符串数据，前台统一处理成对象，进行分类（各种各样的分类），排序（各种各样的排序函数），然后统一变换成字符串写入。
那么现在要改版，考虑如何设计被后台数据调用的函数呢？

DOM编程API的整理

函数名	功能
appendchild()	在某元素之后加入元素
insertBefore()	在某元素之前加入元素
innerHTML	改变或取得某元素的内部html代码，可以用来将html代码转换成DOM结点。因为某些纯原生js写结点十分啰嗦

小问题

因为我不仅要边下载边插入，在插入的时候可能还要选择一个合适的位置，或者说在插入结束后进行一次排序。但是没想到的是，document.getElements()返回的内容虽然是[]，但是和原生的[]又不一样，好像是阉割掉了许多功能，只能是手动放到[]中，然后再进行数组相关操作。

无关的忠告

知识的海洋那么大，我们只需要选择合适我们的，就可以了。着眼于眼前的问题。

1.操作起来的话就是，首先想好接下来需要做什么功能，判断接下来的功能用哪些API可以实现，这些API我之前没有用过，起码要先测试一下吧。所以，编写测试环境是第一步，测试时熟悉陌生的API。
2.重构之前的代码，改的差不多了，不知道下一步干啥了，就该考虑把项目跑起来了。