Ada tiga jenis node utama: node elemen, node atribut dan node teks.
Hal utama tentang DOM adalah menambahkan, menghapus, memodifikasi, dan memeriksa node elemen dan node atribut. Berikut ini akan memperkenalkan operasi pada node elemen dan operasi pada node atribut masing -masing.
Node elemen
memeriksa
Sebelum menambahkan, menghapus dan memodifikasi DOM, Anda harus terlebih dahulu menemukan elemen yang sesuai. Metode pencarian spesifik adalah sebagai berikut:
getElementById () // Dapatkan satu node getElementsbyTagname () // Dapatkan Node Array Nodelist GetElementsByName () // Dapatkan Node Array Nodelist
Pada saat yang sama, Anda juga dapat menggunakan atribut node elemen untuk mendapatkan node induk dan anak dan node teks:
Node anak -anak
Node.childnodes // Dapatkan daftar nodelis node node anak; Perhatikan bahwa istirahat garis dihitung sebagai node teks di browser. Jika Anda mendapatkan daftar node dengan cara ini, pemfilteran diperlukan node.firstchild // kembalikan node node anak pertama.lastchild // kembalikan node anak terakhir
Simpul induk
Node.parentnode // Mengembalikan node node induk.OwnerDocument // Mengembalikan node leluhur (seluruh dokumen)
Node rekan senegaranya
Node.previoussibling // mengembalikan simpul sebelumnya, jika tidak, kembalikan nullnode.nextsibling // mengembalikan node berikutnya
meningkatkan
Untuk menambahkan simpul baru, Anda harus terlebih dahulu membuat node, dan kemudian memasukkan simpul yang baru dibuat ke dalam DOM. Oleh karena itu, berikut ini adalah metode membuat node dan memasukkan node, dan metode replikasi node juga diperkenalkan dalam pembuatan node.
Buat node
createelement () // Buat node elemen baru sesuai dengan nama tag yang ditentukan
Buat cuplikan kode (untuk menghindari penyegaran DOM yang sering, Anda dapat membuat cuplikan kode terlebih dahulu, dan kemudian menambahkannya ke DOM setelah menyelesaikan semua operasi node)
CreateDocumentFragment ()
Node replikasi
clonednode = node.clonenode (boolean) // Hanya ada satu parameter, lulus dalam nilai boolean, benar berarti menyalin semua node anak di bawah node; Salah berarti menyalin hanya node
Masukkan simpul
/*Masukkan node*/parentNode.AppendChild (childNode); // Tambahkan simpul baru ke akhir daftar node anak parentNode.insertbefore (newnode, targetNode); // masukkan newnode ke targetnode/*masukkan kode html*/node.insertAdJacentHtml ('sebelum btml', html); // masukkan kode node.insertAdJacentHtml ('afterbegin', html); // masukkan kode node.insertAdJacentHtml ('afterbegin', html); // Masukkan kode node.insertAdJacentHtml ('sebelumnya', html); // Masukkan kode setelah elemen anak terakhir dari elemen node.insertAdJacentHtml ('Afterend', html); // Masukkan kode setelah elemenGanti node
ParentNode.Replace (newNode, TargetNode); // Ganti TargetNode dengan NewNode
menghapus
Hapus node
ParentNode.Removechild (Childnode); // Hapus node node target.parentnode.removechild (node); // gunakan tanpa mengetahui node induk
Node atribut
Operasi node atribut akan menambah, menghapus, memodifikasi, dan memeriksa gaya DOM. Ada berbagai metode operasi untuk gaya in-line, gaya inline, dan gaya eksternal; Gaya yang diperoleh dengan berbagai metode juga dibagi menjadi yang dapat dibaca, dapat ditulis dan hanya baca.
Dapatkan gaya CSS secara langsung
node.style.color // dapat dibaca atau ditulis
Properti dan metode gaya itu sendiri
node.style.csStext // Dapatkan Node Inline Style String Node.Style.Length // Dapatkan jumlah gaya inline node.style.item (0) // Dapatkan gaya pada posisi yang ditentukan
Dapatkan dan Ubah Gaya Elemen
HTML5 menyediakan atribut baru untuk elemen: ClassList untuk mengimplementasikan penambahan, penghapusan, modifikasi, dan pencarian lembaran gaya elemen. Operasi adalah sebagai berikut:
node.classlist.add (nilai); // Tambahkan kelas yang ditentukan node.classlist.contains (nilai); // Tentukan apakah elemen berisi kelas yang ditentukan. Jika ada truenode.classlist.remove (nilai); // hapus kelas yang ditentukan node.classlist.toggle (nilai); // Hapus jika ada kelas tertentu, dan tambahkan kelas yang ditentukan jika tidak ada.
Metode untuk memodifikasi karakteristik DOM
Node.getAttribute ('id') // dapatkan node.setAttribute ('id') // Set node.removeattribute () // hapus node.attributes // dapatkan semua fitur domMetode baca saja
GetComputedStyle adalah metode jendela. Ini bisa mendapatkan semua nilai atribut CSS akhir yang digunakan dari elemen saat ini, tetapi hanya baca. Ini memiliki dua parameter, yang pertama adalah simpul yang masuk, yang kedua dapat masuk: melayang ,: blur, dll. Untuk mendapatkan gaya kelas pseudo, dan jika tidak, nol akan dilewatkan.
Namun, IE tidak mendukung metode GetComputedStyle, dan CurrentStyle dapat digunakan untuk mempertahankan kompatibilitas:
window.getComputedStyle? window.getComputedStyle (node, null): node.currentstyle
Ringkasan di atas metode operasi node JavaScript adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.