基于JavaScript创建动态Dom

动态脚本

我们可以通过使用页面中的脚本元素将javascript代码插入到页面中。有两种方法：一种是通过src属性引用外部js文件，另一种是使用这个元素包含一段JS代码。所谓动态脚本，就是页面加载时脚本不存在，可以在未来某个时间通过修改DOM动态添加脚本。与html元素一样，有两种方法可以创建动态脚本：插入外部文件和直接插入JavaScript代码。

动态加载的外部JavaScript代码可以立即执行，例如以下代码：

var script=document . createelement(' script ')；script . type=' text/JavaScript '；script . src=' demo . js '；document.body.appendChild(脚本)；

从上面的结果可以看出，上面的代码在body元素中生成了一个脚本节点：

脚本类型=' text/JavaScript ' src=' http : demo . js '/脚本需要注意的是，在执行最后一行代码将脚本添加到页面之前，不会下载外部脚本文件。

另一种指定JavaScript代码的方法是内联，例如：

var script=document . createelement(' script ')；script . type=' text/JavaScript '；script . appendchild(document . createtextnode(' function fn1(){ alert(' hello wolrd！)} fn1()；'));document.body.appendChild(脚本)；

上面的代码在主体元素中插入了一个JavaScript代码：

脚本类型=' text/JavaScript ' function fn1(){ alert(' hello wolrd！)} fn1()；/script执行上述代码后会弹出提示框，显示“hello world！”。文字。

在火狐、Safari、Chrome和Opera浏览器中，上述操作的DOM代码可以正常执行。但是，在旧版本的IE浏览器中，这些代码会出现错误。在旧版本的IE浏览器中，脚本元素被视为特殊元素，不允许DOM访问其子节点。但是，您可以使用script元素的text属性来指定JavaScript代码，例如：

var script=document . createelement(' script ')；script . type=' text/JavaScript '；script . text(' function fn1(){ alert(' hello wolrd！)} fn1()；');document.body.appendChild(脚本)；如上修改代码后，可以在IE、火狐、Safari3.0、Chrome、Opera等浏览器中运行。Safari3.0之前的浏览器无法正确执行文本属性，但可以使用文本节点指定代码。因此，如果您需要支持较旧的浏览器，您可以编写如下代码：

var script=document . createelement(' script ')；script . type=' text/JavaScript '；var code=' function fn1(){ alert(' hello wolrd！)} fn1()；'；请尝试{ script . appendchild(document . createtextnode(code))；} catch(e){ script . text=code；}上面的代码首先尝试了标准的DOM文本节点方法，因为除了旧版本IE之外的其他浏览器都支持这种方法。如果这一行代码抛出异常，说明是旧版本的IE浏览器，所以必须使用text属性。

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

函数loadScript(代码){ var script=document . createelement(' script ')；script . type=' text/JavaScript '；请尝试{ script . appendchild(document . createtextnode(code))；} catch(e){ script . text=code；}document.body.appendChild(脚本)；}要调用此函数，您可以如下所示：

loadScript(' function fn1(){ alert(' hello wolrd！')}');以这种方式加载的代码将在全局范围内执行，并且在脚本执行后立即可用。实际上，以这种方式执行代码与将相同的字符串传递给全局范围内的eval()函数是一样的。

动态风格

一般在HTML页面中可以包含CSS样式的元素有两种：一种是link元素，用于包含来自外部的文件；另一个是样式元素，它指定嵌入的样式。像动态脚本一样，动态样式是页面加载时不存在的样式。动态样式是在页面加载后动态添加到页面的脚本。例如，以下示例：

var link=document . create element(' link ')；link.rel='样式表' link . type=' text/CSS '；link . href=' style . CSS '；var head=document . getelementsbytagname(' head ')[0]；

以上代码可以在所有主流浏览器中正常运行。请注意，链接元素应该添加到head元素，而不是body元素，以确保所有浏览器中的行为一致。

另外需要注意的是，加载外部样式文件的过程是异步的，这意味着加载样式和执行JavaScript代码之间没有固定的顺序。

定义样式的另一种方法是使用样式元素来包含嵌入的CSS样式。例如，以下代码：

var style=document . create element(' style ')；style . type=' text/CSS '；style . appendchild(document . createtextnode(' body { background : # f00；}'));var head=document . getelementsbytagname(' head ')[0]；head.appendChild(链接)；执行上述代码后，可以在head元素中动态添加以下节点：

style type=' text/CSS ' background : # f00；上面的代码/style可以在火狐、Safari、Chrome和Opera浏览器中正常运行，在旧版本的IE浏览器中会报错。在旧版本的IE浏览器中，样式元素被视为一个特殊节点，其子节点不允许访问。解决旧版本IE的问题，就是访问元素的样式表属性，它有一个cssText属性，可以接受CSS代码。例如，以下代码：

var style=document . create element(' style ')；style . type=' text/CSS '；请尝试{ style . appendchild(document . createtextnode(' body { background : # f00；}'));}catch(e){style .样式表. CSS text=' body { background : # f00；}';}同样，我们可以将动态添加样式的代码封装到一个函数中，通过不同的参数动态加载不同的样式。

函数loadStyle(代码){ var style=document . create element(' style ')；style . type=' text/CSS '；请尝试{ style . appendchild(document . createtextnode(code))；}catch(e){style .样式表.=code} var head=document . getelementsbytagname(' head ')[0]；head.appendChild(样式)；}对表的JavaScript操作。

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

的表元素的属性和方法是：

标题：保存对标题元素引用的指针。Tbody:是tbody元素的HTMl集合。tfoot:保存对TFoot元素引用的指针。一个指针，保存着对该元素的引用。Rows:是表中所有行的HTMLCollection。CreateTHead():创建ad元素，将其放入表中，并返回其引用。CreateTFoot():创建一个TFoot元素，将其放入表中，并返回其引用。CreateCaption():创建一个标题元素，将它放在一个表中，并返回它的引用。Delete ad():删除ad元素。DeleteTFoot (): delete tfoot元素deleteCaption (): delete caption元素deleteRow(pos):删除指定位置的表行。插入行：将一行插入行集合中的指定位置。

表的tbody元素的属性和方法有：

Rows:保存tbody元素中的行的HTMLCollection。DeleteRow(pos):删除指定位置的表格行。插入行：将一行插入行集合中的指定位置。

表中tr元素的属性和方法如下：

单元格：保存tr元素中单元格的HTMLCollection。DeleteCell(pos):删除指定位置的单元格。InsertCell(pos):将单元格插入单元格集合中的指定位置，并返回新插入单元格的引用。

使用上面的这些属性和方法，我们可以很容易地使用JavaScript创建表，比如下面的代码：

//创建table vatabledocument . create element(' table ')；table . border 1；table . widt ' 100% '；//创建tbodyvatbodocument . create element(' t body ')；table . appendchild(t body)；//创建第一个表行t body . insertrow(0)；tbody.rows[0]。insert cell(0)；tby . row[0]。单元格[0]。append child(document . createtextnode(' unit 1-1 '))；tbody.rows[0]。insert cell(1)；tby . row[0]。单元格[1]。append child(document . createtextnode(' unit 2-1 '))；//创建第二个表行t body . insertrow(1)；tbody.rows[1]。insert cell(0)；tby . row[1]。单元格[0]。append child(document . createtextnode(' unit 1-2 '))；tbody.rows[1]。insert cell(1)；tby . row[1]。单元格[1]。append child(document . createtextnode(' unit 2-2 '))；//在document . body . appendchild(table)中添加一个表使用上面的代码在页面中动态创建一个表。创建表行时，通过tbody元素调用insertCell()方法，并传入参数0(指示插入行的位置)。执行完这一行代码后，会自动创建一个表行，并插入到tbody元素的0位置，新插入的行可以被tbody.rows[0]引用。

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

关于节点列表

理解NodeList，NamedNodeMap HTMLCollection是整体理解DOM的关键。这三个集合都是动态的，也就是说，每当文档结构发生变化时，它们总是保持最新的信息。本质上，所有节点列表对象都是在访问DOM文档时实时运行的查询。例如，以下代码将导致无限循环：

var divs=document . getelementsbytagname(' div ')；for(var I=0；i divs.lengthI){ var div=document . create element(' 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=div s . length；我透镜；I){ var div=document . create element(' div ')；document . body . appendchild(div)；}因为len在循环开始时保存了divs.length的快照，所以可以避免无限循环的发生。

更多示例：

函数sAlert(str){var msgw，msgh，bordercolormsgw=400//提示窗口的宽度msgh=100/提示窗口的高度titleheight=25 //提示窗口标题高度bordercolor=' # c51100//提示窗口的边框颜色titlecolor=' # c51100//提示窗口的标题颜色var sWidth，sHeightsWidth=屏幕宽度；sHeight=screen . height var bgObj=document。创建元素(' div ')；bgObj.setAttribute('id '，' bgDiv ')；bgObj.style.position='绝对；bgobj。风格。top=' 0bgobj。风格。背景=' # ccccccbgobj。风格。filter=' progid : maximagettransform .微软。阿尔法(样式=3,不透明度=25,完成度=75 ';bgObj.style。不透明度=' 0.6 ';bgobj。风格。left=' 0bgobj。风格。宽度=sWidth ' pxbgobj。风格。高度=Sheight ' pxbgobj。风格。zindex=' 10000文件。尸体。append child(bgObj)；var msgObj=文档。创建元素(' div ')msgObj。setattribute(' id '，' MSgdiv ')；msgObj.setAttribute('align '，' center ')；msgobj。风格。背景='白色'；msgobj。风格。边框=' 1px纯色'边框颜色；msgObj.style.position='绝对；msgobj。风格。左=' 50% '；msgobj。风格。top=' 50% '；msgobj。风格。font=' 12px/1.6em Verdana，Geneva，Arial，Helvetica，无衬线；msgobj。风格。左边距='-225 px '；msgobj。风格。margintop=-75文档。文档元素。滚动顶部“px”；msgobj。风格。width=msgw ' pxmsgobj。风格。高度=msgh ' pxmsgobj。风格。textalign=“居中”；msgobj。风格。行高=' 25pxmsgobj。风格。zindex=' 10001msgObj.style.position='绝对；var box=文档。getelementbyid(str)；var title=文档。创建元素(“H4”)；title.setAttribute('id '，' msgTitle ')；title.setAttribute('align '，' right ')；标题。风格。边距=' 0 '；标题。风格。填充=' 3px标题。风格。背景=边框颜色；标题。风格。filter=' progid : maximagettransform .微软。Alpha(startX=20，startY=20，finishX=100，finishY=100，style=1，不透明度=75，完成能力=100);标题.风格。不透明度=' 0.75 ';标题。风格。边框=' 1px纯色'边框颜色；标题。风格。高度=' 18pxHelvetica，阿里亚尔，无衬线；标题。风格。颜色='白色'；标题。风格。光标='指针'；标题。onmousedown=function(){ startDragd(this，' MSgdiv ')}；标题。onmouseup=function(){ StOpDraw(this，' MSgdiv ')}；标题。onmousemove=function(){ drag(' MSgdiv ')}；var closer=文档。创建元素(' div ')；靠近点。onclick=function(){ CloseReturn()；document.body.appendChild(框);盒子。风格。显示='无'；文件。尸体。移除子对象(bgObj)；文件。getelementbyid(' msgDiv ').removeChild(标题);文件。尸体。移除子级(msgObj)；};'' closer.innerHTML='确定；文件。尸体。append child(msgObj)；文件。getelementbyid(' msgDiv ').appendChild(标题);文件。getelementbyid(' msgTitle ').appendChild(更近);盒子。风格。display=' inline文件。getelementbyid(' msgDiv ').appendChild(方框);显示返回()；}html dom树：