Setelah memahami kerangka kerja dan node DOM (model objek teks), yang paling penting adalah menggunakan node ini untuk memproses halaman web HTML
Untuk simpul simpul DOM, ada serangkaian properti dan metode untuk digunakan. Umumnya digunakan adalah tabel berikut.
Ditingkatkan: http://www.w3school.com.cn/xmldom/dom_element.asp
1. Node akses
BOM menyediakan beberapa metode batas untuk mengakses node. Umumnya digunakan adalah GetElementsByTagname () dan GetElementById ()
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
function searchDom () {
var oli = document.geteLementsbyTagname ("li");
var j = oli.length;
var j2 = oli [5] .tagname;
var j3 = oli [0] .Childnodes [0] .nodevalue;
document.write (j+"<br>"+j2+"<br>"+j3+"<br>");
}
</script>
<body>
<body onload = "SearchDom ()">
<Div id- "in"> </div>
<ul> Bahasa klien
<li> html </li>
<li> JavaScript </li>
<li> CSS </li>
</ul>
<ul> Bahasa sisi server
<li> Asp.net </li>
<li> jsp </li>
<li> PHP </li>
</ul>
</body>
document.geteLementById ()
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
fungsi findId () {
var j4 = oli2.tagname;
Document.write (J4);
}
var oli2 = document.geteLementById ("inn");
oli2.onClick = findId;
}
</script>
<li id = "inn"> php </li>
Salinan kode adalah sebagai berikut:
<Html>
<body id = "myid">
<div> </div>
<type skrip = "Teks/JavaScript">
x = document.getElementsbyTagname ('div') [0];
Document.write ("Div CSS Class:" + x.classname);
document.write ("<br />");
document.write ("Cara alternatif:");
document.write (document.geteLementById ('myid'). className);
</script>
</body>
</html>
// Id dapatkan className
2. Deteksi Jenis Node
Jenis simpul dapat dideteksi melalui nodetype node, dan satu parameter mengembalikan 12 nilai integer.
Format ekspresi seperti document.nodetype
Yang benar -benar berguna adalah tiga jenis yang disebutkan oleh model node dalam model DOM (I)
Node elemen, node teks dan node atribut
1. Node elemen mengembalikan nilai node elemen adalah 1
2. Node atribut mengembalikan nilai node atribut adalah 2
3. Nilai pengembalian simpul teks adalah 3
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
window.onload = function () {
fungsi findId () {
var j5 = oli2.nodetype;
document.write ("nodetype:" + j5 + "<br>");
}
var oli2 = document.geteLementById ("inn");
oli2.onClick = findId;
}
</script>
<li id = "inn"> css </li>
Return: Nodetype: 1
Ini berarti bahwa beberapa node dapat diproses secara terpisah, yang sangat praktis saat mencari node. Itu akan dibahas nanti.
3. Gunakan hubungan ayah-anak-saudara untuk menemukan node
Pada simpul akses bagian pertama, gunakan atribut node Childnodes untuk mengakses simpul teks yang terkandung dalam node elemen.
Bagian ini menggunakan hubungan ayah-anak-saudara lelaki node untuk menemukan node
*Gunakan atribut haschildnodes dan childnodes untuk mendapatkan semua node yang terkandung dalam node ini
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<bahasa skrip = "javascript">
window.onload = function mydomispector () {
var oul = document.getElementById ("mylist"); // Dapatkan tag <ul>
var domstring = "";
if (oul.haschildnodes ()) {// menilai apakah ada node anak
var och = oul.childnodes;
untuk (var i = 0; i <och.length; i ++) // cari satu per satu
DomString + = och [i] .nodename + "<br>";
}
document.write (domString);
}
</script>
</head>
<body>
<ul id = "mylist">
<li> Rusuk asam manis dan manis </li>
<li> Kandang Daging Babi Kukus </li>
<li> Ikan Kimchi </li>
<li> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</ul>
</body>
4.Dom mendapatkan simpul induk dari node
Salinan kode adalah sebagai berikut:
<bahasa skrip = "javascript">
window.onload = function () {
var food = document.geteLementById ("mydarfood");
Document.write (food.parentnode.tagname)
}
</script>
</head>
<body>
<ul>
<li> Rusuk asam manis dan manis </li>
<li> Kandang Daging Babi Kukus </li>
<li> Ikan Kimchi </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</ul>
// kembali ke UL
Menggunakan simpul induk, simpul induk dari simpul yang ditentukan berhasil diperoleh
5. Gunakan properti ParentNode
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<bahasa skrip = "javascript">
window.onload = function () {
var food = document.geteLementById ("mydarfood");
var parentelm = food.parentnode;
while (parentelm.classname! = "warna -warni" && parentelm! = document.body)
parentelM = parentelm.parentnode; // lihat ke atas
Document.write ("Tagename:"+Parentelm.Tagname+"<br>");
document.write ("claaname:"+parentelm.classname+"<br>");
document.write ("typeof:"+typeof (makanan)+"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<span>
<li> Rusuk asam manis dan manis </li>
<li> Kandang Daging Babi Kukus </li>
<li> Ikan Kimchi </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body> <br> // output <br> // tagename: div <br> claaname: warna -warni <br> typeof: objek
Mulailah dengan simpul anak dan cari simpul induk ke atas sampai nama kelas node "berwarna -warni"
6. Persaudaraan Dom
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<bahasa skrip = "javascript">
window.onload = function () {
var foods = document.geteLementById ("mydarfood");
var nextf = foods.nextsibling;
alert ("NextSibling:" +nextf.tagname +"<br>");
}
</script>
</head>
<body>
<div>
<ul>
<span>
<li> Rusuk asam manis dan manis </li>
<li> Kandang Daging Babi Kukus </li>
<li> Ikan Kimchi </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
<li> Mapo Tofu </li>
</span>
</ul>
</div>
</body>
Tampak bagus untuk mengakses node saudara menggunakan properti NextSibling dan sebelumnya.
Tapi itu hanya berfungsi untuk IE browser
Agar memiliki kompatibilitas yang baik dengan kode, nodetype harus digunakan untuk membuat penilaian
Berikut ini adalah kompatibilitas:
Salinan kode adalah sebagai berikut:
<head>
<title> saudara kandung </iteme>
<bahasa skrip = "javascript">
function nextSib (node) {
var Templast = node.parentnode.LastChild;
// menilai apakah itu simpul terakhir, jika demikian, kembalikan nol
if (node == templast)
kembali nol;
var tempobj = node.nextsibling;
// Cari node saudara berikutnya satu per satu sampai node elemen ditemukan
while (tempobj.nodetype! = 1 && tempobj.nextsibling! = null)
tempobj = tempobj.nextsibling;
// operator tiga poin, jika itu adalah node elemen, ia mengembalikan simpul itu sendiri, jika tidak ia mengembalikan nol
return (tempobj.nodetype == 1)? Tempobj: null;
}
fungsi prevsib (node) {
var tempfirst = node.parentnode.firstchild;
// menilai apakah itu simpul pertama, jika demikian, kembalikan nol
if (node == Tempfirst)
kembali nol;
var tempobj = node.previoussibling;
// Cari node saudara sebelumnya satu per satu sampai node elemen ditemukan
while (tempobj.nodetype! = 1 && tempobj.previoussibling! = null)
tempobj = tempobj.previoussibling;
return (tempobj.nodetype == 1)? Tempobj: null;
}
fungsi mydomispector () {
var myitem = document.geteLementById ("mydearfood");
// Dapatkan Node Elemen Berikutnya
var nextListitem = nextSib (myItem);
// Dapatkan elemen sebelumnya Node Brother
var prelistitem = prevSib (myItem);
peringatan ("Item Terakhir:" + ((NextListitem! = Null)? NextListitem.FirstChild.nodevalue: null) + "prelistitem:" + ((prelistitem! = null)? prelistitem.firstchild.nodevalue: null));
}
</script>
</head>
<body onload = "mydomispector ()">
<ul>
<li> Rusuk asam manis dan manis </li>
<li> Kandang Daging Babi Kukus </li>
<li> Ikan Kimchi </li>
<li id = "mydearfood"> Chestnut Roast Chicken </li>
<li> Mapo Tofu </li>
</ul>
</body>
7. Setel properti node
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<bahasa skrip = "javascript">
window.onload = function () {
// Dapatkan gambar
var imgdatabe = document.getElementsbyTagname ("img") [0];
// Dapatkan atribut judul gambar
imgdatabe.setAttribute ("src", "02.gif");
imgdatabe.setattribute ("judul", "kemiringan ramah");
document.write (imgdatabe.getAttribute ("title"));
document.write (imgdatabe.getAttribute ("alt"));
document.write (imgdatabe.getAttribute ("node-data"));
document.write (imgdatabe.getAttribute ("node_data"));
}
</script>
</head>
<body>
<div>
<img src = "01.jpg" node-data = "222" node_data = "3333">
<img src = "01.jpg">
</body>
Gunakan metode setAttribute () untuk mengatur atribut simpul
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<meta charset = "UTF-8" />
<bahasa skrip = "javascript">
window.onload = function () {
var bkk = document.geteLementById ("new5");
var clickbk = document.geteLementById ("qiehuan");
clickbk.onClick = dsqiehuan;
fungsi dsqiehuan () {
bkk.setAttribute ("class", "xxx")
}
}
</script>
<tyle>
.xxx {color: #ddd}
</tyle>
</head>
<body>
<Div id = "new5">
555
</div>
<em id = "qiehuan"> switch </em>
</body>
8. createelement () Buat simpul
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<meta charset = "UTF-8" />
<bahasa skrip = "javascript">
window.onload = function () {
var op = document.createElement ("p");
var otext = document.createTextNode ("Buat node menggunakan dom");
var otext1 = document.createTextNode ("Buat node 123 menggunakan dom");
op.AppendChild (Otext);
op.AppendChild (Otext1);
Document.Body.AppendChild (OP);
}
</script>
</head>
<body>
<p> Awalnya ada p di sini, uji createelement () </p>
</body>
9.Removechild Menghapus Node
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<meta charset = "UTF-8" />
<bahasa skrip = "javascript">
window.onload = function () {
var op = document.getElementsbyTagname ("p") [0];
op.parentnode.removechild (op); // endingnya adalah .removechild (op), bukan .removechild ("op")
}
</script>
</head>
<body>
<p> Awalnya ada p di sini, uji createelement () </p>
</body>
10. InSertBefore () Masukkan simpul sebelum node tertentu
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<meta charset = "UTF-8" />
<bahasa skrip = "javascript">
window.onload = function () {
var opold = document.geteLementsByTagname ("p") [0];
var opnew = document.createElement ("p");
var otext = document.createTextNode ("node new")
opnew.appendchild (Otext);
opold.parentnode.insertbefore (opnew, opold); // menerima dua parameter, satu adalah parameter baru dan yang lainnya adalah parameter simpul lama
}
</script>
</head>
<body>
<p> Awalnya ada p </p>
</body>
11. Masukkan elemen baru setelah simpul tertentu (ditambahkan 9 Januari 2015)
Metode yang disediakan oleh DOM hanya dapat menambahkan elemen baru sebelum elemen target menggunakan insertBefore (), atau menggunakan metode appendChild () untuk menambahkan elemen baru di akhir pengasuhan anak dari elemen induk (contoh: alamat).
Dalam praktiknya, sering digunakan untuk menambahkan elemen baru di akhir elemen tertentu. Metode DOM tidak memiliki metode insertBefore (), tetapi menggunakan pengetahuan yang ada dapat digunakan untuk menulis.
Gagasan kode adalah sebagai berikut
Salinan kode adalah sebagai berikut:
fungsi insertAfter (newElement, targetElement) {
var outdoor = targeteLement.parentnode; // Temukan elemen induk dari elemen target
if (adarent.lastchild == TargetElement) // Jika target adalah elemen terakhir
Outdoor.AppendChild (NewElement); // Tambahkan langsung ke elemen terakhir
else // sebelum dimasukkan ke simpul elemen induk dari elemen berikutnya
outdoor.insertbefore (newElement, targeteLement.nextsibling)
Contoh: (Tambahkan di luar elemen) Instance Asli: Alamat
Salinan kode adalah sebagai berikut:
<head>
<meta charset = "UTF-8">
<title> </title>
</head>
<body onload = "interp ()">
<p> Pertama </p>
<p id = "target"> kedua </p>
<type skrip = "Teks/JavaScript">
fungsi insertAfter (newElement, targetElement) {
var outdoor = targeteLement.parentnode; // Temukan elemen induk dari elemen target
if (adarent.lastchild == TargetElement) // Jika target adalah elemen terakhir
Outdoor.AppendChild (NewElement); // Tambahkan langsung ke elemen terakhir
else // sebelum dimasukkan ke simpul elemen induk dari elemen berikutnya
outdoor.insertbefore (newElement, targeteLement.nextsibling)
}
fungsi interp () {
var ooparent = document.getElementById ("target");
var ooonewp = document.createElement ("a");
oonewp.setAttribute ("href", "http://www.qq.com");
var ootextp = document.createTextNode ("tautan");
oonewp.AppendChild (OOETEXTP);
InsertAfter (Ooonewp, Ooparent);
}
</script>
</body>
Contoh: ditambahkan dalam elemen
12. Tambahkan fragmentasi dokumen untuk meningkatkan efisiensi eksekusi
Salinan kode adalah sebagai berikut:
<head>
<title> childnodes </iteme>
<meta charset = "UTF-8" />
<bahasa skrip = "javascript">
window.onload = function () {
var opold = document.geteLementsByTagname ("p") [0];
var acolors = ["merah", "hijau", "biru", "magenta", "kuning", "cokelat", "hitam", "aquamarine", "kapur", "fuchsia", "kuningan", "azure", "coklat", " perunggu "," deeppink "," aliceblue "," abu -abu "," tembaga "," karang "," feldspar "," oranye "," anggrek "," merah muda "," prem "," kuarsa "," ungu "];
var ofragment = document.createdocumentfragment (); // Buat fragmentasi dokumen
untuk (var i = 0; i <acolors.length; i ++) {
var op = document.createElement ("p");
var otext = document.createTextNode (acolors [i]);
op.AppendChild (Otext);
OfRagment.AppendChild (OP); // Tambahkan node ke fragmen terlebih dahulu
}
//document.body.Appendchild(ofragment); // ditambahkan ke halaman pada yang terakhir
opold.parentnode.insertbefore (OfRagment, opold); // dikombinasikan dengan insertBefore untuk menambahkan fragmen dokumen ke node
}
</script>
</head>
<body>
<p> Awalnya ada p </p>
</body>