Cipta Dom dinamik berdasarkan teknik 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);

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

Kod di atas akan memasukkan sekeping kod JavaScript dalam elemen :

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

Untuk memanggil fungsi ini, anda boleh melakukan seperti berikut:

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

Salin selepas log masuk

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Cipta Dom dinamik berdasarkan teknik JavaScript_javascript