JavaScript: Bibliothek - Find Tag mit Objekt

Bibliothek selbst erstellen

Ich möchte jetzt unsere bib_oop.js um die oben vorgestellte Funktion erweitern:
findTag()

Rufen wir uns nochmals kurz in Erinnerung wie unser Objekt arbeitet:

bib_oop.js 
function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	...
}

// Initialisierung
const bib = new getObj();

Jetzt erweitern wir unser Objekt bib um die Methode findTag()

bib_oop.js 
function getObj(){
	...
	
	// START::: Find Tag
	this.findTag = function(myroot, tag){
		const root = this.elem(myroot);
		const results = []; // Array für Treffer
		// Umwandlung in Upper-Case: TagName muss immer in Upper-Case geschrieben sein
		const myTag = tag.toUpperCase();
		
		// Rekursion starten
		const walker  = document.createTreeWalker( 
			root, // Start der Suche
			NodeFilter.SHOW_ELEMENT, // durchsucht Knoten
			null, // Platzhalter für zusätzliche Filterregeln
			false
		);

		let node;
		// Solange unterhalb des Startelementes "walker" Nodes zu finden sind
		while( node = walker.nextNode() ){ 
			// Wenn Suchbegriff gefunden wurde in results pushen
			if( node.tagName === myTag ){
				results.push(node); 
			}else{
				// Wenn nicht das gesuchte TAG - überspringen
				NodeFilter.FILTER_SKIP;
			}
		}
		return results;
	}
	// ENDE::: Find Tag
}

// Initialisierung
const bib = new getObj();

Sehen wir uns nun den Aufruf unserer Methode an:
bib.findTag( Selektor, tag);

Jetzt wo wir das angepasst haben sehen wir uns abermals die Auswertung an.

JavaScript 
// Ausführen
const textNodes = bib.findTag( '#wrapper' , 'tagName');
// Array auslesen
textNodes.forEach( el => {
	// neue Klasse zuweisen
	el.classList.add('newClass');
});

Wenn Ihr Anregungen oder Kommentare habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code
Kopiert Euch die gesamte bib_oop.js als bib_oop.txt: Code

Beispiel
Das ist ein Beispieltext
dem Du bitte keine Beachtung

schenken solltest.

Aber in diesem Beispieltext kannst Du auch den Text finden.

Weise gefundenen Node's neue Klasse zu:

Ausgabe:



Code 

HTML:

<div id="wrapper" class="my-wrapper">
	Das ist ein Beispieltext
	<div id="ebene-1" class="cl-ebene-1">
		dem Du <span id="span-eins" class="sp-eins">bitte keine</span> 
		Beachtung
		<p id="p-1" class="p-1">schenken solltest.</p>
		<div id="ebene-2" class="eb-2">
			Aber in diesem Beispieltext 
			<span id="span-zwei" class="new-class">kannst Du auch</span> 
			den Text finden.
		</div>
	</div>
</div>
<p class="my-fett">
	Weise gefundenen Node's neue Klasse zu:
</p>
<form name="skillflow">
	<p>
		Ausgabe:<br> 
		<select id="selector">
			<option value="SPAN">SPAN</option>
			<option value="P">P</option>
		</select>
	</p>
</form>
<br>
<button id="buttonid" class="ancor_button" name="buttonname" 
onclick="scanTagOOP()">Ausführen</button>






CSS:

.newClass{
	color: red !important;
}

.my-fett{
	font-weight: 600;
	color: rgba(112, 175, 4, 1) !important;
}






JavaScript: bib_oop.js:

/* START::: getObj() */
function getObj(){
	// die Methode elem übernimmt an dieser Stelle die Arbeit
	this.elem =  function( identifier ) {
		// Element speichern
		const myElem = document.querySelectorAll( identifier );
		
		// Rückgabe des Elementes
		if ( myElem.length === 1 ) { 
			// Element ist eindeutig => ID oder
			// es wurde nur ein Element gefunden
			return myElem[0];
		} else { 
			// Mehrere Elemente vorhanden => Rückgabe Array
			return myElem;
		}
	};
	/* ENDE::: getObj() */
...
	// START::: Find Tag
	this.findTag = function(myroot, tag){
		const root = this.elem(myroot);
		const results = []; // Array für Treffer
		// Umwandlung in Upper-Case: 
		// TagName muss immer in Upper-Case geschrieben sein
		const myTag = tag.toUpperCase();
		
		// Rekursion starten
		const walker  = document.createTreeWalker( 
			root, // Start der Suche
			NodeFilter.SHOW_ELEMENT, // durchsucht Knoten
			null, // Platzhalter für zusätzliche Filterregeln
			false
		);

		let node;
		// Solange unterhalb des Startelementes "walker" Nodes zu finden sind
		while( node = walker.nextNode() ){ 
			// Wenn Suchbegriff gefunden wurde in results pushen
			if( node.tagName === myTag ){
				results.push(node); 
			}else{
				// Wenn nicht das gesuchte TAG - überspringen
				NodeFilter.FILTER_SKIP;
			}
		}
		return results;
	}
	// ENDE::: Find Tag
}
// Initialisierung
const bib = new getObj();



JavaScript:

function scanTagOOP(){
	
	// Auslesen der Options
	const myNewSel = bib.elem( '#selector' ).value;
	
	// Ausführen
	const textNodes  = bib.findTag( '#wrapper', myNewSel );
	
	// Array auslesen
	textNodes.forEach( el => {
		// Neue Klasse zuweisen
		el.classList.add('newClass');
	});
}