Heim > Artikel > Web-Frontend > JS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie
JS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie
- php中世界最好的语言Original
- 2018-05-30 09:23:513030Durchsuche
Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen zum Hinzufügen, Löschen, Ändern und Überprüfen von DOM-Knoten mit JS vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.
DOM bedeutet: DOM ist das Document Object Model, eine Reihe von API-Schnittstellen, die auf der Browserprogrammierung basieren und ein vom W3C herausgegebener Standard sind Wenn die Webseite geladen wird, erstellt der Browser das Dokumentobjektmodell der Seite:
Gemäß dem HTML-DOM-Standard des W3C ist der gesamte Inhalt eines HTML-Dokuments ein Knoten:1. Das gesamte Dokument ist ein Dokumentknoten . 2. Jedes
HTML-Element3 Der Text innerhalb des HTML-Elements ist ein Attributknoten.
5. Daher behandelt das HTML-DOM das HTML-Dokument als Baumstruktur. Über ihn kann auf alle Knoten im Knotenbaum zugegriffen werden JS.
1. Knoten anhängen
Einen Elementknoten erstellen >2,
Knoten anhängenvar op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var opText = document.createTextNode("666");//创建一个文本节点内容是“666”，因为是document对象的方法。
op.appendChild(opText);//父级.appendChild(子节点);在p元素中添加“666”
document.body.appendChild(op);//父级.appendChild(子节点);;document.body是指向<body>元素
document.documentElement.appendChild(createNode);//父级.appendChild(子节点);;document.documentElement是指向<html>元素
2. Knoten einfügen createElement（标签名）1 Eine Möglichkeit, Knoten einzufügen, und Sie können auch bereits vorhandene Elemente hinzufügen. Die vorhandenen Elemente werden von der ursprünglichen Position an die neue Position verschoben.
2 und appendChild（节点） sind Referenzknoten, was bedeutet, dass ein Knoten vorne eingefügt wird des b-Knotens. >
3. Knoten löschen und entfernen createTextNode（节点文本内容）
1 , der entfernte Knoten ist immer noch im Dokument, aber seine Position ist nicht mehr im Dokument 4. Ersetzen Sie den Knoten
1., das zum Ersetzen von Knoten verwendet wird, akzeptiert zwei Parameter, der erste Parameter ist der einzufügende Knoten und der zweite Parameter ist der zu ersetzende Knoten appendChild（节点）
5 insertBefore（a,b）1.
enthält untergeordnete Knoten von Textknoten und Elementknoten. A, untergeordnete Knoten können auch untergeordnete Knoten erhalten Knoten und sind mit verschiedenen Browsern kompatibel, einschließlich IE6-8
B, removeChild(节点)parentNode
var op = document.createElement("p");//创建一个p元素，因为是document对象的方法。
var op1 = document.getElementById("p1");
document.body.insertBefore(op,op1);//在op1节点前插入新创建的元素节点
ul.appendChild(ul.firstChild); //把ul的第一个元素节点移到ul子节点的末尾
3, A , firstChild ; firstElementChildreplaceChild(插入的节点，被替换的节点) findet den ersten untergeordneten Knoten. Es liegt ein
vor: firstChild ist IE-kompatibel, firstElementChild ist nicht IE-kompatibel. var removeChild = document.body.removeChild(p1);//移除document对象的方法p1
B, lastChild ;
findet den letzten untergeordneten Knoten. Es liegt ein Browserkompatibilitätsproblem vor: lastChild ist IE-kompatibel und lastElementChild ist nicht IE-kompatibel.
var replaceChild= document.body.replaceChild(p1,p2); //将p1替换p2
C,
nextSibling; nextElementSibling findet den nächsten Geschwisterknoten. Es gibt auch
Kompatibilitätsprobleme. for (var i = 0; i < oList.childNodes.length; i++) {//oList是做的ul的对象。
//nodeType是节点的类型，利用nodeType来判断节点类型，再去控制子节点
//nodeType==1 是元素节点
//nodeType==3 是文本节点
if (oList.childNodes[i].nodeType == 1) {//查找到oList内的元素节点
console.log(oList.childNodes[i]);//在控制器日志中显示找到的元素节点
}
}D,
;
previousElementSibling findet den vorherigen Geschwisterknoten. Es gibt auch Kompatibilitätsprobleme. var oList = document.getElementById('list');//oList是做的ul的对象
var oChild=document.getElementById('child');//oChild是做的ul中的一个li的对象
//通过子节点查找父节点//parentNode：获取父节点
console.log(oChild.parentNode);//在控制器日志中显示父节点
console.log(oList.children);//在控制器日志中显示oList子节点
console.log(children.length)//子节点的个数Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre
Welche sind die häufig verwendeten mathematischen Funktionen in JS? So bedienen Sie Vue, um das V-Modell in einer benutzerdefinierten Komponente zu aktivieren
Das obige ist der detaillierte Inhalt vonJS fügt DOM-Knoten hinzu, löscht, ändert und überprüft sie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!