JavaScript DOM元素增删改步骤详解
这次给大家带来JavaScript DOM元素增删改步骤详解，JavaScript DOM元素增删改的注意事项有哪些，下面就是实战案例，一起来看一下。
DOM概念
DOM（Document Object Model）：文档对象模型。
通过开发者工具的Elements标签页可以查看
通过开发者工具的Sources标签页也可以观察到整个文档是有一系列节点
整个文档是由一系列节点对象组成的一棵树。
节点（Node）包括元素节点（1）、属性节点（2）、文本节点（3）(1..2..3..代表节点类型)_
var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);th1代表一个元素节点（nodeType=1），nodeName就是标签名（th），元素节点的nodeValue=null。
var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);getAttributeNode方法是获取元素的属性节点，此时输出的节点类型为属性节点（2），节点名称就是属性名（name），节点值就是属性值（sex）
var txtl = th1.firstChild； alert(txtl.nodeType); alert(txtl.nodeName); alert(txtl.nodeValue)
txt1是一个文本节点（3），节点名称固定就是#text，节点值就是文本内容。
获取元素
（1）getElementByid
根据元素的id属性来获取元素，获取到的是一个元素。
根据标签名来获取元素，结果是一个元素集合。
（3）getElementsByClassName
根据class属性来获取元素，结果是一个元素集合。
（4）getElementsByName
根据name属性来获取元素，结果是一个元素集合。
总结：获取元素可以根据标签名获取、也可以根据id、name、class属性来获取。根据id属性获取的结果是一个元素，而其它的获取的是一个集合。
document对象支持以上四种，而element对象仅支持getElementsByTagName和getElementsByClassName。
修改元素
（1）修改内容
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerText = "我被单击了！";
}通过.innerText属性可读取或设置标签的内容文本
function fun(){
//获取到指定元素
var p1 = document.getElementById("p1");
p1.innerHTML = "我被单击了！<br>换行了";
}也可以通过innerHTML属性获取或设置内容文本
俩者的区别：innerHTML会按照HTML规则解析文本，而innerText只是当做普通文本内容。
（1） 修改样式
A．xxx．style.属性名=“值”
B．xxx．classname=“…”(相当于修改了class的属性)
<style>
.style1{
color:red;
font-size:20px;
text-decoration:underline;
}
.style2{
color:blue;
font-size:32px;
text-decoration:line-through;
}
</style>
</head>
<body>
<p id="p1">修改样式测试</p>
<input type="button"value="样式一"onclick="style1()">
<input type="button"value="样式二"onclick="style2()">
</body>
<script>
var p1 = document.getElementById("p1");
function style1(){
p1.className = "style1"
}
function style2(){
p1.className = "style2"
}
</script>
</html>添加删除元素
（1）CreateElement建一个元素节点
CreateElement("p")创建一个段落
（2）createTextNode创建一个文本节点
createTextNode("文本内容")，创建一个值为“文本内容”的文本节点.
（3）appendChild添加子节点
（4）removeChild 删除子节点
动态添加
<body>
<p id="p1">
</p>
<input type="button"value="添加段落"onclick="add()">
</body>
<script>
//全局变量
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建文本节点
var content= "第"+index+"段落";
var txt = document.createTextNode(content);
//创建文本节点添加的段落
p.appendChild(txt);
//将段落添加到p中
var p1 = document.getElementById("p1");
p1.appendChild(p);
index++
}
</script>动态删除
<body>
<p id="p1">
<p id="p1">第1段落 </p>
<p id="p2">第2段落 </p>
<p id="p3">第3段落 </p>
<p id="p4">第4段落 </p>
</p>
<input type="button"value="删除第二段"onclick="del()">
</body>
<script>
function del(){
//先找到父节点
var p1 = document.getElementById("p1");
//再找到要删除的节点
var p2 = document.getElementById("p2");
//将要删除的节点从父节点中移除
p1.removeChild(p2);
}
</script>
</html>这种方法是分别找到父节点和要删除的节点，然后执行删除操作。该方法的一个前提是知道父节点是谁
那么如果并不知道父节点是谁，该如何删除呢
p2.parentNode.removeChild(p2);
这个方法并不需要父节点是谁
动态的添加和删除：
动态添加和动态删除，删除动态添加的奇数段落
思路1：获取p1 下的所以段落，遍历所以的段落，将序号为奇数的段落删除。
function del(){
var p1 = document.getElementById("p1");
var paras = p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判
思路2：添加通过设置class属性，然后通过getElementsByclassName来获取奇数行
（也可以从后往前删）
<body>
<p id="p1">
</p>
<input type="button" value="添加段落" onclick="add()">
<input type="button" value="删除奇数第二段" onclick="de1()">
</body>
<script>
var index = 1;
function add(){
//创建一个段落标签
var p = document.createElement("p");
//创建文本节点
var content = "第" + index + "段落";
var txt = document.createTextNode(content);
//将文本节点添加到段落
p.appendChild(txt);
if (index % 2 == 1) {
p.setAttribute("class","odd");
}
//将段落添加到p中
var p1 = document.getElementById("p1");
p1.appendChild(p);
index++;
}
/*function de1(){
var p1 = document.getElementById("p1");
var paras =p1.getElementsByTagName("p");
for(var i in paras){
if((i+1)%2 == 1){
p1.removeChild(paras[i]);
}
}
}*/
functionde1() {
var p1 = document.getElementById("p1");
var paras = p1.getElementsByClassName("odd");
// varparas = document.getElementsByName("odd");
for (var i = paras.length - 1; i >= 0; i--) {
p1.removeChild(paras[i]);
}
}
</script>
</html>导航
Document：是根节点
ParentNode：获取父节点
childNodes：获取所有子节点
firstChild：第一个子节点
lastChlid：获取最后一个子节点
</head>
<body>
<p name="第一章">
<p id="p1">第一段<span>第一句</span><span>第二句</span></p>
</p>
<input type="button"value="获取父节点的name属性"onclick="fun1()">
<input type="button"value="显示p1子节点的个数"onclick="fun2()">
<input type="button"value="显示p1第一个子节点的类型"onclick="fun3()">
<input type="button"value="显示p1最后一个子节点的类型"onclick="fun4()">
</body>
<script>
var p1 =document.getElementById("p1");
function fun1(){
var value=p1.parentNode.getAttribute("name");
alert(value);
}
function fun2(){
var chlids = p1.childNodes;
alert(chlids.length)
}
function fun3(){
alert(p1.firstChild.nodeType);
}
function fun4(){
alert(p1.lastChild.nodeType);
}
</script>
</html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
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
1379
52
Penjelasan terperinci tentang mendapatkan hak pentadbir dalam Win11
Mar 08, 2024 pm 03:06 PM
Sistem pengendalian Windows ialah salah satu sistem pengendalian yang paling popular di dunia, dan versi baharunya Win11 telah menarik perhatian ramai. Dalam sistem Win11, mendapatkan hak pentadbir adalah operasi penting Hak pentadbir membolehkan pengguna melakukan lebih banyak operasi dan tetapan pada sistem. Artikel ini akan memperkenalkan secara terperinci cara mendapatkan kebenaran pentadbir dalam sistem Win11 dan cara mengurus kebenaran dengan berkesan. Dalam sistem Win11, hak pentadbir dibahagikan kepada dua jenis: pentadbir tempatan dan pentadbir domain. Pentadbir tempatan mempunyai hak pentadbiran penuh ke atas komputer tempatan
Disyorkan: Projek pengesanan dan pengecaman muka sumber terbuka JS yang sangat baik
Apr 03, 2024 am 11:55 AM
Teknologi pengesanan dan pengecaman muka adalah teknologi yang agak matang dan digunakan secara meluas. Pada masa ini, bahasa aplikasi Internet yang paling banyak digunakan ialah JS Melaksanakan pengesanan muka dan pengecaman pada bahagian hadapan Web mempunyai kelebihan dan kekurangan berbanding dengan pengecaman muka bahagian belakang. Kelebihan termasuk mengurangkan interaksi rangkaian dan pengecaman masa nyata, yang sangat memendekkan masa menunggu pengguna dan meningkatkan pengalaman pengguna termasuk: terhad oleh saiz model, ketepatannya juga terhad. Bagaimana untuk menggunakan js untuk melaksanakan pengesanan muka di web? Untuk melaksanakan pengecaman muka di Web, anda perlu biasa dengan bahasa dan teknologi pengaturcaraan yang berkaitan, seperti JavaScript, HTML, CSS, WebRTC, dll. Pada masa yang sama, anda juga perlu menguasai visi komputer yang berkaitan dan teknologi kecerdasan buatan. Perlu diingat bahawa kerana reka bentuk bahagian Web
Penjelasan terperinci tentang operasi bahagian dalam Oracle SQL
Mar 10, 2024 am 09:51 AM
Penjelasan terperinci tentang operasi bahagi dalam OracleSQL Dalam OracleSQL, operasi bahagi ialah operasi matematik yang biasa dan penting, digunakan untuk mengira hasil pembahagian dua nombor. Bahagian sering digunakan dalam pertanyaan pangkalan data, jadi memahami operasi bahagian dan penggunaannya dalam OracleSQL adalah salah satu kemahiran penting untuk pembangun pangkalan data. Artikel ini akan membincangkan pengetahuan berkaitan operasi bahagian dalam OracleSQL secara terperinci dan menyediakan contoh kod khusus untuk rujukan pembaca. 1. Operasi bahagian dalam OracleSQL
Penjelasan terperinci tentang peranan dan penggunaan pengendali modulo PHP
Mar 19, 2024 pm 04:33 PM
Operator modulo (%) dalam PHP digunakan untuk mendapatkan baki pembahagian dua nombor. Dalam artikel ini, kami akan membincangkan peranan dan penggunaan pengendali modulo secara terperinci, dan memberikan contoh kod khusus untuk membantu pembaca memahami dengan lebih baik. 1. Peranan pengendali modulo Dalam matematik, apabila kita membahagi integer dengan integer lain, kita mendapat hasil bagi dan baki. Sebagai contoh, apabila kita membahagi 10 dengan 3, hasil bahagi ialah 3 dan selebihnya ialah 1. Operator modulo digunakan untuk mendapatkan baki ini. 2. Penggunaan operator modulo Dalam PHP, gunakan simbol % untuk mewakili modulus
Penjelasan terperinci tentang fungsi sistem panggilan sistem linux().
Feb 22, 2024 pm 08:21 PM
Penjelasan terperinci tentang fungsi sistem panggilan sistem Linux() Panggilan sistem ialah bahagian yang sangat penting dalam sistem pengendalian Linux Ia menyediakan cara untuk berinteraksi dengan kernel sistem. Antaranya, fungsi system() adalah salah satu fungsi panggilan sistem yang biasa digunakan. Artikel ini akan memperkenalkan penggunaan fungsi system() secara terperinci dan memberikan contoh kod yang sepadan. Konsep Asas Panggilan Sistem Panggilan sistem ialah satu cara untuk atur cara pengguna berinteraksi dengan kernel sistem pengendalian. Program pengguna meminta sistem pengendalian dengan memanggil fungsi panggilan sistem
Penjelasan terperinci tentang perintah curl Linux
Feb 21, 2024 pm 10:33 PM
Penjelasan terperinci tentang perintah curl Linux Ringkasan: curl ialah alat baris arahan yang berkuasa yang digunakan untuk komunikasi data dengan pelayan. Artikel ini akan memperkenalkan penggunaan asas perintah curl dan memberikan contoh kod sebenar untuk membantu pembaca memahami dan menggunakan arahan dengan lebih baik. 1. Apakah curl? curl ialah alat baris arahan yang digunakan untuk menghantar dan menerima pelbagai permintaan rangkaian. Ia menyokong berbilang protokol, seperti HTTP, FTP, TELNET, dll., dan menyediakan fungsi yang kaya, seperti muat naik fail, muat turun fail, penghantaran data, proksi
Analisis terperinci laluan pembelajaran bahasa C
Feb 18, 2024 am 10:38 AM
Sebagai bahasa pengaturcaraan yang digunakan secara meluas dalam bidang pembangunan perisian, bahasa C adalah pilihan pertama bagi ramai pengaturcara pemula. Mempelajari bahasa C bukan sahaja dapat membantu kita mewujudkan pengetahuan asas pengaturcaraan, tetapi juga meningkatkan kebolehan menyelesaikan masalah dan pemikiran kita. Artikel ini akan memperkenalkan secara terperinci pelan hala tuju pembelajaran bahasa C untuk membantu pemula merancang proses pembelajaran mereka dengan lebih baik. 1. Belajar tatabahasa asas Sebelum mula mempelajari bahasa C, kita perlu memahami peraturan tatabahasa asas bahasa C terlebih dahulu. Ini termasuk pembolehubah dan jenis data, operator, pernyataan kawalan (seperti pernyataan if,
Hubungan antara js dan vue
Mar 11, 2024 pm 05:21 PM
Hubungan antara js dan vue: 1. JS sebagai asas pembangunan Web; 2. Kebangkitan Vue.js sebagai rangka kerja hadapan 3. Hubungan pelengkap antara JS dan Vue; Vue.
