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()方法会明显较快。
相关文档:
<html>
<head>
<title>测试输入字符</title>
<script language=javascript>
String.prototype.lenB =function(){
return this.replace(/[^\x00-\xff]/g,"**").length;
}
function a() ......
1.delete 运算符
对象删除一个属性,或数组中删除一个元素。将无用的内容删除以节省空间。
delete expression
example:
var person = new Object();
person.sex = "male";
alert(person.sex);
delete person.sex;
alert(person.sex);
2. ‘,' 运算符
var a = 2;
......
javascript的系统函数
1,encodeURI方法
返回对一个URI字符串编码中的结果,本质是UTF-8编码
eg:
var urlStr = encodeURI('http://fanli.qq.com/index.html?a=ddd&msg=中国');
alert(urlStr);
2, decodeUR ......
(1)下载ClientInfo.dll(在我的资源中可以下载http://download.csdn.net/source/2141582)
(2)使用new ActiveXObject("ClientInfo.HostInfo")调用ActiveX库
(3)GetAdapterMac(0)获取网卡MAC地址
使用示例:
<HTML>
<TITLE>ClientInfoX JavaScript Sample</TITLE>
<HEAD>
<script l ......