基于JavaScript创建动态Dom

2024-10-23 18:00:13

动态脚本

我们在页面中使用<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);

从上图的结果中可以看到，上面代码在<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);

上面的代码会在<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];

以上的代码在所有主流的浏览器中都可以正常运行。需要注意的是<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树：

JS实现动态添加DOM节点和事件的方法示例

本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
js操作DOM--添加、删除节点的简单实例

js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""
通过JS动态创建一个html DOM元素并显示

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /**//* 动态创建DOM元素的相关函数支持 www.jcodecraeer.com */ /**//* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; } /**//* 获取某个
JavaScript DOM节点添加示例

<!DOCTYPE html> <html> <body> <div id="div1"> <p id="p1">这是一个段落.</p> <p id="p2">这是另一个段落.</p> </div> <script> var para=document.createElement("h1"); var nod
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）

http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构复制代码代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<
javascript将DOM节点添加到文档的方法实例分析

本文实例讲述了javascript将DOM节点添加到文档的方法.分享给大家供大家参考.具体如下: 这里对两种方法进行了比较:第一种:先创建所有节点,再添加到文档方式的运行时长:第二种:先向文档添加一个空容器,然后每创建一个节点,再添加到容器中方式的运行时长,从测试来看,第二种方法优于第一种! 运行效果如下图所示: 具体代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
javascript DOM操作之动态删除TABLE多行

DOM动态删除TABLE多行 function $(objId){ return document.getElementById(objId); } function del_tbl(tblN,ckN){ var ck = document.getElementsByName(ckN); var tab = $(tblN); var rowIndex; for(var i=0;i 2 3 第一行 1 第二行 2 第三行 3 第四行 4 第五行 5 [Ctrl+A 全选注:如需引入外部Js需刷新
javascript实现dom动态创建省市纵向列表菜单的方法

本文实例讲述了javascript实现dom动态创建省市纵向列表菜单的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm
JS动态创建DOM元素的方法

本文实例讲述了JS动态创建DOM元素的方法.分享给大家供大家参考.具体如下: 近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: /* 动态创建DOM元素的相关函数支持 */ /* 获取以某个元素的DOM对象 @obj 该元素的ID字符串 */ function getElement(obj) { return typeof obj=='string'?document.getElementById(obj):obj; }
javascript转换字符串为dom对象（字符串动态创建dom）

前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样
JavaScript与DOM组合动态创建表格实例

这篇文章简单介绍了DOM 1.0一些基本而强大的方法以及如何在JavaScript中使用它们.你可以学到如何动态地创建.获取.控制和删除HTML元素.这些DOM方法同样适用于XML.所有全面支持DOM 1.0的浏览器都能很好地运行本篇的实例,比如IE5,Firefox等. 这篇文章通过实例代码介绍DOM.请从尝试下面的HTML例子开始.它使用DOM 1的方法由JavaScript动态创建一个HTML表格.它创建一个由四个包含文本内容的单元格组成的小表格.单元格的文字内容是:"单元格是第y行第x列

基于JavaScript创建动态Dom

相关推荐

随机推荐