基于JavaScript创建动态Dom


Posted in Javascript onDecember 08, 2015

动态脚本

我们在页面中使用<script>元素就可以向页面中插入javascript代码。有两种方式:一种是通过src属性引用外部的JS文件,一种是用这个元素来包含一段js代码。所谓的动态脚本,就是指这个脚本在页面加载时不存在,在将来的某一个时刻通过修改DOM来动态的添加脚本。与操作html元素一样,创建动态脚本也有两种方式:插入外部文件和直接插入JavaScript代码。

动态加载的外部JavaScript代码可以立刻被执行,例如下面的代码:

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "demo.js";
document.body.appendChild(script);

基于JavaScript创建动态Dom

从上图的结果中可以看到,上面代码在<body>元素中生成了一个<script>节点:

<script type="text/javascript" src="demo.js"></script>

需要注意的是,在执行最后一行代码把<script>添加到页面之前,是不会下载外部脚本文件的。

另一种指定JavaScript代码的方式是行内方式,例如:

var script = document.createElement("script");
script.type = "text/javascript";
script.appendChild(document.createTextNode("function fn1(){alert('hello wolrd!')} fn1();"));
document.body.appendChild(script);

基于JavaScript创建动态Dom

上面的代码会在<body>元素中插入一段JavaScript代码:

<script type="text/javascript">
function fn1(){alert('hello wolrd!')} fn1();
</script>

执行上面的代码后会弹出提示框,显示“hello world!”文本。

在Firefox、Safari、Chrome和Opera浏览器中,上面操作的DOM代码是可以正常执行的。但是在旧版本的IE浏览器中,这些代码会发生错误。旧版本的IE浏览器将<script>元素看做特殊元素,不允许DOM访问它的子节点。不过,可以使用<script>元素的text属性来指定JavaScript代码,例如:

var script = document.createElement("script");
script.type = "text/javascript";
script.text("function fn1(){alert('hello wolrd!')} fn1();");
document.body.appendChild(script);

像上面这样修改代码之后,在IE、Firefox、Safari3.0、Chrome和Opera浏览器中都可以运行。Safari3.0之前的浏览器虽然不能正确的执行text属性,但是可以使用文本节点来指定代码。所以如果需要支持旧版本的浏览器,可以像下面这样书写代码:

var script = document.createElement("script");
script.type = "text/javascript";
var code = "function fn1(){alert('hello wolrd!')} fn1();";
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}

上面的代码首先尝试标准的DOM文本节点方法,因为除了旧版本的IE浏览器之外,其它浏览器都支持这种方式。如果这行代码抛出异常,那么说明是旧版本的IE浏览器,那就必须使用text属性。

我们可以将动态添加脚本的代码封装到一个函数中,通过不同的参数来动态加载不同的脚本。

function loadScript(code){
var script = document.createElement("script");
script.type = "text/javascript";
try{
script.appendChild(document.createTextNode(code));
}catch(e){
script.text = code;
}
document.body.appendChild(script);
}

要调用这个函数,可以像下面的样子:

loadScript("function fn1(){alert('hello wolrd!')}");

这种方式加载的代码会在全局作用域中执行,而且当脚本执行后立刻可用。实际上,这样执行代码与在全局作用域中把相同的字符串传递给eval()函数是一样的。

动态样式

通常可以将CSS样式包含到HTML页面中的元素有两个:一个是<link>元素,用于包含来自外部的文件;另一个是<style>元素,用于指定嵌入样式。与动态脚本类似,动态样式是指在页面加载时并不存在的样式。动态样式是在页面加载完成后动态添加到页面中的脚本。例如下面的例子:

var link = document.createElement("link");
link.rel = "stylesheet"
link.type = "text/css";
link.href = "styles.css";
var head = document.getElementsByTagName("head")[0];

基于JavaScript创建动态Dom

以上的代码在所有主流的浏览器中都可以正常运行。需要注意的是<link>元素要添加到<head>元素中,而不是<body>元素中,才能保证在所有浏览器中的行为一致。

另外要注意的是,加载外部样式文件的过程是异步的,也就是说加载样式和执行JavaScript代码的过程没有固定的次序。

另外一种定义样式的方式是使用<style>元素来包含嵌入式的CSS样式。例如下面的代码:

var style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode("body{background:#f00;}"));
var head = document.getElementsByTagName("head")[0];
head.appendChild(link);

上面的代码执行后可以在<head>元素中动态添加下面的节点:

<style type="text/css">
background:#f00;
</style>

以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行,在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将<style>元素看做一个特殊的节点,不允许访问它的子节点。要解决旧版本IE的问题,就是访问元素的styleSheet属性,该属性又有一个cssText属性,可以接受CSS代码。例如下面的代码:

var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode("body{background:#f00;}"));
}catch(e){
style.styleSheet.cssText = "body{background:#f00;}";
}

同样,我们也可以将动态添加样式的代码封装到一个函数中,通过不同的参数来动态加载不同的样式。

function loadStyle(code){
var style = document.createElement("style");
style.type = "text/css";
try{
style.appendChild(document.createTextNode(code));
}catch(e){
style.styleSheet.cssText = code;
}
var head = document.getElementsByTagName("head")[0];
head.appendChild(style); 
}

JavaScript对表格的操作

在JavaScript中,为了使我们能够方便的构建表格,HTML DOM为表格的<table>、<tbody>和<tr>提供了一些属性和方法。

表格的<table>元素的属性和方法有:

caption:保存<caption>元素的引用的指针。
tBodies:是一个<tbody>元素的HTMLCollection。
tFoot:保存<tfoot>元素的引用的指针。
tHead:保存<thead>元素的引用的指针。
rows:是表格中所有行的HTMLCollection。
createTHead():创建<thead>元素,将它放入表格中,并返回其引用。
createTFoot():创建<tfoot>元素,将它放入表格中,并返回其引用。
createCaption():创建<caption>元素,将它放入表格中,并返回其引用。
deleteTHead():删除<thead>元素。
deleteTFoot():删除<tfoot>元素
deleteCaption():删除<caption>元素
deleteRow(pos):删除指定位置的表格行。
insertRow(pos):向rows集合中指定位置插入一行。

表格的<tbody>元素的属性和方法有:

rows:保存着<tbody>元素中行的HTMLCollection。
deleteRow(pos):删除指定位置的表格行。
insertRow(pos):向rows集合中指定位置插入一行。

表格的<tr>元素的属性和方法有:

cells:保存着<tr>元素中单元格的HTMLCollection。
deleteCell(pos):删除指定位置的单元格。
insertCell(pos):向cells集合中指定位置插入一个单元格,并返回新插入单元格的引用。

使用上面的这些属性和方法,可以使我们轻松的使用JavaScript来创建表格,例如下面的代码:

//创建表格
vatabldocument.createElement("table");
table.borde1;
table.widt"100%";
//创建tbody
vatboddocument.createElement("tbody");
table.appendChild(tbody);
//创建第一个表格行
tbody.insertRow(0);
tbody.rows[0].insertCell(0);
tbody.rows[0].cells[0].appendChild(document.createTextNode("单元1-1"));
tbody.rows[0].insertCell(1);
tbody.rows[0].cells[1].appendChild(document.createTextNode("单元2-1"));
//创建第二个表格行
tbody.insertRow(1);
tbody.rows[1].insertCell(0);
tbody.rows[1].cells[0].appendChild(document.createTextNode("单元1-2"));
tbody.rows[1].insertCell(1);
tbody.rows[1].cells[1].appendChild(document.createTextNode("单元2-2"));
//将表格添加到文档中
document.body.appendChild(table)

使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候,通过<tbody>元素调用了insertCell()方法,并传入参数0(表示将插入的行放在什么位置上)。执行了这一行代码后,会自动创建一个表格行,并将它插入到<tbody>元素的0位置上,此时就可以通过tbody.rows[0]来引用新插入的行。

创建单元格的方式也与创建表格行的方式相同。通过<tr>元素来调用insertCell()方法,并传入要放置单元格的位置。然后就可以通过tbody.rows[0].cells[0]来引用新插入的单元格。

关于NodeList

理解NodeList和NamedNodeMap、HTMLCollection是从整体上理解DOM的关键所在。这3个集合都是动态的,也就是说,每当文档结构发生了变化,它们始终都会保存最新的信息。从本质上来说,所有的NodeList对象都是在访问DOM文档时实时运行的查询。例如下面的代码会导致死循环的出现:

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++){
var div = document.createElement("div");
document.body.appendChild(div);
}

上面的代码首先获取了所有<div>元素的HTMLCollection,保存在一个变量中。由于这个集合是动态的,所以只要有新的<div>被添加到页面中,新的<div>元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的,每次循环会在页面中添加一个<div>元素,length的值也会递增。这样i < divs.length条件就永远不会成立,导致死循环的发生。

如果我们要迭代一个NodeList,最好将length属性初始化为第二个变量,然后将迭代器和这个变量做比较,例如:

var divs = document.getElementsByTagName("div");
for(var i = 0,len = divs.length; i < len; i++){
var div = document.createElement("div");
document.body.appendChild(div);
}

由于len中保存了divs.length在循环开始时的一个快照,因此会避免死循环情况的发生。

更多示例:

function sAlert(str){
var msgw,msgh,bordercolor;
msgw=400;//提示窗口的宽度
msgh=100;//提示窗口的高度
titleheight=25 //提示窗口标题高度
bordercolor="#c51100";//提示窗口的边框颜色
titlecolor="#c51100";//提示窗口的标题颜色
var sWidth,sHeight;
sWidth=screen.width;
sHeight=screen.height;
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
bgObj.style.position="absolute";
bgObj.style.top="0";
bgObj.style.background="#cccccc";
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
bgObj.style.opacity="0.6";
bgObj.style.left="0";
bgObj.style.width=sWidth + "px";
bgObj.style.height=sHeight + "px";
bgObj.style.zIndex = "10000";
document.body.appendChild(bgObj);
var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.setAttribute("align","center");
msgObj.style.background="white";
msgObj.style.border="1px solid " + bordercolor;
msgObj.style.position = "absolute";
msgObj.style.left = "50%";
msgObj.style.top = "50%";
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
msgObj.style.marginLeft = "-225px" ;
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px";
msgObj.style.width = msgw + "px";
msgObj.style.height =msgh + "px";
msgObj.style.textAlign = "center";
msgObj.style.lineHeight ="25px";
msgObj.style.zIndex = "10001";
msgObj.style.position = "absolute";
var box=document.getElementById(str);
var title=document.createElement("h4");
title.setAttribute("id","msgTitle");
title.setAttribute("align","right");
title.style.margin="0";
title.style.padding="3px";
title.style.background=bordercolor;
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
title.style.opacity="0.75";
title.style.border="1px solid " + bordercolor;
title.style.height="18px";
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";
title.style.color="white";
title.style.cursor="pointer";
title.onmousedown=function(){startDrag(this,'msgDiv')};
title.onmouseup=function(){stopDrag(this,'msgDiv')};
title.onmousemove=function(){drag('msgDiv')};
var closer=document.createElement("div");
closer.onclick=function(){
CloseReturn();
document.body.appendChild(box);
box.style.display = "none";
document.body.removeChild(bgObj);
document.getElementById("msgDiv").removeChild(title);
document.body.removeChild(msgObj);
};
closer.innerHTML="确定";
document.body.appendChild(msgObj);
document.getElementById("msgDiv").appendChild(title);
document.getElementById("msgTitle").appendChild(closer);
box.style.display="inline";
document.getElementById("msgDiv").appendChild(box);
ShowReturn();
}

html dom树:

基于JavaScript创建动态Dom

Javascript 相关文章推荐
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
Mar 05 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 Javascript
JavaScript实现的简单烟花特效代码
Oct 20 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 #Javascript
JS判断当前页面是否在微信浏览器打开的方法
Dec 08 #Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 #Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 #Javascript
JS获取文件大小方法小结
Dec 08 #Javascript
js+ajax实现获取文件大小的方法
Dec 08 #Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 #Javascript
You might like
探讨:如何通过stats命令分析Memcached的内部状态
2013/06/14 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
PHP 7.4中使用预加载的方法详解
2019/07/08 PHP
jquery 常用操作方法
2010/01/28 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
javascript 原型链维护和继承详解
2014/11/26 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
有关文件上传 非ajax提交 得到后台数据问题
2016/10/12 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
javascript判断回文数详解及实现代码
2017/02/03 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
基于node简单实现RSA加解密的方法步骤
2019/03/21 Javascript
node中使用log4js4.x版本记录日志的方法
2019/08/20 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python动态网页批量爬取
2016/02/14 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
APIStar:一个专为Python3设计的API框架
2018/09/26 Python
python 使用pygame工具包实现贪吃蛇游戏(多彩版)
2019/10/30 Python
python数据预处理 :样本分布不均的解决(过采样和欠采样)
2020/02/29 Python
进程的查看和调度分别使用什么命令
2015/03/25 面试题
函授本科毕业自我鉴定
2013/10/09 职场文书
爱岗敬业演讲稿范文
2014/01/14 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
物业经理自我鉴定
2014/03/03 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
咖啡厅里的创业计划书
2019/08/21 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
Python list去重且保持原顺序不变的方法
2021/04/03 Python