Ausführliche Erläuterung gängiger Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge von JS-DOM-Elementen-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Ausführliche Erläuterung gängiger Hinzufügungs-, Lösch-, Änderungs- und Abfragevorgänge von JS-DOM-Elementen

php中世界最好的语言

May 11, 2018 pm 03:24 PM

javascript 操作详解

Dieses Mal werde ich Ihnen eine detaillierte Erläuterung der allgemeinen Hinzufügungs-, Lösch-, Änderungs- und Suchvorgänge von JS-DOM-Elementen geben JS DOM-Elemente Das Folgende ist ein praktischer Fall, schauen wir uns das an.

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)

getElementsByTagNameRufen 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

unterstützt. getElementsByTagNamegetElementsByClassName

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)

CreateElement

Erstellen ein Elementknoten

Absatz erstellen

CreateElement("p")(2)

createTextNode

Textknoten erstellen

, einen Wert erstellen mit „ Textinhalt" Textknoten.

createTextNode("文本内容")(3)

appendChild

Untergeordneten 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 nicht. Wer braucht den übergeordneten Knoten?

Dynamisches Hinzufügen und Löschen:

Dynamisches Hinzufügen und dynamisches Löschen, dynamisch hinzugefügte ungerade Absätze 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中文网其它相关文章！

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Beste grafische Einstellungen

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle -Lösung

2 Wochen vor By DDD

R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können

4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Wie man alles in Myrise freischaltet

1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7509

CakePHP-Tutorial

1378

Wie lautet das Format des Kontonamens von Steam?

Win11 -Aktivierungsschlüssel dauerhaft

NYT -Verbindungen Hinweise und Antworten

Related knowledge

Tutorial zur PyCharm-Nutzung: Führt Sie ausführlich durch die Ausführung des Vorgangs Feb 26, 2024 pm 05:51 PM

PyCharm ist eine sehr beliebte integrierte Entwicklungsumgebung (IDE) für Python. Sie bietet eine Fülle von Funktionen und Tools, um die Python-Entwicklung effizienter und komfortabler zu gestalten. Dieser Artikel führt Sie in die grundlegenden Betriebsmethoden von PyCharm ein und stellt spezifische Codebeispiele bereit, um den Lesern einen schnellen Einstieg zu erleichtern und sich mit der Bedienung des Tools vertraut zu machen. 1. Laden Sie PyCharm herunter und installieren Sie es. Zuerst müssen wir zur offiziellen Website von PyCharm gehen (https://www.jetbrains.com/pyc).

Ausführliche Erklärung zur Erlangung von Administratorrechten in Win11 Mar 08, 2024 pm 03:06 PM

Das Windows-Betriebssystem ist eines der beliebtesten Betriebssysteme der Welt und seine neue Version Win11 hat viel Aufmerksamkeit erregt. Im Win11-System ist die Erlangung von Administratorrechten ein wichtiger Vorgang. Mit Administratorrechten können Benutzer weitere Vorgänge und Einstellungen auf dem System durchführen. In diesem Artikel wird ausführlich beschrieben, wie Sie Administratorrechte im Win11-System erhalten und wie Sie Berechtigungen effektiv verwalten. Im Win11-System werden Administratorrechte in zwei Typen unterteilt: lokaler Administrator und Domänenadministrator. Ein lokaler Administrator verfügt über vollständige Administratorrechte für den lokalen Computer

Detaillierte Erläuterung der Divisionsoperation in Oracle SQL Mar 10, 2024 am 09:51 AM

Detaillierte Erläuterung der Divisionsoperation in OracleSQL In OracleSQL ist die Divisionsoperation eine häufige und wichtige mathematische Operation, die zur Berechnung des Ergebnisses der Division zweier Zahlen verwendet wird. Division wird häufig in Datenbankabfragen verwendet. Daher ist das Verständnis der Divisionsoperation und ihrer Verwendung in OracleSQL eine der wesentlichen Fähigkeiten für Datenbankentwickler. In diesem Artikel werden die relevanten Kenntnisse über Divisionsoperationen in OracleSQL ausführlich erörtert und spezifische Codebeispiele als Referenz für die Leser bereitgestellt. 1. Divisionsoperation in OracleSQL

Schritte und Vorsichtsmaßnahmen für die Linux-Bereitstellung Mar 14, 2024 pm 03:03 PM

Betriebsschritte und Vorsichtsmaßnahmen für LinuxDeploy LinuxDeploy ist ein leistungsstarkes Tool, mit dem Benutzer schnell verschiedene Linux-Distributionen auf Android-Geräten bereitstellen können, sodass Benutzer ein vollständiges Linux-System auf ihren Mobilgeräten erleben können. In diesem Artikel werden die Betriebsschritte und Vorsichtsmaßnahmen von LinuxDeploy ausführlich vorgestellt und spezifische Codebeispiele bereitgestellt, um den Lesern zu helfen, dieses Tool besser zu nutzen. Arbeitsschritte: LinuxDeploy installieren: Zuerst installieren

Was tun, wenn Sie vergessen, F2 für das Win10-Startkennwort zu drücken? Feb 28, 2024 am 08:31 AM

Vermutlich haben viele Benutzer zu Hause mehrere ungenutzte Computer und haben das Einschaltpasswort völlig vergessen, weil sie längere Zeit nicht benutzt wurden. Sie möchten also wissen, was zu tun ist, wenn sie das Passwort vergessen? Dann lasst uns gemeinsam einen Blick darauf werfen. Was tun, wenn Sie vergessen, F2 für das Win10-Startkennwort zu drücken? 1. Drücken Sie den Netzschalter des Computers und drücken Sie dann beim Booten F2 (verschiedene Computermarken haben unterschiedliche Tasten zum Aufrufen des BIOS). 2. Suchen Sie in der BIOS-Schnittstelle nach der Sicherheitsoption (der Speicherort kann je nach Computermarke unterschiedlich sein). Normalerweise im Einstellungsmenü oben. 3. Suchen Sie dann die Option „SupervisorPassword“ und klicken Sie darauf. 4. Zu diesem Zeitpunkt kann der Benutzer sein Passwort sehen und gleichzeitig die Option „Aktiviert“ daneben finden und auf „Dis“ umstellen.

Huawei Mate60 Pro Screenshot-Bedienschritte teilen Mar 23, 2024 am 11:15 AM

Mit der Beliebtheit von Smartphones ist die Screenshot-Funktion zu einer der wesentlichen Fähigkeiten für die tägliche Nutzung von Mobiltelefonen geworden. Als eines der Flaggschiff-Handys von Huawei hat die Screenshot-Funktion des Huawei Mate60Pro natürlich große Aufmerksamkeit bei den Nutzern auf sich gezogen. Heute werden wir die Screenshot-Bedienungsschritte des Huawei Mate60Pro-Mobiltelefons teilen, damit jeder bequemer Screenshots machen kann. Erstens bietet das Huawei Mate60Pro-Mobiltelefon eine Vielzahl von Screenshot-Methoden, und Sie können die Methode auswählen, die Ihren persönlichen Gewohnheiten entspricht. Im Folgenden finden Sie eine detaillierte Einführung in mehrere häufig verwendete Abfangfunktionen:

Detaillierte Erläuterung der Rolle und Verwendung des PHP-Modulo-Operators Mar 19, 2024 pm 04:33 PM

Der Modulo-Operator (%) in PHP wird verwendet, um den Rest der Division zweier Zahlen zu ermitteln. In diesem Artikel werden wir die Rolle und Verwendung des Modulo-Operators im Detail besprechen und spezifische Codebeispiele bereitstellen, um den Lesern ein besseres Verständnis zu erleichtern. 1. Die Rolle des Modulo-Operators Wenn wir in der Mathematik eine ganze Zahl durch eine andere ganze Zahl dividieren, erhalten wir einen Quotienten und einen Rest. Wenn wir beispielsweise 10 durch 3 dividieren, ist der Quotient 3 und der Rest ist 1. Um diesen Rest zu ermitteln, wird der Modulo-Operator verwendet. 2. Verwendung des Modulo-Operators In PHP verwenden Sie das %-Symbol, um den Modul darzustellen

So binden Sie WeChat an Ele.me Apr 01, 2024 pm 03:46 PM

Ele.me ist eine Software, die eine Vielzahl verschiedener Köstlichkeiten zusammenführt. Der Händler kann diese sofort nach Erhalt der Bestellung über die Software binden Betriebsmethode Denken Sie daran, die chinesische PHP-Website zu besuchen. Anweisungen zum Binden von WeChat an Ele.me: 1. Öffnen Sie zuerst die Ele.me-Software und klicken Sie nach dem Aufrufen der Startseite auf [Mein] in der unteren rechten Ecke. 2. Klicken Sie dann auf die Seite „Mein“. [Konto] in der oberen linken Ecke; 3. Gehen Sie dann zur Seite mit den persönlichen Informationen, auf der wir Mobiltelefone, WeChat, Alipay und Taobao verknüpfen können. 4. Nach dem letzten Klick wählen wir das WeChat-Konto aus Das muss auf der WeChat-Autorisierungsseite gebunden werden und auf „Einfach zulassen“ klicken.

See all articles