JavaScript: Alles auswählen

h-u-g-o

Hallo!

Kennt sich hier jemand ein bisschen mit JavaScript aus? Es geht um die hier im Forum verwendete Funktion zur einfachen Markierung von Code mittels des Links "Alles auswählen".

Code

function selectCode(a)
{
	// Get ID of code block
	var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];


	// Not IE and IE9+
	if (window.getSelection)
	{
		var s = window.getSelection();
		// Safari
		if (s.setBaseAndExtent)
		{
			s.setBaseAndExtent(e, 0, e, e.innerText.length - 1);
		}
		// Firefox and Opera
		else
		{
			// workaround for bug # 42885
			if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) == '<BR>')
			{
				e.innerHTML = e.innerHTML + '&nbsp;';
			}


			var r = document.createRange();
			r.selectNodeContents(e);
			s.removeAllRanges();
			s.addRange(r);
		}
	}
	// Some older browsers
	else if (document.getSelection)
	{
		var s = document.getSelection();
		var r = document.createRange();
		r.selectNodeContents(e);
		s.removeAllRanges();
		s.addRange(r);
	}
	// IE
	else if (document.selection)
	{
		var r = document.body.createTextRange();
		r.moveToElementText(e);
		r.select();
	}
}

Alles anzeigen

Code

<a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>

Wieso funktioniert das auch, wenn mehrere Code-Abschnitte innerhalb einer Seite vorkommen, obwohl nur das erste Element selektiert zu werden scheint?

Code

// Get ID of code block
var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

Würde mich freuen, wenn mir das jemand erklären könnte. Bei meinem Nachbau wird nämlich immer nur das erste Element selektiert.

Liebe Grüße
Hugo

Sören Hentzschel

Hallo,

ganz einfach, weil da nicht Folgendes steht:

Code

var e = document.getElementsByTagName('CODE')[0];

sondern:

Code

var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];

Das a ist der Parameter der Funktion, in diesem Fall das Element, welches die Funktion aufruft, das ist der Link mit dem Text "Alles auswählen". Der Code sucht nicht im gesamten Dokument (document) nach dem ersten code-Tag, sondern geht vom geklickten Element aus (a), wählt davon das Eltern-Element (parentNode, ist ein dt-Element) und auch von diesem das Eltern-Element (parentNode, ist ein dl-Element mit der Klasse "codebox"). Und nur auf diesem Element wird getElementsByTagName('CODE')[0] ausgeführt. Es wird also der erste code-Tag innerhalb dieses bestimmten Elements mit der Klasse "codebox" gesucht, in welchem der Link mit dem Text "Alles auswählen" ist, den du geklickt (onclick="selectNode(this)") hast.

h-u-g-o

Ah, vielen herzlichen Dank.

Wie würde man das denn etwas flexibler gestalten, wenn man zum Beispiel nicht weiß, in wie vielen Ebenen verschachtelt ist?

Sören Hentzschel

Das hängt komplett davon ab, wie das HTML der Seite aufgebaut ist. Man muss eben ausgehend von dem, was die Seite einem an Struktur bietet, einen allgemeingültigen Pfad finden, den man verfolgen kann. Ohne die HTML-Struktur der Seite zu kennen, kann man nicht sagen, wie das JavaScript dazu aussehen müsste.

h-u-g-o

Gut, dann ein Beispiel:

Code

<ul>
  <li>Erster zu selektierender Bereich</li>
  <li>Zweiter zu selektierender Bereich</li>
  <li>Dritter zu selektierender Bereich</li>
</ul>

Sören Hentzschel

Das Beispiel ist ein bisschen unvollständig. Ich kann dort nicht herauslesen, was genau du klicken möchtest und was ausgewählt werden soll. Das hängt ja beides irgendwie zusammen.

h-u-g-o

Stimmt, entschuldige.

Code

<ul>
  <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
  <li>Erster zu selektierender Bereich</li>
  <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
  <li>Zweiter zu selektierender Bereich</li>
  <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
  <li>Dritter zu selektierender Bereich</li>
</ul>

Sören Hentzschel

Grundsätzlich würde ich das ganz genauso machen wie das Forum. Packe beides in ein gemeinsames Eltern-Element, selektiere dieses über parentNode und führe darauf dein getElementsByTagName aus. Das HTML kann man so wie es gerade ist eh nicht gebrauchen, da es nicht valide ist. Ein <a> kann niemals auf ein <ul> folgen, das ist ausgeschlossen, <li> ist das einzige erlaubte Element. In dieses packst du deinen Link und den auszuwählenden Text in irgendeinen anderen Tag.

h-u-g-o

Alles klar, recht herzlichen Dank für deine Hilfe!

h-u-g-o

Code

var e = a.parentNode.getElementsByTagName('auswahl')[0];

Code

<ul>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
    <code>Erster zu selektierender Bereich</code>
  </li>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
    <code>Zweiter zu selektierender Bereich</code>
  </li>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
    <code>Dritter zu selektierender Bereich</code>
  </li>
</ul>

Alles anzeigen

Hm, was ist denn jetzt noch falsch? :-??

Sören Hentzschel

Das hier:

Code

getElementsByTagName('auswahl')

Es gibt in HTML keinen Tag <auswahl>, der Tag in deinem Beispiel wäre <code>. Einen Tag mit der Klasse "auswahl" würdest du mit getElementsByClassName('auswahl') auswählen, aber bei dem Element bist du ja schon durch das parentNode, außerdem willst du ja nicht den Inhalt davon, sondern den Inhalt aus dem <code>-Tag.

h-u-g-o

Ah, jetzt habe ich es verstanden. Nochmals herzlichen Dank und noch einen schönen Tag.

h-u-g-o

Eine letzte Frage noch: Wenn ich nun einen zusätzlichen Link setzen möchte, um auch alle Code-Abschnitte auf einmal auswählen zu können, wie muss ich das JavaScript dafür modifizieren?

Code

var e = a.parentNode.getElementsByTagName('code')[0];

Code

<a href="#" onclick="selectCode(this); return false;">Alles auswählen</a>
<ul>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Abschnitt auswählen</a>
    <code>Erster zu selektierender Bereich</code>
  </li>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Abschnitt auswählen</a>
    <code>Zweiter zu selektierender Bereich</code>
  </li>
  <li class="auswahl">
    <a href="#" onclick="selectCode(this); return false;">Abschnitt auswählen</a>
    <code>Dritter zu selektierender Bereich</code>
  </li>
</ul>

Alles anzeigen

Sören Hentzschel

Dann wirst du am besten eine neue JavaScript-Funktion schreiben, welche alle Elemente in einer Schleife durchgeht und in jedem Durchgang die Funktion für eine einzelne Auswahl aufruft, das wäre meine erste Idee, um nicht unnötig Code zu duplizieren.

Du solltest dich aber ganz dringend mit den absoluten JavaScript-Basics befassen. Man kann so ganz ohne Grundlagen einfach nichts bauen.

h-u-g-o

Danke dir!

Ja, da hast du vollkommen recht, das muss ich mal dringend machen. :roll: