Komposisi JS
Kita semua tahu bahwa javascript memiliki tiga bagian: ECMAScript , DOM dan BOM . Bergantung pada host (browser), manifestasi spesifik juga berbeda, dan IE dan browser lainnya memiliki gaya yang sangat berbeda.
1. DOM adalah standar W3C; [Standar bahwa semua browser sesuai dengan umum]
2. BOM didasarkan pada DOM oleh berbagai produsen browser
Implementasi pada setiap browser; [Ini dimanifestasikan sebagai definisi berbeda dari browser yang berbeda, dan metode implementasinya berbeda]
3. Jendela adalah objek bom, bukan objek JS;
DOM (Model Objek Dokumen) adalah antarmuka program aplikasi ( API ) untuk HTML dan XML .
BOM terutama berkaitan dengan jendela dan kerangka kerja browser, tetapi ekstensi JavaScript khusus browser biasanya dianggap sebagai bagian dari BOM. Ekstensi ini termasuk:
Pergerakan pop-up jendela browser baru, tutup jendela browser, dan mengubah ukuran jendela. Memposisikan objek yang menyediakan detail browser web. Objek layar yang memberikan detail resolusi layar pengguna. Dukungan untuk cookie. IE telah memperluas BOM dan menambahkan kelas ActiveXObject. Objek ActiveX dapat dipakai melalui JavaScript.
javacsript mengakses, mengontrol, dan memodifikasi klien (browser) dengan mengakses objek BOM (Browser Object Model). Karena window BOM berisi document , properti dan metode objek jendela dapat langsung digunakan dan dirasakan. Oleh karena itu, atribut document objek window dapat langsung digunakan, dan konten dan struktur dokumen XHTML dapat diakses, diambil, dan dimodifikasi melalui atribut document . Karena objek document adalah node root dari model DOM (Dokumen Objek Model). Dapat dikatakan bahwa BOM berisi DOM (objek), dan browser menyediakan akses ke objek BOM, yang kemudian mengakses objek DOM , sehingga JS dapat mengoperasikan browser dan dokumen yang dibaca oleh browser. di dalam
Dom berisi: window
Objek jendela berisi properti: dokumen, lokasi, navigasi, layar, riwayat, node root framesDocument berisi node anak: formulir, lokasi, jangkar, gambar, tautan
Dapat dilihat dari window.document bahwa objek DOM yang paling mendasar adalah objek anak dari objek jendela Bom.
Perbedaan: DOM menjelaskan metode dan antarmuka untuk memproses konten halaman web, dan BOM menjelaskan metode dan antarmuka untuk berinteraksi dengan browser.
Temui Dom
Mari kita lihat kode berikut:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>DOM</title> </head> <body> <h2><a href = "http://www.baidu.com"> javascript dom </a> </h2> <p> Mengoperasikan elemen html, tambahkan, ubah atau hapus gaya css, dll. </p> <ul> <li> JavaScript </li> <li> <li> Dom </li> <li> <li> CSSSSSSSSSSSSSSSSSSSSSSSS </li> <li> DOM
Menguras kode HTML menjadi diagram hierarki simpul dom:
** Dokumen HTML dapat dikatakan sebagai kumpulan node. Node Dom meliputi: ** 1. Node elemen: Pada gambar di atas, <Html>, <body>, <p>, dll. Semua node elemen, yaitu tag. 2. Teks Node: Konten ditampilkan kepada pengguna, seperti JavaScript, DOM, CSS dan teks lainnya di <li> ... </li>. 3. Node Atribut: Atribut Elemen, seperti atribut tautan href = "http://www.baidu.com" dari tag <a>.
Atribut Node Node Atribut Nodename Mengembalikan string yang kontennya adalah nama nodetype node mengembalikan integer. Nilai ini mewakili jenis nodevalue simpul yang diberikan mengembalikan nilai saat ini dari simpul yang diberikan.
traversal node tree traversal node tree childNodes returns an array, this array consists of children of the given element firstChild returns the first child node lastChild returns the last child node parentNode returns the parent node nextSibling returns the next child node of the given node previousSibling returns the previous child node of the given node
DOM operation DOM operation createElement(element) Create a new element node createTextNode() Create a new text node containing the given text appendChild() Add a new child section after the last node list of the specified node insertBefore() Insert a given node into the front of the given child node of a given element removeChild() Remove child node from a given element replaceChild() ReplaceChild() Replace a child node in a given parent element with simpul lain
DOM mewakili dokumen dengan membuat pohon, menggambarkan metode dan antarmuka untuk memproses konten web, sehingga pengembang memiliki kontrol yang belum pernah terjadi sebelumnya atas konten dan struktur dokumen. Menggunakan API DOM, node dapat dengan mudah dihapus, ditambahkan dan diganti.
1. Node akses
`var ohtml = document.documentElement;` // Mengembalikan simpul root dokumen yang ada dalam dokumen XML dan HTML. OHTML berisi objek htmlelement `document.body` yang mewakili <html/> // adalah ekstensi khusus ke halaman html, memberikan akses langsung ke tag <body> </span> <span> </span> </span>` document.getElementById ("id") `// mengembalikan unsurnya melalui iD 6 Document.getElement (" id ")` Juga kembalikan elemen dengan nama sebagai id yang ditentukan `document.geteLementByName (" name ")` dengan nama sebagai id yang ditentukan // Dapatkan semua elemen dengan atribut nama sama dengan nilai yang ditentukan. Namun, pada IE6 dan opera7.5, ia juga akan mengembalikan elemen dengan ID sebagai nama yang diberikan dan hanya memeriksa <input/> dan <img/> `var x = document.getElementsbytagname (" p ");` // Gunakan nodel document.2. Karakteristik dan metode node simpul
firstChild //Node, point to the first node in the childNodes list lastChild //Node, point to the last node in the childNodes list parentNodes list parentNode //Node, point to the parent node ownerDocument //Document, point to the document to which this node belongs firstChild //Node, point to the first node in the childNodes list lastChild //Node, point to the last node in the childNodes list parentNodes list childNodes //Node, point to the parent node childNodes //NodeList, list of all children previouslySibling /Node, point to the previous sibling node: If this node is the first node, then the value is null `nextSibling` //Node, pointing to the next sibling node: If this node is the last node, then the value is null `haschildnodes ()` // boolean, ketika childnodes berisi satu atau lebih node, nilai sebenarnya dikembalikan.
3. Acara Dom
DOM memiliki dua model acara pada saat yang sama: acara gelembung dan event event event event: acara dipicu dalam urutan dari target acara paling spesifik ke target acara paling tidak spesifik <body onclick = "handleclick ()"> <div onClick = "handleclick ()"> klik saya </div> </body> urutan trigger adalah: div, body, mo </div> </body> urutan trigger adalah: div, body, m saya </div> </body> urutan trigger adalah: div, body, m me </diver </body> urutan triggering adalah: div, body, m saya </div> </body> urutan triggering is: div, div, body, mm 6 (Mozilla 1.0). Acara yang Diambil: Dalam proses yang berlawanan dengan acara gelembung, peristiwa dimulai dari objek yang paling tidak akurat, dan kemudian ke urutan yang paling akurat untuk memicu contoh di atas adalah: Dokumen, Div. Properti paling unik dari model acara DOM adalah bahwa node teks juga memicu peristiwa (bukan dalam IE).
4. Fungsi penanganan acara/fungsi mendengarkan
** Fungsi Handler Event/Fungsi pendengar ** dalam JavaScript: var odiv = document.getElementById ("div1"); odiv.onClick = function () {// onClick hanya dapat digunakan dalam huruf kecil, default adalah peringatan acara gelembung ("diklik!"); } Dalam html: <div onClick = "javascript: waspada (" diklik! ")"> </div> // ontclick sewenang -wenang dalam kasusIE Event Handlers attachEvent () dan detachevent ()
Dalam IE, setiap elemen dan objek jendela memiliki dua metode: attachEvent()和detachEvent() , yang menerima dua parameter identik, nama pawang dan fungsi event handler, seperti:
[objek] .attachevent ("name_of_event_handler", "function_to_attach") [objek] .detachevent ("name_of_event_handler", "function_to_remove") var fnclick = function () {waspada ("klik!"); } odiv.AttachEvent ("OnClick", fnclick); // Tambahkan fungsi penanganan acara odiv.attachevent ("onClick", fnclickanother); // Anda dapat menambahkan beberapa fungsi penanganan acara odiv.detachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.detachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.detachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.attachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.attachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.detachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.attachevent ("onClick", fnclick); // Hapus fungsi penanganan acara odiv.attachevent ("onClick", fnclick); // Hapus fungsi penanganan acara Dengan metode attachEvent() , event handler berjalan di ruang lingkup global, jadi ini sama dengan jendela.
Cross Browser Event Handler
addHandler()和removeHandler() Metode addHandler() milik suatu objek yang disebut EventUNTIL (). Kedua metode menerima tiga parameter yang identik, elemen yang akan dioperasikan, nama acara dan fungsi event handler.
Jenis acara
** Tipe Acara ** Acara Mouse: Klik, DBClick, Mousedown, MouseUp, Mouseover, Mouseout, Mousemove Keyboard Event: Keydown, Keypress, Keyup HTML Event: Load, Unload, Abort, Error, Change, Change, Recet, Ubaran Ukuran, Gulir, Fokus, Blur
Pawang acara
Program yang mengeksekusi kode JavaScript menanggapi peristiwa ketika peristiwa terjadi. Menanggapi acara tertentu
Kode yang dijalankan disebut prosesor acara.
Sintaks untuk menggunakan penangan acara di tag HTML adalah:
<HTML标签事件处理器="JavaScript代码''>Pawang acara
Suatu acara adalah tindakan tertentu yang dilakukan oleh pengguna atau browser itu sendiri. Misalnya click,mouseup,keydown,mouseover , dll. Adalah semua nama acara. Fungsi yang menanggapi acara tertentu disebut event handler (pendengar acara). Event Handler dimulai dengan on , jadi event handler of click adalah onclick
DOM Level 0 Event Handler
DOM Level 0 Event Handler: Tetapkan fungsi ke atribut pawang dari suatu acara
<input type = "tombol" value = "tombol 2" id = "ben2"/> var btn2 = document.geteLementById ('btn2'); Dapatkan objek tombol btn2 btn2.onClick // Tambahkan atribut ontClick ke btn2, dan atribut memicu event handler btn2.onClick = function () {} // tambahkan fungsi anonim btn2.onclick = null // hapus onClick AtributBagaimana cara menghentikan gelembung?
Ada cara berikut untuk mencegah menggelegak:
e.cancelBubble=true;e.stopPropagation();return false;Innertext, InnerHtml, OuteHtml, Outtext
Innertext, InnerHtml, OtoERHTML, OUTERTEXT INNERTEXT: Menunjukkan teks antara tag awal dan tag akhir bagian dalam: kode html yang mewakili semua elemen dan teks dari elemen, seperti: <b> <b> hello </b> Dunia </Div> Insnertext adalah hello world, InnerHt nonterht: Innertm oode: Innertext world hello, hello hello. diganti, dan masalahnya mengembalikan konten yang sama dengan innertext outerhtml: perbedaan dari yang pertama adalah bahwa seluruh node target diganti, dan kode html lengkap dari elemen dikembalikan, termasuk elemen itu sendiri
DOM Level 2 Event Handler
Acara DOM Level 2 menentukan dua metode untuk menentukan dan menghapus pengoperasian event handler. addEventListener() dan removeEventListener()
addEventListener () dan RemestEventListener ()
Di DOM, AddEventListener () dan RemoveEventListener () digunakan untuk mengalokasikan dan menghapus penangan acara. Tidak seperti IE, metode ini memerlukan tiga parameter: nama acara, apakah fungsi yang akan dialokasikan dan fungsi pemrosesan digunakan untuk tahap gelembung (false) atau tahap penangkapan (true). Standarnya adalah tahap gelembung false [objek] .addeventListener ("name_of_event", fnhander, bcapture) [objek] .removeeventListener ("name_of_event", fnhander, bcapture) var fnclick = function () {waspada ("klik!"); } odiv.addeventListener ("onClick", fnclick, false); // Tambahkan fungsi penanganan acara odiv.addeventListener ("onClick", fnclickanother, false); // Seperti IE, beberapa fungsi penanganan acara dapat ditambahkan odiv.removeeventlistener ("onClick", fnclick, false); // Hapus Fungsi Penanganan Acara Jika Anda menggunakan AddEventListener () untuk menambahkan fungsi penanganan acara ke tahap Capture, Anda harus menentukan di RemestEventListener () sebagai tahap penangkapan untuk menghapus fungsi penanganan acara ini dengan benar odiv.onclick = fnclick; odiv.onClick = fnclick; // Gunakan penugasan langsung, fungsi penanganan acara selanjutnya akan menimpa fungsi pemrosesan sebelumnya odiv.onClick = fnclick; odiv.addeventListener ("onClick", fnclickanother, false); // Panggilan akan dipanggil secara berurutan dan tidak akan ditimpaGambar untuk memahami outhtml, innertext, innerhtml:
Peta pikiran operasi dasar dom
Untuk dom XML yang lebih terperinci - untuk properti dan metode objek elemen, silakan kunjungi W3Cshool
Bom bagian
Inti dari BOM adalah window , dan objek window memiliki peran ganda. Baik antarmuka untuk mengakses jendela browser melalui JS dan objek Global . Ini berarti bahwa objek, variabel, dan fungsi apa pun yang ditentukan dalam halaman web mengambil jendela sebagai objek global .
window.close (); // tutup jendela jendela.alert ("pesan"); // Puncak kotak pesan sistem dengan tombol OK, menampilkan jendela teks yang ditentukan.confirm ("Apakah Anda yakin?"); // Puncak kotak dialog kueri dengan tombol OK dan batal, mengembalikan jendela nilai boolean. // Minta pengguna untuk memasukkan informasi dan menerima dua parameter, yaitu teks yang akan ditampilkan kepada pengguna dan nilai default di kotak teks, kembalikan nilai di kotak teks sebagai nilai fungsi. // Anda dapat untuk sementara mengubah teks jendela bilah status.defaultStatus // Informasi bilah status default dapat mengubah teks sebelum pengguna meninggalkan jendela halaman saat ini.setTimeout ("peringatan ('xxx')", 1000); // Atur kode yang ditentukan setelah jumlah milidetik yang ditentukan, terima 2 parameter, kode yang akan dieksekusi dan jumlah milidetik yang harus ditunggu untuk window.cleartimeout ("id"); // Batalkan jeda yang belum dieksekusi, dan lewati ID jeda ke jendela itu.setInterval (fungsi, 1000); // Ulangi kode yang ditentukan secara tak terbatas setiap periode waktu yang ditentukan, parameternya sama dengan jendela setTimeout ().clearInterval ("id"); // Batalkan interval waktu dan berikan ID interval ke jendela itu.history.go (-1); // Akses sejarah jendela browser. Angka negatif adalah mundur dan angka positif adalah jendela ke depan.history.back (); // sama seperti di atas window.history.forward (); // Sama seperti di atas window.history.length // Anda dapat melihat jumlah halaman dalam sejarahObjek Dokumen
Objek Dokumen: Ini sebenarnya adalah properti dari objek jendela. Dokumen == Window.Document benar, itu adalah satu -satunya objek yang dimiliki oleh bom dan dom document.lastmodified // dapatkan string yang mewakili document.referrer // digunakan untuk melacak di mana pengguna tautan ke dokumen.title // mendapatkan judul halaman saat ini, baca dan tulis dokumen.url // Dapatkan url dari halaman saat ini, baca dan dokumen. in the page document.forms[0] or document.forms["formName"] //Access all forms document.images[0] or document.images["imgName"] //Access all images document.links [0] or document.links["linkName"] //Access all links document.applets [0] or document.applets["appletName"] //Access all Applet document.embeds [0] or Document.embeds ["embedName"] // akses semua objek tertanam Document.write (); atau document.writeln (); // Masukkan string ke tempat mereka dipanggil
objek lokasi
Objek lokasi: mewakili URL jendela pemuatan, dan juga dapat dirujuk oleh window.location location.href // URL lengkap dari halaman yang saat ini dimuat, seperti http://www.somewhere.com/pictures/index.htm Lokasi. server, seperti www.wrox.com location.hostname // biasanya sama dengan host, dan kadang -kadang www location.port sebelumnya // port yang diminta oleh URL yang dinyatakan. Secara default, sebagian besar URL tidak memiliki informasi port, seperti 8080 location.pathname // bagian setelah nama host di URL, seperti /pictures/index.htm lokasi. location.assign ("http: www.baidu.com"); // lokasi yang sama. // penugasan yang sama (), tetapi alamat baru tidak akan ditambahkan ke tumpukan riwayat browser, dan location.reload (true | false); // Muat ulang Halaman saat ini, jika salah, itu akan kelebihan beban dari cache browser, dan jika itu benar, itu akan kelebihan beban dari sisi server, dan standarnya salahObjek Navigator
Objek `Navigator`: Berisi banyak informasi tentang browser web, yang sangat berguna dalam mendeteksi browser dan sistem operasi. Ini juga dapat direferensikan oleh window.navigator `navigator.appcodename` // String nama kode browser mewakili navigator.appname // string nama browser resmi mewakili navigator.appversion // rangkaian versi browser, pengembalian navigator. Java diaktifkan, return true, jika tidak mengembalikan navigator false.platform // string platform komputer di mana browser berada mewakili navigator.plugins // array plug-in yang diinstal di browser navigator.taintenabled // return true jika data noda diaktifkan, sebaliknya mengembalikan navigator palsu.
objek layar
Objek layar: Digunakan untuk mendapatkan beberapa informasi tentang layar pengguna. Anda juga dapat merujuknya dengan window.screen.width/height // lebar dan tinggi layar, dalam piksel, layar. window.resizeto (screen.availwidth, screen.availheight); // Isi layar pengguna
Metode Objek Jendela
Diagram skematik hubungan struktural antara BOM dan DOM
Peta pikiran objek windows