这两天开始写古代地图的GIS网站,说白了就是用古代地图的内容效仿山寨一下谷歌地图。
JS这东西很久没写了,有些概念也很模糊,导致完成分块拖动加载的功能就花了好多时间。
主要问题是出在拖动时对元素内容的动态修改上,总结下。
通过JS脚本动态修改DOM元素内容通常有两种方法:
1. 通过DOM标准接口创建元素
2. 通过修改元素的innerHTML属性来改变内容
两种方法都可以改变元素的内容,但是略有不同。
修改innerHTML属性的话,系统会对内容进行重构,重新生成DOM元素(新的地址),即使只是在最后追加了一个元素,而DOM API操作则不会。
举个例子,用数组保存DIV1中的所有元素(subDiv1, subDiv2, subDiv3.......)当修改innerHTML追加一个subDivn的时候,追加完的DOM元素与数组中的不再对应了,因为重新绘制了,元素有了新的地址(数组存的仅仅是地址)。而Div1.appendChild(subDivn)之后,数组与内部元素仍然保持对应关系。
速度上来说的话DOM接口的速度会相对较慢,而修改innerHTML或者是write()方法会明显较快。