Cipta Dom dinamik berdasarkan teknik JavaScript_javascript

Skrip Dinamik

Kami boleh memasukkan kod javascript ke dalam halaman dengan menggunakan elemen Terdapat dua cara: satu ialah merujuk fail JS luaran melalui atribut src, dan satu lagi ialah menggunakan elemen ini untuk memasukkan sekeping kod js. Skrip dinamik yang dipanggil bermakna skrip tidak wujud apabila halaman dimuatkan Skrip boleh ditambah secara dinamik dengan mengubah suai DOM pada masa tertentu pada masa hadapan. Sama seperti memanipulasi elemen html, terdapat dua cara untuk mencipta skrip dinamik: memasukkan fail luaran dan memasukkan terus kod JavaScript.

Kod JavaScript luaran yang dimuatkan secara dinamik boleh dilaksanakan serta-merta, seperti kod berikut:

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

Seperti yang anda lihat daripada hasil di atas, kod di atas menghasilkan dalam elemen

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

Perlu diambil perhatian bahawa fail skrip luaran tidak akan dimuat turun sebelum baris terakhir kod dilaksanakan untuk menambah

Cara lain untuk menentukan kod JavaScript adalah sebaris, contohnya:

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

Kod di atas akan memasukkan sekeping kod JavaScript dalam elemen :

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

Selepas melaksanakan kod di atas, kotak gesaan akan muncul, memaparkan teks "hello world!".

Dalam pelayar Firefox, Safari, Chrome dan Opera, kod DOM yang dikendalikan di atas boleh dilaksanakan seperti biasa. Tetapi dalam versi pelayar IE yang lebih lama, kod ini akan menyebabkan ralat. Versi lama pelayar IE menganggap elemen sebagai elemen khas dan tidak membenarkan DOM mengakses nod anaknya. Walau bagaimanapun, kod JavaScript boleh ditentukan menggunakan atribut teks elemen

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

Selepas mengubah suai kod seperti di atas, ia boleh dijalankan dalam pelayar IE, Firefox, Safari3.0, Chrome dan Opera. Walaupun penyemak imbas sebelum Safari 3.0 tidak dapat melaksanakan atribut teks dengan betul, mereka boleh menggunakan nod teks untuk menentukan kod. Jadi jika anda perlu menyokong versi pelayar yang lebih lama, anda boleh menulis kod seperti ini:

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;
}

Kod di atas mula-mula mencuba kaedah nod teks DOM standard, kerana kecuali untuk versi lama IE, pelayar lain menyokong kaedah ini. Jika baris kod ini memberikan pengecualian, ini bermakna ia adalah versi lama IE, dan atribut teks mesti digunakan.

Kami boleh merangkum kod untuk menambahkan skrip secara dinamik ke dalam fungsi dan memuatkan skrip berbeza secara dinamik melalui parameter berbeza.

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);
} 

Untuk memanggil fungsi ini, anda boleh melakukan seperti berikut:

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

Kod yang dimuatkan dengan cara ini akan dilaksanakan dalam skop global dan akan tersedia serta-merta selepas skrip dilaksanakan. Malah, melaksanakan kod dengan cara ini adalah sama seperti menghantar rentetan yang sama kepada fungsi eval() dalam skop global.

Gaya Dinamik Biasanya terdapat dua elemen yang boleh memasukkan gaya CSS ke dalam halaman HTML: satu ialah elemen yang digunakan untuk memasukkan fail daripada sumber luar; tentukan gaya terbenam. Sama seperti skrip dinamik, gaya dinamik ialah gaya yang tidak wujud apabila halaman dimuatkan. Gaya dinamik ialah skrip yang ditambahkan secara dinamik pada halaman selepas halaman selesai dimuatkan. Contohnya, contoh berikut:

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

Kod di atas boleh berjalan seperti biasa dalam semua pelayar utama. Perlu diingat bahawa elemen mesti ditambahkan pada elemen

Perkara lain yang perlu diambil perhatian ialah proses memuatkan fail gaya luaran adalah tidak segerak, yang bermaksud tiada susunan tetap dalam proses memuatkan gaya dan melaksanakan kod JavaScript.

Cara lain untuk menentukan gaya ialah menggunakan elemen Contohnya, kod berikut:

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); 

Selepas kod di atas dilaksanakan, nod berikut boleh ditambah secara dinamik pada elemen

以上的代码可以在Firefox、Safari、Chrome和Opera浏览器中正常运行，在旧版本的IE浏览器中会报错。旧版本的IE浏览器会将

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为表格的

、和提供了一些属性和方法。

表格的

元素的属性和方法有：

caption：保存

元素的HTMLCollection。
tFoot：保存元素的引用的指针。
tHead：保存元素的引用的指针。
rows：是表格中所有行的HTMLCollection。
createTHead()：创建元素，将它放入表格中，并返回其引用。
createTFoot()：创建元素，将它放入表格中，并返回其引用。
createCaption()：创建元素。
deleteTFoot()：删除元素
deleteCaption()：删除元素的属性和方法有：

rows：保存着

元素中行的HTMLCollection。
deleteRow(pos)：删除指定位置的表格行。
insertRow(pos)：向rows集合中指定位置插入一行。

表格的

元素的属性和方法有：

cells：保存着

元素中单元格的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) 

使用上面的代码可以动态的在页面中创建一个表格。其中在创建表格行的时候，通过

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

创建单元格的方式也与创建表格行的方式相同。通过

元素来调用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);
} 

上面的代码首先获取了所有

元素的HTMLCollection，保存在一个变量中。由于这个集合是动态的，所以只要有新的

被添加到页面中，新的

元素就会被添加到这个集合中。这样导致的后果是div.length值是不断变化的，每次循环会在页面中添加一个

元素，length的值也会递增。这样i

如果我们要迭代一个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();
}

arbre dom html :

元素的引用的指针。
tBodies：是一个

元素，将它放入表格中，并返回其引用。
deleteTHead()：删除

元素
deleteRow(pos)：删除指定位置的表格行。
insertRow(pos)：向rows集合中指定位置插入一行。

表格的