JavaScript中如何创建、使用和删除dom节点实例详解
创建节点
为了创建一个新的节点，可以使用createElement和createTextNode.如果新建完成，可以用appendChild()把节点添加到DOM树中。
创建一个元素P，并把设置innerHTML属性
var myp = document.createElement('p'); myp.innerHTML = 'yet another';
元素P建完成了，就可以随意修改添加属性了
myp.style.border = '2px dotted blue'
接下来可以用appendChild把新的节点添加到DOM树中的。
document.body.appendChild(myp)
使用DOM的方法
用innerHTML方法的确很简单，我们可以用纯的dom方法来实现上面的功能。
新建一个文本节点(yet another)
新建一个段落
把文本节点添加到段落中。
把段落添加到body中
// 创建p var myp = document.createElement('p'); // 创建一个文本节点 var myt = document.createTextNode('one more paragraph') myp.appendChild(myt); // 创建一个STRONG元素 var str = document.createElement('strong'); str.appendChild(document.createTextNode('bold')); // 把STRONG元素添加到P中 myp.appendChild(str); // 把P元素添加到BODY中 document.body.appendChild(myp); //结果<p>one more paragraph<strong>bold</strong></p> cloneNode()
另一种新建节点的方法是，我们可以用cloneNode来复制一个节点。cloneNode()可以传入一个boolean参数。如果为true就是深度复制，包括他的子节点，false，仅仅复制自己。
首先获取要复制的元素。
var el = document.getElementsByTagName('p')[1];//<p><em>second</em> paragraph</p>
先不用深度复制。
document.body.appendChild(el.cloneNode(false))
我们发现页面并没有变化，因为仅仅复制的是元素p。和下面的效果一样。
document.body.appendChild(document.createElement('p'));
如果用深度复制，包括p下面所有的子节点都会被复制。当然包括文本节点和EM元素。
document.body.appendChild(el.cloneNode(true))
insertBefore()
用appendChild，就是把元素添加到最后。而insertBefore方法可以更精确控制插入元素的位置。
elementNode.insertBefore(new_node,existing_node)
实例
document.body.insertBefore( document.createTextNode('boo!'), document.body.firstChild );
意思就是新建一个文本节点，把它作为body元素的第一个节点。
删除节点
要从DOM树删除一个节点，我们可以使用removeChild().我们来看看要操作的HTML
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
来看看下面代码，删除第二段
var myp = document.getElementsByTagName('p')[1]; var removed = document.body.removeChild(myp);
removed节点就是删除的节点。以后还可以用这删除的节点。
我们也可以用replaceChild()方法。这个方法是删除一个节点，并用另一个节点替代。当执行上个删除节点操作之后，结果如下
<body> <p class="opener">first paragraph</p> <p id="closer">final</p> <!-- and that's about it --> </body>
我们来看看replaceChild的使用。我们把上一个删除节点来替代第二个p
var replaced = document.body.replaceChild(removed, p);
和removeChild返回一样。replaced就是移除的节点。现在结果为
<body> <p class="opener">first paragraph</p> <p><em>second</em> paragraph</p> <!-- and that's about it --> </body>
Atas ialah kandungan terperinci JavaScript中如何创建、使用和删除dom节点实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Bagaimana untuk memadam nota Xiaohongshu
Mar 21, 2024 pm 08:12 PM
Bagaimana untuk memadamkan nota Xiaohongshu? pandangan! Tutorial penggunaan Xiaohongshu Cara memadam nota Xiaohongshu 1. Mula-mula buka APP Xiaohongshu dan masukkan halaman utama, pilih [Saya] di sudut kanan bawah untuk memasuki kawasan khas 2. Kemudian di kawasan Saya, klik pada halaman nota sebagai ditunjukkan di bawah , pilih nota yang anda mahu padamkan;
Adakah benar anda boleh disekat dan dipadamkan pada WeChat dan tidak dapat ditambahkan secara kekal?
Apr 08, 2024 am 11:41 AM
1. Pertama sekali, adalah palsu untuk menyekat dan memadam seseorang secara kekal dan tidak menambahkannya secara kekal. Jika anda ingin menambah pihak lain selepas anda menyekat dan memadamkannya, anda hanya memerlukan persetujuan pihak lain. 2. Jika pengguna menyekat seseorang, pihak yang satu lagi tidak akan dapat menghantar mesej kepada pengguna, melihat kalangan rakan pengguna atau membuat panggilan dengan pengguna. 3. Menyekat tidak bermakna memadamkan pihak lain daripada senarai kenalan WeChat pengguna. 4. Jika pengguna memadamkan pihak lain daripada senarai kenalan WeChat pengguna selepas menyekat mereka, tiada cara untuk pulih selepas pemadaman. 5. Jika pengguna ingin menambah pihak yang satu lagi sebagai rakan semula, pihak yang satu lagi perlu bersetuju dan menambah pengguna itu semula.
Apakah folder yang ditemui.000? Bolehkah folder yang dijumpai.000 dipadamkan?
Mar 13, 2024 pm 08:52 PM
Dalam proses penggunaan harian komputer, anda mungkin menerima mesej ralat bahawa fail found.000 hilang dan rosak Apakah folder ini dijumpai.000? Bolehkah ia dipadam jika ia tidak berguna lagi? Oleh kerana ramai orang tidak tahu fail ini, izinkan saya memberitahu anda tentang folder yang dijumpai.000 secara terperinci~ 1. Apakah folder yang dijumpai.000 Apabila komputer hilang sebahagian atau sepenuhnya kerana penutupan tidak sah, , anda boleh mencari folder khas bernama "found.000" dan fail dengan sambungan ".chk" yang terkandung di dalamnya dalam direktori yang ditentukan dalam partition sistem. Ini "fo
Bagaimana untuk memadam keluaran Xiaohongshu? Bagaimana untuk memulihkan selepas pemadaman?
Mar 21, 2024 pm 05:10 PM
Sebagai platform e-dagang sosial yang popular, Xiaohongshu telah menarik sejumlah besar pengguna untuk berkongsi kehidupan harian dan pengalaman membeli-belah mereka. Kadangkala kami mungkin secara tidak sengaja menerbitkan beberapa kandungan yang tidak sesuai, yang perlu dipadamkan dalam masa untuk mengekalkan imej peribadi kami dengan lebih baik atau mematuhi peraturan platform. 1. Bagaimana untuk memadam keluaran Xiaohongshu? 1. Log masuk ke akaun Xiaohongshu anda dan masukkan halaman utama peribadi anda. 2. Di bahagian bawah halaman utama peribadi, cari pilihan "Ciptaan Saya" dan klik untuk masuk. 3. Pada halaman "Ciptaan Saya", anda boleh melihat semua kandungan yang diterbitkan, termasuk nota, video, dsb. 4. Cari kandungan yang perlu dipadamkan dan klik butang "..." di sebelah kanan. 5. Dalam menu pop timbul, pilih pilihan "Padam". 6. Selepas mengesahkan pemadaman, kandungan akan hilang dari laman utama peribadi anda dan halaman awam.
Apakah fail hiberfil.sys? Bolehkah hiberfil.sys dipadamkan?
Mar 15, 2024 am 09:49 AM
Baru-baru ini, ramai netizen bertanya kepada editor, apakah itu fail hiberfil.sys? Bolehkah hiberfil.sys mengambil banyak ruang pemacu C dan dipadamkan? Editor boleh memberitahu anda bahawa fail hiberfil.sys boleh dipadamkan. Mari kita lihat butiran di bawah. hiberfil.sys ialah fail tersembunyi dalam sistem Windows dan juga fail hibernasi sistem. Ia biasanya disimpan dalam direktori akar pemacu C, dan saiznya bersamaan dengan saiz memori yang dipasang sistem. Fail ini digunakan apabila komputer sedang hibernasi dan mengandungi data memori sistem semasa supaya ia boleh dipulihkan dengan cepat kepada keadaan sebelumnya semasa pemulihan. Oleh kerana saiznya adalah sama dengan kapasiti memori, ia mungkin mengambil jumlah ruang cakera keras yang lebih besar. hiber
Cara memadam sepenuhnya Pembantu Pemindahan Fail WeChat_Pengenalan kepada cara menutup Pembantu Pemindahan Fail WeChat
Mar 20, 2024 pm 08:31 PM
Pembantu pemindahan fail WeChat tersedia untuk setiap pengguna Sesetengah pengguna menggunakannya sebagai memo untuk merekodkan beberapa perkara. Jadi bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat? Izinkan saya memperkenalkannya kepada anda secara terperinci di bawah. Bagaimana untuk memadam sepenuhnya Pembantu Pemindahan Fail WeChat Jawapan: [WeChat]-[Tekan lama Pembantu Pemindahan Fail]-[Padam sembang ini]. Langkah-langkah khusus: 1. Mula-mula buka perisian WeChat Selepas memasuki halaman utama, kami mencari [Pembantu Pemindahan Fail] dan tekan dan tahan 2. Kemudian pop timbul akan ditandakan sebagai belum dibaca, sematkan sembang ke bahagian atas, lakukan tidak memaparkan sembang, dan memadam sembang Di sini Kita boleh klik [Padam sembang ini];
Bagaimana untuk memadam sepenuhnya sejarah sembang TikTok
May 07, 2024 am 11:14 AM
1. Buka apl Douyin, klik [Mesej] di bahagian bawah antara muka dan klik entri perbualan sembang yang perlu dipadamkan. 2. Tekan lama mana-mana rekod sembang, klik [Multiple Select], dan semak rekod sembang yang ingin anda padamkan. 3. Klik butang [Padam] di penjuru kanan sebelah bawah dan pilih [Sahkan pemadaman] dalam tetingkap pop timbul untuk memadam rekod ini secara kekal.
Bagaimana untuk menghantar fail kepada orang lain di TikTok? Bagaimana untuk memadam fail yang dihantar kepada orang lain?
Mar 22, 2024 am 08:30 AM
Di Douyin, pengguna bukan sahaja boleh berkongsi butiran kehidupan dan bakat mereka, tetapi juga berinteraksi dengan pengguna lain. Dalam proses ini, kadangkala kita perlu menghantar fail kepada pengguna lain, seperti gambar, video, dll. Jadi, bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Bagaimana untuk menghantar fail kepada orang lain di Douyin? 1. Buka Douyin dan masukkan antara muka sembang di mana anda ingin menghantar fail. 2. Klik tanda "+" dalam antara muka sembang dan pilih "Fail". 3. Dalam pilihan fail, anda boleh memilih untuk menghantar gambar, video, audio dan fail lain. Selepas memilih fail yang ingin anda hantar, klik "Hantar". 4. Tunggu pihak lain menerima fail anda Setelah pihak lain menerimanya, fail tersebut akan berjaya dipindahkan. 2. Bagaimana untuk memadam fail yang dihantar kepada orang lain di Douyin? 1. Buka Douyin dan masukkan teks yang anda hantar.
