The DOM represents it as:
\n<\/p>\n\n
- Document\n - html\n - head\n - title\n - body\n - h1\n - p\n<\/pre>\n\n\n\n\n
\n\n\n \n \n Mengakses DOM<\/strong>\n<\/h3>\n\n
JavaScript menyediakan kaedah untuk memilih dan memanipulasi elemen DOM. <\/p>\n\n
\n \n \n Kaedah Pemilihan Biasa<\/strong>\n<\/h4>\n\n
\n
- \ngetElementById<\/strong>\nMemilih elemen mengikut IDnya.\n<\/li>\n<\/ol>\n\n
const title = document.getElementById(\"title\");\n console.log(title.innerText); \/\/ Output: Hello, DOM!\n<\/pre>\n\n\n\n\n
- \ngetElementsByClassName<\/strong>\nMemilih elemen mengikut nama kelasnya (mengembalikan koleksi).\n<\/li>\n<\/ol>\n\n
const paragraphs = document.getElementsByClassName(\"description\");\n console.log(paragraphs[0].innerText);\n<\/pre>\n\n\n\n\n
- \ngetElementsByTagName<\/strong>\nMemilih elemen mengikut nama tegnya (cth., div, p).\n<\/li>\n<\/ol>\n\n
const headings = document.getElementsByTagName(\"h1\");\n console.log(headings[0].innerText);\n<\/pre>\n\n\n\n\n
- \npemilih pertanyaan<\/strong>\nMemilih elemen pertama yang sepadan dengan pemilih CSS.\n<\/li>\n<\/ol>\n\n
const title = document.querySelector(\"#title\");\n<\/pre>\n\n\n\n\n
- \nquerySelectorAll<\/strong>\nMemilih semua elemen yang sepadan dengan pemilih CSS (mengembalikan NodeList).\n<\/li>\n<\/ol>\n\n
const paragraphs = document.querySelectorAll(\".description\");\n<\/pre>\n\n\n\n\n
\n\n\n \n \n Manipulasi DOM<\/strong>\n<\/h3>\n\n
Setelah dipilih, anda boleh mengubah suai elemen, atribut dan kandungan secara dinamik.<\/p>\n\n
\n \n \n 1. Menukar Kandungan<\/strong>\n<\/h4>\n\n<\/pre>\n
\n
- \ninnerHTML<\/strong>: Menetapkan atau mendapatkan kandungan HTML.\n<\/li>\n<\/ul>\n\n
document.getElementById(\"title\").innerHTML = \"Welcome to the DOM!\";\n<\/pre>\n\n\n\n\n
- \nInnerTeks<\/strong> atau textContent<\/strong>: Menetapkan atau mendapatkan teks biasa.\n<\/li>\n<\/ul>\n\n
document.getElementById(\"title\").innerText = \"Hello, World!\";\n<\/pre>\n\n\n\n\n \n \n 2. Menukar Atribut<\/strong>\n<\/h4>\n\n
\n
- Gunakan setAttribute dan getAttribute untuk mengubah suai atribut elemen.\n<\/li>\n<\/ul>\n\n
const link = document.querySelector(\"a\");\n link.setAttribute(\"href\", \"https:\/\/example.com\");\n<\/pre>\n\n\n\n\n
- Ubah suai secara langsung atribut seperti id, className atau src.\n<\/li>\n<\/ul>\n\n
const image = document.querySelector(\"img\");\n image.src = \"image.jpg\";\n<\/pre>\n\n\n\n\n \n \n 3. Menukar Gaya<\/strong>\n<\/h4>\n\n
Ubah suai sifat CSS secara langsung.
\n<\/p>\n\n\n \nDOM Example<\/title>\n <\/head>\n <body> <h1><a href="http://www.miracleart.cn/">国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂</a></h1>\n <h1>\n\n\n\n<p>The DOM represents it as:<br>\n<\/p>\n\n<pre>- Document\n - html\n - head\n - title\n - body\n - h1\n - p\n<\/pre>\n\n\n\n\n<hr>\n\n<h3>\n \n \n <strong>Menambah dan Mengalih Keluar Elemen<\/strong>\n<\/h3>\n\n<h4>\n \n \n <strong>1. Menambah Elemen<\/strong>\n<\/h4>\n\n<\/pre>\n<ul>\n<li>\n<strong>createElement<\/strong>: Mencipta elemen baharu.\n<\/li>\n<li>\n<strong>appendChild<\/strong>: Menambahkan elemen pada ibu bapa.\n<\/li>\n<\/ul>\n\n<pre> const title = document.getElementById(\"title\");\n console.log(title.innerText); \/\/ Output: Hello, DOM!\n<\/pre>\n\n\n\n<h4>\n \n \n <strong>2. Mengalih keluar Elemen<\/strong>\n<\/h4>\n\n<ul>\n<li>\n<strong>removeChild<\/strong>: Mengalih keluar elemen kanak-kanak.\n<\/li>\n<\/ul>\n\n<pre> const paragraphs = document.getElementsByClassName(\"description\");\n console.log(paragraphs[0].innerText);\n<\/pre>\n\n\n\n\n<hr>\n\n<h3>\n \n \n <strong>Pengendalian Acara di DOM<\/strong>\n<\/h3>\n\n<p>Acara ialah tindakan atau kejadian yang dikesan oleh penyemak imbas, seperti klik atau tekanan kekunci. <\/p>\n\n<h4>\n \n \n <strong>Menambah Pendengar Acara<\/strong>\n<\/h4>\n\n<p>Gunakan addEventListener untuk mengikat acara kepada elemen.<br>\n<\/p>\n\n<pre> const headings = document.getElementsByTagName(\"h1\");\n console.log(headings[0].innerText);\n<\/pre>\n\n\n\n<h4>\n \n \n <strong>Acara Biasa<\/strong>\n<\/h4>\n\n<ol>\n<li>\n<strong>Acara Tetikus<\/strong>: klik, dblclick, alih tetikus, keluar tetikus\n<\/li>\n<li>\n<strong>Acara Papan Kekunci<\/strong>: keydown, keyup\n<\/li>\n<li>\n<strong>Borang Acara<\/strong>: serahkan, tukar, fokus\n<\/li>\n<\/ol>\n\n\n<hr>\n\n<h3>\n \n \n <strong>Merentasi DOM<\/strong>\n<\/h3>\n\n<p>Anda boleh menavigasi antara elemen menggunakan perhubungan dalam pepohon DOM.<\/p>\n\n<h4>\n \n \n <strong>Ibu bapa dan Anak<\/strong>\n<\/h4>\n\n<ul>\n<li>\n<strong>parentNode<\/strong>: Mendapatkan nod induk.\n<\/li>\n<li>\n<strong>childNodes<\/strong>: Menyenaraikan semua nod anak.\n<\/li>\n<li>\n<strong>kanak-kanak<\/strong>: Menyenaraikan semua elemen kanak-kanak.\n<\/li>\n<\/ul>\n\n<pre> const title = document.querySelector(\"#title\");\n<\/pre>\n\n\n\n<h4>\n \n \n <strong>Adik beradik<\/strong>\n<\/h4>\n\n<ul>\n<li>\n<strong>nextSibling<\/strong>: Mendapat nod adik beradik seterusnya.\n<\/li>\n<li>\n<strong>Sibling sebelumnya<\/strong>: Mendapat nod adik-beradik sebelumnya.\n<\/li>\n<\/ul>\n\n\n<hr>\n\n<h3>\n \n \n <strong>Ciri DOM Terperinci<\/strong>\n<\/h3>\n\n<h4>\n \n \n <strong>1. Elemen Pengklonan<\/strong>\n<\/h4>\n\n<p>Buat pendua elemen menggunakan cloneNode.<br>\n<\/p>\n\n<pre> const paragraphs = document.querySelectorAll(\".description\");\n<\/pre>\n\n\n\n<h4>\n \n \n <strong>2. Bekerja dengan Kelas<\/strong>\n<\/h4>\n\n<p>Gunakan sifat classList untuk memanipulasi kelas.<br>\n<\/p>\n\n<pre> document.getElementById(\"title\").innerHTML = \"Welcome to the DOM!\";\n<\/pre>\n\n\n\n<h4>\n \n \n <strong>3. Menggunakan Templat<\/strong>\n<\/h4>\n\n<p>Templat HTML membenarkan kandungan boleh diguna semula.<br>\n<\/p>\n\n<pre> document.getElementById(\"title\").innerText = \"Hello, World!\";\n<\/pre>\n\n\n\n\n<hr>\n\n<h3>\n \n \n <strong>Amalan Terbaik untuk Manipulasi DOM<\/strong>\n<\/h3>\n\n<ol>\n<li>\n<p><strong>Meminimumkan Pengaliran Semula dan Mengecat Semula<\/strong>: <\/p>\n\n<ul>\n<li>Perubahan DOM kelompok untuk mengelakkan pemaparan yang berlebihan.\n<\/li>\n<li>Gunakan documentFragment untuk berbilang kemas kini.\n<\/li>\n<\/ul>\n<\/li>\n<li><p><strong>Gunakan Delegasi Acara<\/strong>:<br><br>\nLampirkan acara pada elemen induk dan bukannya elemen anak individu.<br>\n<\/p><\/li>\n<\/ol>\n\n<pre><!DOCTYPE html>\n<html>\n <head>\n <title>DOM Example<\/title>\n <\/head>\n <body>\n <h1>\n\n\n\n<p>The DOM represents it as:<br>\n<\/p>\n\n<pre>- Document\n - html\n - head\n - title\n - body\n - h1\n - p\n<\/pre>\n\n\n\n<ol>\n<li>\n<strong>Elak JavaScript Sebaris<\/strong>:\nGunakan skrip luaran atau addEventListener untuk pemisahan kod yang bersih.<\/li>\n<\/ol>\n\n\n<hr>\n\n<h3>\n \n \n <strong>Kesimpulan<\/strong>\n<\/h3>\n\n<p>JavaScript HTML DOM ialah alat yang berkuasa untuk mencipta halaman web yang dinamik dan interaktif. Dengan menguasai manipulasi DOM, pengendalian acara dan amalan terbaik, pembangun boleh membina aplikasi responsif dan mesra pengguna yang meningkatkan keseluruhan pengalaman pengguna.<\/p>\n\n<p><strong>Hai, saya Abhay Singh Kathayat!<\/strong><br>\nSaya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.<br>\nJangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.<\/p>\n\n\n \n\n \n <\/pre>"} </script> <meta http-equiv="Cache-Control" content="no-transform" /> <meta http-equiv="Cache-Control" content="no-siteapp" /> <script>var V_PATH="/";window.onerror=function(){ return true; };</script> </head> <body data-commit-time="2023-12-28T14:50:12+08:00" class="editor_body body2_2"> <link rel="stylesheet" type="text/css" href="/static/csshw/stylehw.css"> <header> <div id="377j5v51b" class="head"> <div id="377j5v51b" class="haed_left"> <div id="377j5v51b" class="haed_logo"> <a href="http://www.miracleart.cn/ms/" title="" class="haed_logo_a"> <img src="/static/imghw/logo.png" alt="" class="haed_logoimg"> </a> </div> <div id="377j5v51b" class="head_nav"> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="masyarakat" class="head_nava head_nava-template1">masyarakat</a> <div class="377j5v51b" id="dropdown-template1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ms/article.html" title="Artikel" class="languagechoosea on">Artikel</a> <a href="http://www.miracleart.cn/ms/faq/zt" title="Topik" class="languagechoosea">Topik</a> <a href="http://www.miracleart.cn/ms/wenda.html" title="Soal Jawab" class="languagechoosea">Soal Jawab</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Belajar" class="head_nava head_nava-template1_1">Belajar</a> <div class="377j5v51b" id="dropdown-template1_1" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ms/course.html" title="Kursus" class="languagechoosea on">Kursus</a> <a href="http://www.miracleart.cn/ms/dic/" title="Kamus Pengaturcaraan" class="languagechoosea">Kamus Pengaturcaraan</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Perpustakaan Alatan" class="head_nava head_nava-template1_2">Perpustakaan Alatan</a> <div class="377j5v51b" id="dropdown-template1_2" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ms/toolset/development-tools" title="Alat pembangunan" class="languagechoosea on">Alat pembangunan</a> <a href="http://www.miracleart.cn/ms/toolset/website-source-code" title="Kod sumber laman web" class="languagechoosea">Kod sumber laman web</a> <a href="http://www.miracleart.cn/ms/toolset/php-libraries" title="Perpustakaan PHP" class="languagechoosea">Perpustakaan PHP</a> <a href="http://www.miracleart.cn/ms/toolset/js-special-effects" title="Kesan khas JS" class="languagechoosea on">Kesan khas JS</a> <a href="http://www.miracleart.cn/ms/toolset/website-materials" title="Bahan laman web" class="languagechoosea on">Bahan laman web</a> <a href="http://www.miracleart.cn/ms/toolset/extension-plug-ins" title="Pemalam sambungan" class="languagechoosea on">Pemalam sambungan</a> </div> </div> </div> <div id="377j5v51b" class="head_navs"> <a href="http://www.miracleart.cn/ms/ai" title="Alat AI" class="head_nava head_nava-template1_3">Alat AI</a> </div> <div id="377j5v51b" class="head_navs"> <a href="javascript:;" title="Masa lapang" class="head_nava head_nava-template1_3">Masa lapang</a> <div class="377j5v51b" id="dropdown-template1_3" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="http://www.miracleart.cn/ms/game" title="Muat Turun Permainan" class="languagechoosea on">Muat Turun Permainan</a> <a href="http://www.miracleart.cn/ms/mobile-game-tutorial/" title="Tutorial Permainan" class="languagechoosea">Tutorial Permainan</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="head_search"> <input id="key_words" onkeydown="if (event.keyCode == 13) searchs('ms')" class="search-input" type="text" autocomplete="off" name="keywords" required="required" placeholder="Block,address,transaction,news" value=""> <a href="javascript:;" title="cari" onclick="searchs('ms')"><img src="/static/imghw/find.png" alt="cari"></a> </div> <div id="377j5v51b" class="head_right"> <div id="377j5v51b" class="haed_language"> <a href="javascript:;" class="layui-btn haed_language_btn">Melayu<i class="layui-icon layui-icon-triangle-d"></i></a> <div class="377j5v51b" id="dropdown-template" style="display: none;"> <div id="377j5v51b" class="languagechoose"> <a href="javascript:setlang('zh-cn');" title="簡(jiǎn)體中文" class="languagechoosea">簡(jiǎn)體中文</a> <a href="javascript:setlang('en');" title="English" class="languagechoosea">English</a> <a href="javascript:setlang('zh-tw');" title="繁體中文" class="languagechoosea">繁體中文</a> <a href="javascript:setlang('ja');" title="日本語(yǔ)" class="languagechoosea">日本語(yǔ)</a> <a href="javascript:setlang('ko');" title="???" class="languagechoosea">???</a> <a href="javascript:;" title="Melayu" class="languagechoosea">Melayu</a> <a href="javascript:setlang('fr');" title="Fran?ais" class="languagechoosea">Fran?ais</a> <a href="javascript:setlang('de');" title="Deutsch" class="languagechoosea">Deutsch</a> </div> </div> </div> <span id="377j5v51b" class="head_right_line"></span> <div style="display: block;" id="login" class="haed_login "> <a href="javascript:;" title="Login" class="haed_logina ">Login</a> </div> <div style="display: block;" id="reg" class="head_signup login"> <a href="javascript:;" title="singup" class="head_signupa">singup</a> </div> </div> </div> </header> <main> <div id="377j5v51b" class="Article_Details_main"> <div id="377j5v51b" class="Article_Details_main1"> <div id="377j5v51b" class="Article_Details_main1M"> <div id="377j5v51b" class="phpgenera_Details_mainL1"> <a href="http://www.miracleart.cn/ms/" title="Rumah" class="phpgenera_Details_mainL1a">Rumah</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL1a">hujung hadapan web</a> <img src="/static/imghw/top_right.png" alt="" /> <a href="http://www.miracleart.cn/ms/js-tutorial.html" class="phpgenera_Details_mainL1a">tutorial js</a> <img src="/static/imghw/top_right.png" alt="" /> <span>Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif</span> </div> <div id="377j5v51b" class="Articlelist_txts"> <div id="377j5v51b" class="Articlelist_txts_info"> <h1 class="Articlelist_txts_title">Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif</h1> <div id="377j5v51b" class="Articlelist_txts_info_head"> <div id="377j5v51b" class="author_info"> <a href="http://www.miracleart.cn/ms/member/1468492.html" class="author_avatar"> <img class="lazy" data-src="https://img.php.cn/upload/avatar/000/000/001/66ea8147b1057383.png" src="/static/imghw/default1.png" alt="Mary-Kate Olsen"> </a> <div id="377j5v51b" class="author_detail"> <a href="http://www.miracleart.cn/ms/member/1468492.html" class="author_name">Mary-Kate Olsen</a> </div> </div> </div> <span id="377j5v51b" class="Articlelist_txts_time">Dec 20, 2024 am 02:57 AM</span> </div> </div> <hr /> <div id="377j5v51b" class="article_main php-article"> <div id="377j5v51b" class="article-list-left detail-content-wrap content"> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3461856641"> </ins> <p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173463463582725.jpg" class="lazy" alt="Mastering the JavaScript HTML DOM: Building Dynamic and Interactive Webpages"></p> <h3> <strong>JavaScript HTML DOM: Panduan Lengkap</strong> </h3> <p><strong>Model Objek Dokumen (DOM)</strong> ialah antara muka pengaturcaraan untuk dokumen web. Ia mewakili struktur halaman web sebagai pepohon objek, membolehkan pembangun memanipulasi HTML dan CSS menggunakan JavaScript. Dengan menguasai DOM, anda boleh membuat halaman web yang dinamik dan interaktif.</p> <hr> <h3> <strong>Apakah itu DOM?</strong> </h3> <p>DOM ialah perwakilan berstruktur bagi dokumen HTML. Ia membenarkan JavaScript mengakses dan memanipulasi elemen, atribut dan kandungan halaman web secara dinamik. </p> <h4> Contoh: </h4> <p>Untuk HTML ini:<br> </p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1> <p>The DOM represents it as:<br> </p> <pre class="brush:php;toolbar:false">- Document - html - head - title - body - h1 - p </pre> <hr> <h3> <strong>Mengakses DOM</strong> </h3> <p>JavaScript menyediakan kaedah untuk memilih dan memanipulasi elemen DOM. </p> <h4> <strong>Kaedah Pemilihan Biasa</strong> </h4> <ol> <li> <strong>getElementById</strong> Memilih elemen mengikut IDnya. </li> </ol> <pre class="brush:php;toolbar:false"> const title = document.getElementById("title"); console.log(title.innerText); // Output: Hello, DOM! </pre> <ol> <li> <strong>getElementsByClassName</strong> Memilih elemen mengikut nama kelasnya (mengembalikan koleksi). </li> </ol> <pre class="brush:php;toolbar:false"> const paragraphs = document.getElementsByClassName("description"); console.log(paragraphs[0].innerText); </pre> <ol> <li> <strong>getElementsByTagName</strong> Memilih elemen mengikut nama tegnya (cth., div, p). </li> </ol> <pre class="brush:php;toolbar:false"> const headings = document.getElementsByTagName("h1"); console.log(headings[0].innerText); </pre> <ol> <li> <strong>pemilih pertanyaan</strong> Memilih elemen pertama yang sepadan dengan pemilih CSS. </li> </ol> <pre class="brush:php;toolbar:false"> const title = document.querySelector("#title"); </pre> <ol> <li> <strong>querySelectorAll</strong> Memilih semua elemen yang sepadan dengan pemilih CSS (mengembalikan NodeList). </li> </ol> <pre class="brush:php;toolbar:false"> const paragraphs = document.querySelectorAll(".description"); </pre> <hr> <h3> <strong>Manipulasi DOM</strong> </h3> <p>Setelah dipilih, anda boleh mengubah suai elemen, atribut dan kandungan secara dinamik.</p> <h4> <strong>1. Menukar Kandungan</strong> </h4> </pre> <ul> <li> <strong>innerHTML</strong>: Menetapkan atau mendapatkan kandungan HTML. </li> </ul> <pre class="brush:php;toolbar:false"> document.getElementById("title").innerHTML = "Welcome to the DOM!"; </pre> <ul> <li> <strong>InnerTeks</strong> atau <strong>textContent</strong>: Menetapkan atau mendapatkan teks biasa. </li> </ul> <pre class="brush:php;toolbar:false"> document.getElementById("title").innerText = "Hello, World!"; </pre> <h4> <strong>2. Menukar Atribut</strong> </h4> <ul> <li>Gunakan setAttribute dan getAttribute untuk mengubah suai atribut elemen. </li> </ul> <pre class="brush:php;toolbar:false"> const link = document.querySelector("a"); link.setAttribute("href", "https://example.com"); </pre> <ul> <li>Ubah suai secara langsung atribut seperti id, className atau src. </li> </ul> <pre class="brush:php;toolbar:false"> const image = document.querySelector("img"); image.src = "image.jpg"; </pre> <h4> <strong>3. Menukar Gaya</strong> </h4> <p>Ubah suai sifat CSS secara langsung.<br> </p> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1> <p>The DOM represents it as:<br> </p> <pre class="brush:php;toolbar:false">- Document - html - head - title - body - h1 - p </pre> <hr> <h3> <strong>Menambah dan Mengalih Keluar Elemen</strong> </h3> <h4> <strong>1. Menambah Elemen</strong> </h4> </pre> <ul> <li> <strong>createElement</strong>: Mencipta elemen baharu. </li> <li> <strong>appendChild</strong>: Menambahkan elemen pada ibu bapa. </li> </ul> <pre class="brush:php;toolbar:false"> const title = document.getElementById("title"); console.log(title.innerText); // Output: Hello, DOM! </pre> <h4> <strong>2. Mengalih keluar Elemen</strong> </h4> <ul> <li> <strong>removeChild</strong>: Mengalih keluar elemen kanak-kanak. </li> </ul> <pre class="brush:php;toolbar:false"> const paragraphs = document.getElementsByClassName("description"); console.log(paragraphs[0].innerText); </pre> <hr> <h3> <strong>Pengendalian Acara di DOM</strong> </h3> <p>Acara ialah tindakan atau kejadian yang dikesan oleh penyemak imbas, seperti klik atau tekanan kekunci. </p> <h4> <strong>Menambah Pendengar Acara</strong> </h4> <p>Gunakan addEventListener untuk mengikat acara kepada elemen.<br> </p> <pre class="brush:php;toolbar:false"> const headings = document.getElementsByTagName("h1"); console.log(headings[0].innerText); </pre> <h4> <strong>Acara Biasa</strong> </h4> <ol> <li> <strong>Acara Tetikus</strong>: klik, dblclick, alih tetikus, keluar tetikus </li> <li> <strong>Acara Papan Kekunci</strong>: keydown, keyup </li> <li> <strong>Borang Acara</strong>: serahkan, tukar, fokus </li> </ol> <hr> <h3> <strong>Merentasi DOM</strong> </h3> <p>Anda boleh menavigasi antara elemen menggunakan perhubungan dalam pepohon DOM.</p> <h4> <strong>Ibu bapa dan Anak</strong> </h4> <ul> <li> <strong>parentNode</strong>: Mendapatkan nod induk. </li> <li> <strong>childNodes</strong>: Menyenaraikan semua nod anak. </li> <li> <strong>kanak-kanak</strong>: Menyenaraikan semua elemen kanak-kanak. </li> </ul> <pre class="brush:php;toolbar:false"> const title = document.querySelector("#title"); </pre> <h4> <strong>Adik beradik</strong> </h4> <ul> <li> <strong>nextSibling</strong>: Mendapat nod adik beradik seterusnya. </li> <li> <strong>Sibling sebelumnya</strong>: Mendapat nod adik-beradik sebelumnya. </li> </ul> <hr> <h3> <strong>Ciri DOM Terperinci</strong> </h3> <h4> <strong>1. Elemen Pengklonan</strong> </h4> <p>Buat pendua elemen menggunakan cloneNode.<br> </p> <pre class="brush:php;toolbar:false"> const paragraphs = document.querySelectorAll(".description"); </pre> <h4> <strong>2. Bekerja dengan Kelas</strong> </h4> <p>Gunakan sifat classList untuk memanipulasi kelas.<br> </p> <pre class="brush:php;toolbar:false"> document.getElementById("title").innerHTML = "Welcome to the DOM!"; </pre> <h4> <strong>3. Menggunakan Templat</strong> </h4> <p>Templat HTML membenarkan kandungan boleh diguna semula.<br> </p> <pre class="brush:php;toolbar:false"> document.getElementById("title").innerText = "Hello, World!"; </pre> <hr> <h3> <strong>Amalan Terbaik untuk Manipulasi DOM</strong> </h3> <ol> <li> <p><strong>Meminimumkan Pengaliran Semula dan Mengecat Semula</strong>: </p> <ul> <li>Perubahan DOM kelompok untuk mengelakkan pemaparan yang berlebihan. </li> <li>Gunakan documentFragment untuk berbilang kemas kini. </li> </ul> </li> <li><p><strong>Gunakan Delegasi Acara</strong>:<br><br> Lampirkan acara pada elemen induk dan bukannya elemen anak individu.<br> </p></li> </ol> <pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <title>DOM Example</title> </head> <body> <h1> <p>The DOM represents it as:<br> </p> <pre class="brush:php;toolbar:false">- Document - html - head - title - body - h1 - p </pre> <ol> <li> <strong>Elak JavaScript Sebaris</strong>: Gunakan skrip luaran atau addEventListener untuk pemisahan kod yang bersih.</li> </ol> <hr> <h3> <strong>Kesimpulan</strong> </h3> <p>JavaScript HTML DOM ialah alat yang berkuasa untuk mencipta halaman web yang dinamik dan interaktif. Dengan menguasai manipulasi DOM, pengendalian acara dan amalan terbaik, pembangun boleh membina aplikasi responsif dan mesra pengguna yang meningkatkan keseluruhan pengalaman pengguna.</p> <p><strong>Hai, saya Abhay Singh Kathayat!</strong><br> Saya seorang pembangun tindanan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.<br> Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.</p> </pre><p>Atas ialah kandungan terperinci Menguasai JavaScript HTML DOM: Membina Halaman Web Dinamik dan Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!</p> </div> </div> <div id="377j5v51b" class="wzconShengming_sp"> <div id="377j5v51b" class="bzsmdiv_sp">Kenyataan Laman Web ini</div> <div>Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn</div> </div> </div> <ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="2507867629"></ins> <div id="377j5v51b" class="AI_ToolDetails_main4sR"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5902227090019525" data-ad-slot="3653428331" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> --> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat AI Hot</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173410641626608.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undress AI Tool" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/ai/undress-ai-tool" title="Undress AI Tool" class="phpmain_tab2_mids_title"> <h3>Undress AI Tool</h3> </a> <p>Gambar buka pakaian secara percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411540686492.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Undresser.AI Undress" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/ai/undresserai-undress" title="Undresser.AI Undress" class="phpmain_tab2_mids_title"> <h3>Undresser.AI Undress</h3> </a> <p>Apl berkuasa AI untuk mencipta foto bogel yang realistik</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411552797167.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="AI Clothes Remover" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/ai/ai-clothes-remover" title="AI Clothes Remover" class="phpmain_tab2_mids_title"> <h3>AI Clothes Remover</h3> </a> <p>Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173411529149311.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Clothoff.io" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/ai/clothoffio" title="Clothoff.io" class="phpmain_tab2_mids_title"> <h3>Clothoff.io</h3> </a> <p>Penyingkiran pakaian AI</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/ai_manual/001/246/273/173414504068133.jpg?x-oss-process=image/resize,m_fill,h_50,w_50" src="/static/imghw/default1.png" alt="Video Face Swap" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/ai/video-swap" title="Video Face Swap" class="phpmain_tab2_mids_title"> <h3>Video Face Swap</h3> </a> <p>Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Artikel Panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821119.html" title="Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan" class="phpgenera_Details_mainR4_bottom_title">Panduan: bilah bintang simpan fail lokasi/simpan fail hilang/tidak menyimpan</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By DDD</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796828723.html" title="Agnes Tachyon Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Agnes Tachyon Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>1 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796827210.html" title="Oguri Cap Build Guide | Musume Derby Pretty" class="phpgenera_Details_mainR4_bottom_title">Oguri Cap Build Guide | Musume Derby Pretty</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>2 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821436.html" title="Dune: Awakening - Lanjutan Planetologist Quest Walkthrough" class="phpgenera_Details_mainR4_bottom_title">Dune: Awakening - Lanjutan Planetologist Quest Walkthrough</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/1796821278.html" title="Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper" class="phpgenera_Details_mainR4_bottom_title">Tarikh Segala -galanya: Panduan Hubungan Dirk dan Harper</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <span>4 minggu yang lalu</span> <span>By Jack chen</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ms/article.html">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hottools2.png" alt="" /> <h2>Alat panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_bottom"> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab96f0f39f7357.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Notepad++7.3.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/92" title="Notepad++7.3.1" class="phpmain_tab2_mids_title"> <h3>Notepad++7.3.1</h3> </a> <p>Editor kod yang mudah digunakan dan percuma</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97a3baad9677.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Cina" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/93" title="SublimeText3 versi Cina" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Cina</h3> </a> <p>Versi Cina, sangat mudah digunakan</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58ab97ecd1ab2670.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Hantar Studio 13.0.1" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/121" title="Hantar Studio 13.0.1" class="phpmain_tab2_mids_title"> <h3>Hantar Studio 13.0.1</h3> </a> <p>Persekitaran pembangunan bersepadu PHP yang berkuasa</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d0e0fc74683535.jpg?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="Dreamweaver CS6" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/469" title="Dreamweaver CS6" class="phpmain_tab2_mids_title"> <h3>Dreamweaver CS6</h3> </a> <p>Alat pembangunan web visual</p> </div> </div> <div id="377j5v51b" class="phpmain_tab2_mids_top"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_top_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" class="lazy" data-src="https://img.php.cn/upload/manual/000/000/001/58d34035e2757995.png?x-oss-process=image/resize,m_fill,h_50,w_72" src="/static/imghw/default1.png" alt="SublimeText3 versi Mac" /> </a> <div id="377j5v51b" class="phpmain_tab2_mids_info"> <a href="http://www.miracleart.cn/ms/toolset/development-tools/500" title="SublimeText3 versi Mac" class="phpmain_tab2_mids_title"> <h3>SublimeText3 versi Mac</h3> </a> <p>Perisian penyuntingan kod peringkat Tuhan (SublimeText3)</p> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ms/ai">Tunjukkan Lagi</a> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4"> <div id="377j5v51b" class="phpmain1_4R_readrank"> <div id="377j5v51b" class="phpmain1_4R_readrank_top"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/hotarticle2.png" alt="" /> <h2>Topik panas</h2> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottom"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/gmailyxdlrkzn" title="Di manakah pintu masuk log masuk untuk e-mel gmail?" class="phpgenera_Details_mainR4_bottom_title">Di manakah pintu masuk log masuk untuk e-mel gmail?</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>8637</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>17</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/java-tutorial" title="Tutorial Java" class="phpgenera_Details_mainR4_bottom_title">Tutorial Java</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1783</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>16</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/cakephp-tutor" title="Tutorial CakePHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial CakePHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1728</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>56</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/laravel-tutori" title="Tutorial Laravel" class="phpgenera_Details_mainR4_bottom_title">Tutorial Laravel</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1577</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>28</span> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms"> <a href="http://www.miracleart.cn/ms/faq/php-tutorial" title="Tutorial PHP" class="phpgenera_Details_mainR4_bottom_title">Tutorial PHP</a> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_info"> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/eyess.png" alt="" /> <span>1442</span> </div> <div id="377j5v51b" class="phpgenera_Details_mainR4_bottoms_infos"> <img src="/static/imghw/tiezi.png" alt="" /> <span>31</span> </div> </div> </div> </div> <div id="377j5v51b" class="phpgenera_Details_mainR3_more"> <a href="http://www.miracleart.cn/ms/faq/zt">Tunjukkan Lagi</a> </div> </div> </div> </div> </div> <div id="377j5v51b" class="Article_Details_main2"> <div id="377j5v51b" class="phpgenera_Details_mainL4"> <div id="377j5v51b" class="phpmain1_2_top"> <a href="javascript:void(0);" class="phpmain1_2_top_title">Related knowledge<img src="/static/imghw/index2_title2.png" alt="" /></a> </div> <div id="377j5v51b" class="phpgenera_Details_mainL4_info"> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796822063.html" title="Java vs JavaScript: Membersihkan kekeliruan" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035046165294.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Java vs JavaScript: Membersihkan kekeliruan" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796822063.html" title="Java vs JavaScript: Membersihkan kekeliruan" class="phphistorical_Version2_mids_title">Java vs JavaScript: Membersihkan kekeliruan</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:27 AM</span> <p class="Articlelist_txts_p">Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796821632.html" title="Komen JavaScript: Penjelasan ringkas" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175026483186295.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Komen JavaScript: Penjelasan ringkas" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796821632.html" title="Komen JavaScript: Penjelasan ringkas" class="phphistorical_Version2_mids_title">Komen JavaScript: Penjelasan ringkas</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 19, 2025 am 12:40 AM</span> <p class="Articlelist_txts_p">JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796827639.html" title="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/431/639/175130445135407.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796827639.html" title="Bagaimana untuk bekerja dengan tarikh dan masa di JS?" class="phphistorical_Version2_mids_title">Bagaimana untuk bekerja dengan tarikh dan masa di JS?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 01, 2025 am 01:27 AM</span> <p class="Articlelist_txts_p">Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796828200.html" title="Kenapa anda harus meletakkan tag di bahagian bawah ?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139053194540.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Kenapa anda harus meletakkan tag di bahagian bawah ?" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796828200.html" title="Kenapa anda harus meletakkan tag di bahagian bawah ?" class="phphistorical_Version2_mids_title">Kenapa anda harus meletakkan tag di bahagian bawah ?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:22 AM</span> <p class="Articlelist_txts_p">PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796822037.html" title="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035006093854.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796822037.html" title="JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju" class="phphistorical_Version2_mids_title">JavaScript vs Java: Perbandingan Komprehensif untuk Pemaju</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:21 AM</span> <p class="Articlelist_txts_p">JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796822137.html" title="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175035157160537.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796822137.html" title="JavaScript: Meneroka jenis data untuk pengekodan yang cekap" class="phphistorical_Version2_mids_title">JavaScript: Meneroka jenis data untuk pengekodan yang cekap</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 20, 2025 am 12:46 AM</span> <p class="Articlelist_txts_p">JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796828191.html" title="Apakah peristiwa yang menggelegak dan menangkap di Dom?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175139034116786.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apakah peristiwa yang menggelegak dan menangkap di Dom?" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796828191.html" title="Apakah peristiwa yang menggelegak dan menangkap di Dom?" class="phphistorical_Version2_mids_title">Apakah peristiwa yang menggelegak dan menangkap di Dom?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jul 02, 2025 am 01:19 AM</span> <p class="Articlelist_txts_p">Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.</p> </div> <div id="377j5v51b" class="phphistorical_Version2_mids"> <a href="http://www.miracleart.cn/ms/faq/1796820615.html" title="Apa perbezaan antara Java dan JavaScript?" class="phphistorical_Version2_mids_img"> <img onerror="this.onerror=''; this.src='/static/imghw/default1.png'" src="/static/imghw/default1.png" class="lazy" data-src="https://img.php.cn/upload/article/001/253/068/175012302052703.jpg?x-oss-process=image/resize,m_fill,h_207,w_330" alt="Apa perbezaan antara Java dan JavaScript?" /> </a> <a href="http://www.miracleart.cn/ms/faq/1796820615.html" title="Apa perbezaan antara Java dan JavaScript?" class="phphistorical_Version2_mids_title">Apa perbezaan antara Java dan JavaScript?</a> <span id="377j5v51b" class="Articlelist_txts_time">Jun 17, 2025 am 09:17 AM</span> <p class="Articlelist_txts_p">Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.</p> </div> </div> <a href="http://www.miracleart.cn/ms/web-designer.html" class="phpgenera_Details_mainL4_botton"> <span>See all articles</span> <img src="/static/imghw/down_right.png" alt="" /> </a> </div> </div> </div> </main> <footer> <div id="377j5v51b" class="footer"> <div id="377j5v51b" class="footertop"> <img src="/static/imghw/logo.png" alt=""> <p>Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！</p> </div> <div id="377j5v51b" class="footermid"> <a href="http://www.miracleart.cn/ms/about/us.html">Tentang kita</a> <a href="http://www.miracleart.cn/ms/about/disclaimer.html">Penafian</a> <a href="http://www.miracleart.cn/ms/update/article_0_1.html">Sitemap</a> </div> <div id="377j5v51b" class="footerbottom"> <p> ? php.cn All rights reserved </p> </div> </div> </footer> <input type="hidden" id="verifycode" value="/captcha.html"> <link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css?2' type='text/css' media='all' /> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://www.miracleart.cn/" title="国产av日韩一区二区三区精品">国产av日韩一区二区三区精品</a> <div class="friend-links"> </div> </div> </footer> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="fwzzo" class="pl_css_ganrao" style="display: none;"><var id="fwzzo"></var><td id="fwzzo"><ruby id="fwzzo"></ruby></td><strike id="fwzzo"></strike><nav id="fwzzo"></nav><td id="fwzzo"><center id="fwzzo"><output id="fwzzo"><nav id="fwzzo"></nav></output></center></td><meter id="fwzzo"></meter><tfoot id="fwzzo"></tfoot><var id="fwzzo"></var><th id="fwzzo"><object id="fwzzo"></object></th><nav id="fwzzo"><menu id="fwzzo"></menu></nav><abbr id="fwzzo"><li id="fwzzo"><source id="fwzzo"></source></li></abbr><source id="fwzzo"></source><i id="fwzzo"><nav id="fwzzo"></nav></i><dl id="fwzzo"></dl><big id="fwzzo"></big><div id="fwzzo"><acronym id="fwzzo"></acronym></div><ins id="fwzzo"></ins><button id="fwzzo"><option id="fwzzo"></option></button><big id="fwzzo"></big><rt id="fwzzo"><meter id="fwzzo"><menuitem id="fwzzo"><rp id="fwzzo"></rp></menuitem></meter></rt><em id="fwzzo"><legend id="fwzzo"></legend></em><sub id="fwzzo"></sub><table id="fwzzo"><nobr id="fwzzo"><s id="fwzzo"></s></nobr></table><style id="fwzzo"><tbody id="fwzzo"><tt id="fwzzo"><b id="fwzzo"></b></tt></tbody></style><legend id="fwzzo"><object id="fwzzo"><big id="fwzzo"></big></object></legend><dl id="fwzzo"></dl><li id="fwzzo"></li><menuitem id="fwzzo"><rp id="fwzzo"><input id="fwzzo"></input></rp></menuitem><sub id="fwzzo"></sub><var id="fwzzo"></var><pre id="fwzzo"></pre><big id="fwzzo"><option id="fwzzo"><output id="fwzzo"><nav id="fwzzo"></nav></output></option></big><dd id="fwzzo"></dd><dfn id="fwzzo"><ol id="fwzzo"><wbr id="fwzzo"></wbr></ol></dfn><sup id="fwzzo"></sup><dd id="fwzzo"><form id="fwzzo"><track id="fwzzo"></track></form></dd><progress id="fwzzo"><em id="fwzzo"><noframes id="fwzzo"></noframes></em></progress><option id="fwzzo"></option><kbd id="fwzzo"><tr id="fwzzo"></tr></kbd><object id="fwzzo"></object><sup id="fwzzo"><center id="fwzzo"><optgroup id="fwzzo"></optgroup></center></sup><input id="fwzzo"><object id="fwzzo"><td id="fwzzo"></td></object></input><bdo id="fwzzo"></bdo><dfn id="fwzzo"></dfn><dl id="fwzzo"></dl><blockquote id="fwzzo"><th id="fwzzo"><object id="fwzzo"><s id="fwzzo"></s></object></th></blockquote><b id="fwzzo"><small id="fwzzo"><bdo id="fwzzo"><dl id="fwzzo"></dl></bdo></small></b><nobr id="fwzzo"></nobr><dfn id="fwzzo"></dfn><ins id="fwzzo"></ins><var id="fwzzo"></var><strong id="fwzzo"><dl id="fwzzo"><legend id="fwzzo"><dfn id="fwzzo"></dfn></legend></dl></strong><label id="fwzzo"><th id="fwzzo"></th></label><li id="fwzzo"></li><output id="fwzzo"><th id="fwzzo"><menu id="fwzzo"></menu></th></output><strike id="fwzzo"><font id="fwzzo"><tbody id="fwzzo"><small id="fwzzo"></small></tbody></font></strike><strong id="fwzzo"><strike id="fwzzo"><tfoot id="fwzzo"></tfoot></strike></strong><noframes id="fwzzo"></noframes><del id="fwzzo"></del><thead id="fwzzo"><listing id="fwzzo"><sup id="fwzzo"><cite id="fwzzo"></cite></sup></listing></thead><dl id="fwzzo"></dl><rt id="fwzzo"></rt><progress id="fwzzo"></progress><wbr id="fwzzo"><acronym id="fwzzo"><ruby id="fwzzo"></ruby></acronym></wbr><table id="fwzzo"><nobr id="fwzzo"><s id="fwzzo"></s></nobr></table><center id="fwzzo"></center><noframes id="fwzzo"><rp id="fwzzo"><input id="fwzzo"></input></rp></noframes><noframes id="fwzzo"></noframes><dl id="fwzzo"></dl><thead id="fwzzo"></thead><tr id="fwzzo"></tr><tr id="fwzzo"></tr><tr id="fwzzo"><dfn id="fwzzo"><button id="fwzzo"><strong id="fwzzo"></strong></button></dfn></tr><em id="fwzzo"><del id="fwzzo"><menu id="fwzzo"></menu></del></em><pre id="fwzzo"><tfoot id="fwzzo"><b id="fwzzo"><abbr id="fwzzo"></abbr></b></tfoot></pre><label id="fwzzo"></label><em id="fwzzo"></em><nobr id="fwzzo"><label id="fwzzo"><menuitem id="fwzzo"></menuitem></label></nobr><option id="fwzzo"></option><bdo id="fwzzo"></bdo><td id="fwzzo"><dl id="fwzzo"><delect id="fwzzo"></delect></dl></td><center id="fwzzo"><acronym id="fwzzo"><noframes id="fwzzo"></noframes></acronym></center><option id="fwzzo"></option><tbody id="fwzzo"></tbody><dl id="fwzzo"><blockquote id="fwzzo"></blockquote></dl><center id="fwzzo"></center><strong id="fwzzo"></strong><del id="fwzzo"><ul id="fwzzo"></ul></del><cite id="fwzzo"></cite><acronym id="fwzzo"></acronym><style id="fwzzo"><menu id="fwzzo"></menu></style><big id="fwzzo"><option id="fwzzo"><pre id="fwzzo"><style id="fwzzo"></style></pre></option></big><ul id="fwzzo"><var id="fwzzo"><strong id="fwzzo"><td id="fwzzo"></td></strong></var></ul><i id="fwzzo"><tr id="fwzzo"></tr></i><thead id="fwzzo"></thead><center id="fwzzo"></center><ruby id="fwzzo"><menu id="fwzzo"></menu></ruby><center id="fwzzo"></center><button id="fwzzo"><table id="fwzzo"><optgroup id="fwzzo"></optgroup></table></button><b id="fwzzo"><optgroup id="fwzzo"><strong id="fwzzo"></strong></optgroup></b></div> </html>