Dieses Mal werde ich Ihnen eine Zusammenfassung der JS-Operations-DOM-Baumdurchquerungsmethode geben. Was sind die Vorsichtsmaßnahmen für die JS-Operations-DOM-Baumdurchquerung?
Das Beispiel in diesem Artikel beschreibt die DOM-Baum-Traversal-Methode, die von JavaScript implementiert wird. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Durchquerung des binären DOM-Baums
function Tree() {
var Node = function(key){
this.key = key;
this.left = null;
this.right = null;
}
root =null;
}Vorbestellungsdurchquerung
Besuchen Sie zuerst den Wurzelknoten, durchqueren Sie dann den linken Teilbaum und durchlaufen Sie schließlich den rechten Teilbaum
Tree.prototype.preOrderTraverse = function(callback){
preOrder(root, callback);
}
var preOrder = function(node,callback){
if(node !== null){
callback(node.key);
preOrder(node.left, callback);
preOrder(node.right, callback);
}
}In DOM-Binärbaum ändern:
var preOrder = function(node,callback) {
callback(node);
if(node.firstElementChild) {//先判断子元素节点是否存在
this.preOrder(node.firstElementChild,callback);
}
if(node.lastElementChild) {
this.preOrder(node.lastElementChild,callback);
}
};In Durchquerung der Reihenfolge
Durchqueren Sie zuerst den linken Teilbaum, besuchen Sie dann den Wurzelknoten und durchqueren Sie schließlich den rechten Teilbaum.
Tree.prototype.inOrderTraverse = function(callback){
inOrder(root, callback);
}
var inOrder = function(node,callback){
if(node !== null){
inOrder(node.left,callback);
callback(node.key);
inOrder(node.right, calback);
}
}wird in einen DOM-Binärbaum geändert:
var inOrder = function(node,callback){
if(node.firstElementChild) {
this.inOrder(node.firstElementChild);
}
callback(node);
if(node.lastElementChild) {
this.inOrder(node.lastElementChild);
}
}Post-Order-Traversal
Durchläuft zuerst den linken Teilbaum und dann den rechten Teilbaum. und besucht schließlich den Wurzelknotenpunkt.
Tree.prototype.postOrderTraverse = function(callback){
postOrder(root, callback);
}
var postOrder = function(node,callback){
if(node !== null){
postOrder(node.left,callback);
postOrder(node.right, calback);
callback(node.key);
}
}geändert in DOM-Binärbaum:
var postOrder = function(node,callback){
if(node.firstElementChild) {
this.postOrder(node.firstElementChild);
}
if(node.lastElementChild) {
this.postOrder(node.lastElementChild);
}
callback(node);
}Durchquerung des Multi-Fork-DOM-Baums
Breite- erste Durchquerung
Durchqueren Sie zuerst den Wurzelknoten und besuchen Sie dann den Knoten der ersten Ebene, den Knoten der zweiten Ebene usw., bis auf die letzte Ebene zugegriffen wird.
Verwenden Sie die Warteschlange, um den Multi-Fork-Baum auf nicht-rekursive Weise zu durchlaufen >Zuerst den Wurzelknoten durchqueren, dann einen Pfad entlang bis zur tiefsten Ebene durchlaufen und schließlich Ebene für Ebene zurückkehren.
Mit Hilfe des Stapels wird die Tiefendurchquerung von DOM-Bäumen mit mehreren Gabeln realisiert. Tree.prototype.BFSearch = function(node,callback){
var queue=[];
while(node!=null){
callback(node);
if(node.children.length!=0){
for (var i=0;i<node.children.length;i++){
queue.push(node.children[i]);//借助于队列,暂存当前节点的所有子节点
}
}
node=queue.shift();//先入先出，借助于数据结构：队列
}
};Nach dem Login kopieren
Beziehen Sie sich daher auf Tiefendurchquerung, mit Hilfe des Stapels, Sie können die Durchquerung binärer DOM-Bäume vor, in der Reihenfolge und nach der Reihenfolge auf nicht rekursive Weise implementieren
Nicht rekursive Implementierung der Vorbestellungsdurchquerung binärer DOM-Bäume
Tree.prototype.DFSearch = function(node,callback){
var stack=[];
while(node!=null){
callback(node);
if(node.children.length!=0){
for (var i=node.children.length-1;i>=0;i--){//按照相反的子节点顺序压入栈
stack.push(node.children[i]);//将该节点的所有子节点压入栈
}
}
node = stack.pop();//弹出栈的子节点顺序就是原来的正确顺序(因为栈是先入后出的)
}
};Tree.prototype.preOrder = function(node,callback) {
var stack=[];
while(node!== null || stack.length!=0){
while(node!==null){
stack.push(node);
callback.push(node);
node=node.firstElementChild;
}
node=stack.pop();
node=node.lastElementChild;
}
};Nach dem Login kopieren
① Jeder Knoten wird zweimal auf den Stapel geschoben
② Im Schleifenkörper wird jedes Mal ein Knoten angezeigt und zugewiesen zum Knoten③ Wenn der Knoten immer noch gleich dem Kopfknoten des Stapels ist, bedeutet dies, dass die untergeordneten Knoten des Knotens noch nicht vorhanden sind. Nach der Operation sollten seine untergeordneten Elemente dem Stapel hinzugefügt werden④ Andernfalls bedeutet dies Folgendes Der Knoten wird zum zweiten Mal herausgesprungen und auf den Knoten zugegriffen.
Mit anderen Worten, wenn es zum ersten Mal erscheint, schieben Sie das Kind des Knotens auf den Stapel, und wenn es zum zweiten Mal auftaucht, greifen Sie auf den Knoten zuTree.prototype.inOrder = function(node,callback) {
var stack=[];
while(node!== null || stack.length!=0){
while(node!==null){
stack.push(node);
node=node.firstElementChild;
}
node=stack.pop();
callback(node);
node=node.lastElementChild;
}
};PHP implementiert schnell die Array-Deduplizierungsmethode
Das obige ist der detaillierte Inhalt vonZusammenfassung der DOM-Baum-Traversalmethoden für JS-Operationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
