Detaillierte Erläuterung der Schritte zum Hinzufügen, Löschen und Ändern von JavaScript-DOM-Elementen-js-Tutorial-php.cn

Dieses Mal erkläre ich Ihnen ausführlich die Schritte zum Hinzufügen, Löschen und Ändern von DOM-Elementen mit JavaScript Was sind die Vorsichtsmaßnahmen zum Hinzufügen, Löschen und Ändern von JavaScript-DOM-Elementen? Hier sind praktische Fälle, werfen wir einen Blick darauf.

DOM-Konzept

DOM (Document Object Model): Dokumentobjektmodell.

Sie können es über die Registerkarte „Elemente“ der Entwicklertools anzeigen

Sie können auch über die Registerkarte „Quellen“ der Entwicklertools beobachten, dass das gesamte Dokument eine Reihe von Knoten aufweist

Das gesamte Dokument besteht aus einem Baum, der aus einer Reihe von Knotenobjekten besteht.

Knoten (Knoten) umfasst Elementknoten (1), Attributknoten (2), Textknoten (3) (1..2..3.. stellt den Knotentyp dar)_

var th1= document.getElementById("th1");
alert(th1.nodeType);
alert(th1.nodeName);
alert(th1.nodeValue);

Nach dem Login kopieren

th1 stellt einen Elementknoten dar (nodeType=1), nodeName ist der Labelname (th) und nodeValue=null des Elementknotens.

var attr1=th1.getAttributeNode("name");
alert(attr1.nodeType);
alert(attr1.nodeName);
alert(attr1.nodeValue);

Nach dem Login kopieren

Die getAttributeNode-Methode dient zum Abrufen des Attributknotens des Elements. Zu diesem Zeitpunkt ist der Ausgabeknotentyp der Attributknoten (2), der Knotenname ist der Attributname (Name) und der Knoten value ist der Attributwert (Geschlecht)

var txtl = th1.firstChild；
alert(txtl.nodeType);
alert(txtl.nodeName);
alert(txtl.nodeValue)

Nach dem Login kopieren

txt1 ist ein Textknoten (3), der Knotenname ist auf #text festgelegt und der Knotenwert ist der Textinhalt.

Element abrufen

(1)

getElementByid

Element basierend auf dem ID-Attribut des Elements abrufen get ist ein Element.

(2)

getElementsByTagName

Rufen Sie Elemente basierend auf Tag-Namen ab, und das Ergebnis ist eine Sammlung von Elementen.

(3)

getElementsByClassName

Rufen Sie Elemente basierend auf dem Klassenattribut ab, und das Ergebnis ist eine Sammlung von Elementen.

(4)

getElementsByName

Rufen Sie Elemente basierend auf dem Namensattribut ab, und das Ergebnis ist eine Sammlung von Elementen.

Zusammenfassung: Das Abrufen von Elementen kann basierend auf dem Tag-Namen oder basierend auf den ID-, Namens- und Klassenattributen erfolgen. Das auf der Grundlage des ID-Attributs erhaltene Ergebnis ist ein Element, während die anderen Ergebnisse eine Sammlung sind.

Das Dokumentobjekt unterstützt die oben genannten vier Typen, während das Elementobjekt nur

und getElementsByTagName unterstützt. getElementsByClassName

Element ändern

(1) Inhalt ändern

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerText = "我被单击了！";
}

Nach dem Login kopieren

Der Inhaltstext des Etiketts kann über das .innerText-Attribut gelesen oder festgelegt werden

function fun(){
  //获取到指定元素
  var p1 = document.getElementById("p1");
  p1.innerHTML = "我被单击了！<br>换行了";
}

Nach dem Login kopieren

Sie können den Inhaltstext auch über das innere

HTML-Attribut abrufen oder festlegen

Der Unterschied zwischen den beiden: innerHTML analysiert den Text gemäß HTML-Regeln, innerText dagegen Behandeln Sie es einfach als gewöhnlichen Textinhalt.

(1) Stil ändern

A. xxx. style.Attribute name="value"

B． xxx. classname="..." (entspricht dem Ändern der Klassenattribute)

<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>

Nach dem Login kopieren

Elemente hinzufügen und löschen

(1)

CreateElementErstellen ein Elementknoten

Absatz erstellenCreateElement("p")

(2)

createTextNodeTextknoten erstellen

, einen Wert erstellen mit „ Textinhalt" Textknoten.createTextNode("文本内容")

(3)

appendChildUntergeordneten Knoten hinzufügen

(4)

removeChild Untergeordneten Knoten entfernen

Dynamisches Hinzufügen

<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>

Nach dem Login kopieren

Dynamisches Löschen

<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>

Nach dem Login kopieren

Diese Methode besteht darin, den übergeordneten Knoten bzw. den zu löschenden Knoten zu finden und dann den Vorgang auszuführen Löschvorgang. Voraussetzung für diese Methode ist, dass Sie wissen, wer der übergeordnete Knoten ist

Wenn Sie also nicht wissen, wer der übergeordnete Knoten ist, wie Sie ihn löschen können

p2.parentNode.removeChild(p2);

Diese Methode funktioniert nicht. Wer benötigt den übergeordneten Knoten?

Dynamisches Hinzufügen und Löschen:

动态添加和动态删除，删除动态添加的奇数段落

思路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]);
    }
  }
}

Nach dem Login kopieren

这种在初始时是可以的,但是随着动态添加或删除的进行，后面的结果就不对了。因为动态删除操作就影响了原来的顺序，而程序是按照序号去判断奇偶性，所以出现误判

思路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>

Nach dem Login kopieren

导航

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>

Nach dem Login kopieren

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！