Beranda>Tutorial Desain Web>Tutorial Javascript

Atur operasi umum JavaScript pada berbagai jenis elemen di DOM

Penulis：Eve Cole Waktu Pembaruan：2025-08-31 14:48:01

Tipe simpul

nodetype

Berikut adalah beberapa nilai nodetype penting:

1: Elemen Elemen

2: Attr

3: Teks teks

8: Komentar

9: Dokumen Dokumen

nodename, nodevalue

Hubungan simpul

Childnodes: Setiap node memiliki properti Childnodes, yang memegang objek nodelist

FirstChild: Setara dengan Childnodes [0]

LastChild: setara dengan childnodes.length-1

Pada saat yang sama, node lain dalam daftar yang sama dapat diakses dengan menggunakan properti sebelumnya dan berikutnya dari setiap node dalam daftar.

Node Operasi

ovendchild ()

Metode appendChild () digunakan untuk menambahkan node ke akhir daftar anak. Setelah menambahkan node, petunjuk hubungan dari simpul baru, simpul induk dan simpul anak -anak terakhir dari anak -anak akan diperbarui sesuai.

insertBefore ()

Metode InsertBefore () menerima dua parameter: node yang akan dimasukkan dan simpul yang akan direferensikan.

 // Setelah dimasukkan, itu menjadi simpul anak terakhir dikembalikannode = somenode.insertbefore (newnode, null); // Setelah dimasukkan, itu menjadi simpul pertama yang dikembalikannode = somenode.insertbefore (newnode, somenode.firstchild); // masukkan sebelum node anak terakhir kembali.

replacechild ()

Replacechild () menerima dua parameter, node yang akan dimasukkan dan simpul yang akan diganti

 var returnedNode = somenode.replacechild (newnode, somenode.firstchild);

Removechild ()

Hanya hapus dan tidak mengganti node.

 var magrirstchild = somenode.removechild (somenode.firstchild);

clonenode ()

Item 1

Item 2

Item 3

 var deeplist = mylist.clonenode (true); console.log (deeplist.length); // 3var shallowlist = mylist.clonenode (false); console.log (dayowlist.childnodes.length); // 0

Jenis Dokumen

Node dokumen memiliki karakteristik berikut:

  • Nilai nodetype adalah 9;
  • Nilai nodename adalah #Document;
  • Nilai nodevalue adalah nol;
  • Nilai ParentNode adalah nol;
  • Nilai OwnerDocument adalah NULL;

Anak -anak dari dokumen tersebut

 var html = document.documentElement; // Dapatkan referensi ke <html> console.log (html === document.childnodes [0]); // trueconsole.log (html === document.firstchild); // BENAR

Informasi dokumen

 // Dapatkan judul dokumen var originalTitle = document.title; // Atur dokumen dokumen dokumen.title = "Judul Halaman Baru"; // Dapatkan Urlvar Url = Document.url; // Dapatkan Nama Domain Var Domain = Document.domain; // Dapatkan Urlvar Referrer = Document.referrer; // Asumsikan bahwa halaman tersebut berasal dari p2p.wrox Document.domain; " // dokumen yang berhasil.domain = "nczonline.net"; // Gagal

Call document.geteLementById ("myeLement"); Hasilnya akan mengembalikan elemen <sput> seperti yang ditunjukkan di bawah ini;

Cara terbaik adalah dengan tidak membuat atribut nama bidang formulir sama dengan ID elemen lain.

 <input type = "text" name = "myeLement" value = "bidang teks"> <div id = "myeLement"> a div </div>

Koleksi Khusus

  • document.anchors, berisi semua elemen dalam dokumen dengan atribut nama;
  • Document.forms, berisi semua elemen bentuk dalam dokumen, dan sama dengan hasil yang diperoleh oleh Document.getElementsByTagname ("Form");
  • Document.Images, berisi semua elemen IMG dalam dokumen, dan sama dengan hasil yang diperoleh oleh Document.getElementsByTagname ("IMG");
  • Document.links, berisi semua elemen dalam dokumen dengan atribut HREF;

Penulisan dokumen

 <Html> <Head> <title> document.write () Contoh 3 </iteme> </head> <body> <script type = "text/javascript"> document.write ("<script type =/" text/javascript/"src =/" file.js/">") + "<// script>"); </script> </body> </html>

String <// Script> tidak akan dianggap sebagai tag tertutup untuk tag skrip eksternal, jadi tidak akan ada konten yang tidak perlu pada halaman.

Jenis elemen

Node elemen memiliki karakteristik berikut:

  • Nilai nodetype adalah 1;
  • Nilai nodename adalah nama label elemen;
  • Nilai nodevalue adalah nol;
  • ParentNode mungkin dokumen atau elemen;

Untuk mengakses nama tag suatu elemen, Anda dapat menggunakan atribut nodename atau atribut tagname;

 <div id = "myDiv"> </div> var div = document.geteLementById ("myDiv"); console.log (div.tagname); // divconsole.log (div.nodename); // divif (element.tagname == "div") {// Anda tidak dapat membandingkan seperti ini, mudah untuk membuat kesalahan} if (element.tagname.tolowercase == "div") {// Ini adalah yang terbaik (untuk dokumen apa pun)}

Dapatkan fitur

Ada tiga metode DOM utama untuk karakteristik operasi, yaitu getAttribute (), setAttribute (), dan RemoveAttribute ();

Perhatikan bahwa nama atribut yang diteruskan ke getAttribute () sama dengan nama atribut yang sebenarnya. Kesan: Untuk mendapatkan nilai atribut kelas, Anda harus lulus di "kelas" bukan "className".

 var div = document.getElementById ("myDiv"); console.log (div.getAttribute ("class")); // bd

Buat elemen

Gunakan metode Document.CreateElement () untuk membuat elemen baru.

Anak -anak dari Elemen

Sebelum melakukan operasi, Anda biasanya perlu memeriksa properti nodetype terlebih dahulu, seperti yang ditunjukkan pada contoh berikut:

 untuk (var i = 0; len = element.childnodes.length; i <len; i ++) {if (element.childnodes [i] .nodetype == 1) {// Lakukan beberapa operasi}}

Jenis teks

Node teks memiliki karakteristik berikut:

  • Nilai nodetype adalah 3;
  • Nilai nodename adalah "#text";
  • Nilai nodevalue adalah teks yang terkandung dalam node;
  • ParentNode adalah elemen;

Buat Node Teks

Anda dapat menggunakan Document.CreateTextNode () untuk membuat node teks baru.

Node teks yang dinormalisasi

Normalisasi ()

Node teks terpecah

splittext ()

Jenis Komentar

Node komentar memiliki karakteristik berikut:

  • Nilai nodetype adalah 8;
  • Nilai nodename adalah "#comment";
  • Nilai NodEvalue adalah isi komentar;
  • ParentNode mungkin dokumen atau elemen;
  • Jam berapa tidak mendukung (tidak) sub-poin;

Teknologi Operasi Dom

Formulir Operasi

 // Buat TableVar Table = Document.CreateElement ("TABLE"); TABLE.BORDER = 1; TABLE.WIDTH = "100%"; // Buat TBodyVar TBody = Document.CreateElement ("TBody"); Table.AppendChild (tBody); // Buat baris pertama ("tbody"); Table.AppendChild (tBody); // Buat baris pertama ("tBody"); TABLE.AppendChild (tBody); // Buat baris pertama ("tbody"); tody.insertrow (0); tbody.rows [0] .insertcell (0); tbody.rows [0] .cells [0] .AppendChild (document.createTextNode ("sel 1,1"); tody.rows [0] .croatcell (1); tody.rows [0] 2,1 ")); // Buat baris kedua tbody.insertrow (01); tbody.rows [1] .insertcell (0); tbody.rows [1] .cells [0] .AppendChild (Document.CreateTextNode (" Cell 1,2 ")); tbody.rows [1] .Insertcell (1); tBody.rows [1] .cells [1] .AppendChild (Document.CreateTextNode (" Cell 2,2 ")); Document.Body.AppendChild (Tabel);

API pemilih

Metode QuerySelector ()

 // Dapatkan elemen tubuh var tbody = document.queryselector ('body'); // Dapatkan elemen dengan id "myDiv" var myDiv = document.QuerySelector ("#myDiv"); // Dapatkan elemen pertama dengan kelas "var dipilih = document.queryselector (". document.body.queryselector ("img.button");

Metode QuerySelectorall ()

 // Dapatkan semua <em> elemen dalam <vi> (mirip dengan GetElementsByTagname ("EM")) var ems = document.geteLementById ("myDiv"). QuerySelectorAll ("EM"); // Dapatkan semua elemen dari kelas "dipilih" var dipilih = Document.QuerySelectorAllAll (". Document.QuerySelectorall ("P Strong");

Html5

Ekstensi terkait kelas

Metode GetElementsByClassName ():

Metode ini dapat dipanggil melalui objek dokumen dan semua elemen HTML.

 // Dapatkan semua elemen yang berisi "nama pengguna" dan "saat ini" di kelas. Urutan nama kelas tidak masalah var allCurrentUserNames = document.geteLementsbyclassname ("username arus"); // Dapatkan semua elemen dengan nama kelas "dipilih" di elemen dengan id "myDiv" var dipilih = document.geteLementById ("myDiv"). GetElementByClasSname ("Document.getElementById (" myDiv "). GetElementsByClasSname (" "dipilih");

Manajemen fokus

HTML5 juga menambahkan fungsi membantu dalam mengelola DOM Focus. Yang pertama adalah dokumen. Properti AactiveElement, yang selalu mengacu pada elemen dalam DOM yang saat ini telah mendapatkan fokus.

 var button = document.geteLementById ("mybutton"); tombol.focus (); waspada (document.activeElement === tombol); // BENAR

Secara default, ketika dokumen baru saja dimuat, dokumen.activeElement disimpan dalam dokumen.activeElement dengan referensi ke elemen dokumen.body. Selama pemuatan dokumen, nilai dokumen.ActiveElement adalah nol.

Selain itu, metode Document.hasfocus () telah ditambahkan, yang digunakan untuk menentukan apakah dokumen tersebut telah mendapatkan fokus.

 var button = document.getElementById ("mybutton"); Botton.focus (); waspada (document.hasfocus ()); // BENAR
Artikel Terkait