JavaScript动态添加DOM元素总结
这两天开始写古代地图的GIS网站,说白了就是用古代地图的内容效仿山寨一下谷歌地图。
JS这东西很久没写了,有些概念也很模糊,导致完成分块拖动加载的功能就花了好多时间。
主要问题是出在拖动时对元素内容的动态修改上,总结下。
通过JS脚本动态修改DOM元素内容通常有两种方法:
1. 通过DOM标准接口创建元素
var newNode = document.createElement("div");
mapDiv.insertBefore(newNode, mapDiv.getElementsByTagName("div")[0]);
2. 通过修改元素的innerHTML属性来改变内容
mapDiv.innerHtml += "<div class='piece' style='top:"+(i*256+parseInt(blockArray[0][0].style.top))+"px; left:"+(parseInt(blockArray[0][0].style.left)-256)+"px; background-image:url(\"assets/full_map/x="+x+"&y="+(y+i>15?y+i-16:y+i)+"&z=4.png\")'></div>";
两种方法都可以改变元素的内容,但是略有不同。
修改innerHTML属性的话,系统会对内容进行重构,重新生成DOM元素(新的地址),即使只是在最后追加了一个元素,而DOM API操作则不会。
举个例子,用数组保存DIV1中的所有元素(subDiv1, subDiv2, subDiv3.......)当修改innerHTML追加一个subDivn的时候,追加完的DOM元素与数组中的不再对应了,因为重新绘制了,元素有了新的地址(数组存的仅仅是地址)。而Div1.appendChild(subDivn)之后,数组与内部元素仍然保持对应关系。
速度上来说的话DOM接口的速度会相对较慢,而修改innerHTML或者是write()方法会明显较快。
相关文档:
中文编码:
function upload() {
var form = document.getElementById('topic');
if ($('uploadfile').value == "") {
alert("请选择文件!");
return;
}
$('uploadfile').value = escape($('uploadfile').value) ......
// JavaScript 脚本,解析型语言
//
var ABCD = function(){
var pub = {};
var pri = {};
pri.name = "myhere";
pri.age = 23;
//var ABCDE;
pub.setName = function( newName){
pri.name = newName;
};
// 这里 pub.getName 被赋值为一个函数,就是定义一个函数
// 这个函数并没有运行,这个函数 ......
JavaScript键盘事件侦听
在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。
......
CDATA 内部的所有东西都会被解析器忽略。
假如文本中包含了大量的 "<" 和 "&" 字符 - 就像编程代码中经常出现的情况一样 - 那么这个 XML 元素就可以被定义为一个 CDATA 部分。
CDATA 区段开始于 "<![CDATA[",结束于 "]]>":
<script type="text/javascript">
<![CDATA[
function compare(a,b ......