cari
Rumahhujung hadapan webSoal Jawab bahagian hadapanCara mengubah suai nod DOM menggunakan JavaScript

Dengan pembangunan aplikasi web, JavaScript telah menjadi bahagian penting. JavaScript boleh digunakan untuk mengubah suai kandungan web dan mencapai kesan dinamik. Antaranya, mengubah suai DOM adalah bahagian yang sangat penting kerana ia adalah kunci untuk berinteraksi dengan halaman web.

Apakah itu DOM?
DOM ialah Model Objek Dokumen, yang merupakan perwakilan struktur pokok bagi dokumen HTML. Dalam dokumen ini, setiap elemen HTML ialah nod, seperti: ,

,

, dsb. Nod ini boleh mempunyai nod dan atribut anak Contohnya, nod

boleh mengandungi nod anak , dan ia juga boleh mempunyai atribut, seperti kelas, id, dsb. JavaScript mengubah kandungan halaman web dengan memanipulasi nod ini.

Bagaimana untuk memilih nod?
Untuk memanipulasi DOM, kita perlu memilih nod. Ini boleh dicapai dalam pelbagai cara, terutamanya kaedah berikut:

  1. Pilih nod mengikut id

Gunakan kaedah document.getElementById() untuk memilih nod berdasarkan id yang ditentukan Pilih nod. Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

Kod di atas akan memilih elemen HTML dengan id="myNode".

  1. Pilih nod mengikut kelas

Untuk memilih satu atau lebih nod dengan atribut kelas yang sama, anda boleh menggunakan kaedah getElementsByClassName(). Seperti yang ditunjukkan di bawah:

var myNodes = document.getElementsByClassName("classNode");

Kod di atas akan memilih semua elemen HTML yang atribut kelasnya sama dengan "classNode".

  1. Pilih nod mengikut nama teg

Untuk memilih semua nod dengan nama teg yang ditentukan, anda boleh menggunakan kaedah getElementsByTagName(). Ia kelihatan seperti ini:

var myNodes = document.getElementsByTagName("p");

Kod di atas akan memilih semua

Pengendalian atribut nod DOM
Nod DOM mempunyai banyak atribut, seperti: id, kelas, tajuk, dsb. Kami boleh mengubah suai atau mendapatkan nilai sifat ini melalui JavaScript. Berikut ialah beberapa kaedah manipulasi atribut nod DOM yang biasa digunakan:

  1. Dapatkan atau tetapkan atribut innerHTML

Anda boleh menggunakan kaedah getInnerHTML() untuk mendapatkan atribut innerHTML bagi nod. Anda juga boleh menggunakan kaedah setInnerHTML() untuk menetapkan sifat innerHTML nod. Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";
  1. Mendapatkan atau menetapkan sifat innerText

Mendapatkan sifat innerText boleh menggunakan kaedah getInnerText() dan menetapkan sifat innerText menggunakan kaedah setInnerText(). Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";
  1. Dapatkan atau tetapkan atribut nodeType

Atribut nodeType mengembalikan jenis nod semasa Anda boleh menggunakan kaedah getNodeType(). untuk mendapatkan atribut nodeType nod. Anda juga boleh menggunakan kaedah setNodeType() untuk menetapkan atribut nodeType sesuatu nod. Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;
  1. Dapatkan atau tetapkan atribut nodeName

Atribut nodeName mengembalikan nama nod Anda boleh menggunakan kaedah getnodeName() untuk dapatkan atribut nodeName bagi nod. Anda juga boleh menggunakan kaedah setnodeName() untuk menetapkan atribut nodeName sesuatu nod. Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";
  1. Dapatkan atau tetapkan atribut nodeValue

Atribut nodeValue mengembalikan atau menetapkan nilai nod. Sifat nodeValue boleh diperoleh menggunakan kaedah getNodeValue(). Untuk menetapkan nilai harta, gunakan kaedah setNodeValue(). Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";
  1. Dapatkan atau tetapkan atribut className

Atribut className mengembalikan atau menetapkan nama kelas nod. Atribut className boleh diperoleh menggunakan kaedah getclassName(). Untuk menetapkan nilai atribut anda boleh menggunakan kaedah setclassName(). Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";
  1. Dapatkan atau tetapkan atribut id

Atribut id mengembalikan atau menetapkan id nod. Atribut id boleh diperoleh menggunakan kaedah getId(). Untuk menetapkan nilai atribut anda boleh menggunakan kaedah setId(). Seperti yang ditunjukkan di bawah:

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

Penciptaan dan Penyisipan Nod DOM
Selain mengubah suai sifat nod DOM, anda juga boleh mencipta nod DOM dan memasukkannya ke dalam struktur DOM sedia ada.

Buat nod DOM
Untuk mencipta nod DOM, anda boleh menggunakan kaedah createElement(). Seperti yang ditunjukkan di bawah:

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);</p>

Sisipkan nod DOM
Terdapat titik berikut untuk memasukkan nod DOM:

  1. Sisipkan nod induk
    Gunakan kaedah appendChild() kepada Elemen ditambah pada penghujung nod induk. Seperti yang ditunjukkan di bawah:
var parent = document.getElementById("parent");

// 创建新的 
  •  元素 var newNode = document.createElement("li"); // 设置元素的内容 newNode.innerHTML = "新的列表项"; // 将新元素添加到父节点的末尾 parent.appendChild(newNode);
    1. Sisipkan sibling nod
      Gunakan kaedah insertBefore() untuk memasukkan nod baharu sebelum nod lain. Seperti yang ditunjukkan di bawah:
    var newNode = document.createElement("li");
    
    // 设置元素的内容
    newNode.innerHTML = "新的列表项";
    
    // 将新元素添加到 "node" 元素之前
    parent.insertBefore(newNode, node);
    1. Ganti Nod
      Gunakan kaedah replaceChild() untuk menggantikan nod. Seperti yang ditunjukkan di bawah:
    var newNode = document.createElement("li");
    
    // 设置元素的内容
    newNode.innerHTML = "新的列表项";
    
    // 替换父节点下的第二个子节点
    parent.replaceChild(newNode, parent.childNodes[1]);

    Pengalihan keluar nod DOM
    Nod DOM boleh dialih keluar dalam pelbagai cara. Berikut ialah beberapa kaedah yang biasa digunakan:

    1. Mengalih keluar nod anak
      Gunakan kaedah removeChild() untuk mengalih keluar nod anak. Seperti yang ditunjukkan di bawah:
    var parent = document.getElementById("parent");
    
    // 移除 "node" 元素
    parent.removeChild(node);
    1. Mengalih keluar dirinya sendiri
      Nod itu sendiri boleh dialih keluar menggunakan kaedah remove(). Seperti yang ditunjukkan di bawah:
    var node = document.getElementById("node");
    
    // 移除节点本身
    node.remove();

    Ringkasan
    Dengan memanipulasi DOM dengan JavaScript, kandungan halaman web, termasuk penanda HTML dan kandungan teks, boleh diubah suai dengan mudah. Kita boleh memilih nod, menukar sifat nod, mencipta dan memasukkan elemen baharu dan memadamkan nod sedia ada. Operasi ini membolehkan tapak web mengemas kini dan bertindak balas secara dinamik kepada tingkah laku pengguna.

  • Atas ialah kandungan terperinci Cara mengubah suai nod DOM menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

    Kenyataan
    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
    Saiz Ekosistem React: Menavigasi Landskap KompleksSaiz Ekosistem React: Menavigasi Landskap KompleksApr 28, 2025 am 12:21 AM

    TonavigateReact'scomplexplexecystemefectively, fahamiThetoolsandlibraries, accentizeTheirstrengthsandWeaknesses, andintegratethemtoenhancedevelopment.startwithcorereactconceptsandusestate, thengradlyintroduceMoreSlikePompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompleKompiker

    Bagaimana React menggunakan kekunci untuk mengenal pasti item senarai dengan cekapBagaimana React menggunakan kekunci untuk mengenal pasti item senarai dengan cekapApr 28, 2025 am 12:20 AM

    ReactusesKeystoefficientyDidentyListItemsByprovidingStableIdentityToeachelement.1) KeysallowreacttotrackChangesInlistSwithoutre-renderingheentireList.2) PilihUniqueAndStableKeys, mengelakkanAringArrayIndices.3) correcteyusageSageSageSageSageSageSymifiFicelyimproves

    Debugging Isu yang berkaitan dengan kunci dalam React: Mengenal pasti dan menyelesaikan masalahDebugging Isu yang berkaitan dengan kunci dalam React: Mengenal pasti dan menyelesaikan masalahApr 28, 2025 am 12:17 AM

    KeysinreactarecrucialForOptimizingTheringProcessandManagingDynamicListSeffectively.tospotandfixkey-Relatedissues: 1) adduniquekeystolistitemstoavoidwarningsandperformanceissues, 2) UseUniquIdierFiersfromdatainsteadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicesshipsfeadofindicesshipsfeadofindicesshipsfeadofindicessfeadofindicessfeadofindices,

    Mengikat data satu arah React: Memastikan aliran data yang boleh diramalMengikat data satu arah React: Memastikan aliran data yang boleh diramalApr 28, 2025 am 12:05 AM

    Mengikat data satu arah React memastikan data mengalir dari komponen induk ke komponen kanak-kanak. 1) Data mengalir ke satu, dan perubahan dalam keadaan komponen induk boleh diserahkan kepada komponen kanak -kanak, tetapi komponen kanak -kanak tidak dapat secara langsung mempengaruhi keadaan komponen induk. 2) Kaedah ini meningkatkan ramalan aliran data dan memudahkan debugging dan ujian. 3) Dengan menggunakan komponen dan konteks terkawal, interaksi pengguna dan komunikasi antara komponen dapat dikendalikan sambil mengekalkan aliran data sehala.

    Amalan terbaik untuk memilih dan menguruskan kekunci dalam komponen ReactAmalan terbaik untuk memilih dan menguruskan kekunci dalam komponen ReactApr 28, 2025 am 12:01 AM

    KeysinreactarecrucialforefficientdomupdatesandReconciliation.1) yang boleh dipilih, unik, danmeaningfulkeys, likeitemids.2) FornestedLists, UseUniqueySateachLevel.3) EvoleUsingArtAringArrayIrdicesorGeneratingKeysdynamicallytopreventPrevanceSsues.

    Mengoptimumkan Prestasi dengan UseState () dalam Aplikasi ReactMengoptimumkan Prestasi dengan UseState () dalam Aplikasi ReactApr 27, 2025 am 12:22 AM

    useState () iscrucialforoptimizingreactappperformanceduetoitsimpactonre-rendersandupdates.tooptimize: 1) useusecallbacktomemoizeFunctionsandpreventunnessaryre-renders.2)

    Berkongsi keadaan antara komponen menggunakan konteks dan useState ()Berkongsi keadaan antara komponen menggunakan konteks dan useState ()Apr 27, 2025 am 12:19 AM

    Gunakan konteks dan digunakan untuk berkongsi negeri kerana mereka dapat memudahkan pengurusan negeri dalam aplikasi reaksi yang besar. 1) Mengurangkan propdrilling, 2) kod yang lebih jelas, 3) lebih mudah untuk menguruskan keadaan global. Walau bagaimanapun, perhatikan prestasi overhead dan debugging. Penggunaan rasional konteks dan teknologi pengoptimuman dapat meningkatkan kecekapan dan pemeliharaan aplikasi.

    Kesan kekunci yang salah pada kemas kini DOM maya ReactKesan kekunci yang salah pada kemas kini DOM maya ReactApr 27, 2025 am 12:19 AM

    Menggunakan kekunci yang salah boleh menyebabkan masalah prestasi dan tingkah laku yang tidak dijangka dalam aplikasi React. 1) Kuncinya adalah pengenal unik item senarai, membantu React mengemas kini DOM maya dengan cekap. 2) Menggunakan kunci yang sama atau tidak unik akan menyebabkan item senarai disusun semula dan keadaan komponen hilang. 3) Menggunakan pengenal yang stabil dan unik sebagai kunci dapat mengoptimumkan prestasi dan mengelakkan penanaman semula penuh. 4) Gunakan alat seperti Eslint untuk mengesahkan ketepatan kunci. Penggunaan kunci yang betul memastikan aplikasi React yang cekap dan boleh dipercayai.

    See all articles

    Alat AI Hot

    Undresser.AI Undress

    Undresser.AI Undress

    Apl berkuasa AI untuk mencipta foto bogel yang realistik

    AI Clothes Remover

    AI Clothes Remover

    Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

    Undress AI Tool

    Undress AI Tool

    Gambar buka pakaian secara percuma

    Clothoff.io

    Clothoff.io

    Penyingkiran pakaian AI

    Video Face Swap

    Video Face Swap

    Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

    Alat panas

    Penyesuai Pelayan SAP NetWeaver untuk Eclipse

    Penyesuai Pelayan SAP NetWeaver untuk Eclipse

    Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.

    SublimeText3 versi Inggeris

    SublimeText3 versi Inggeris

    Disyorkan: Versi Win, menyokong gesaan kod!

    MantisBT

    MantisBT

    Mantis ialah alat pengesan kecacatan berasaskan web yang mudah digunakan yang direka untuk membantu dalam pengesanan kecacatan produk. Ia memerlukan PHP, MySQL dan pelayan web. Lihat perkhidmatan demo dan pengehosan kami.

    DVWA

    DVWA

    Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

    SecLists

    SecLists

    SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.