Der erste Weg ist die Verwendung des Tags window.location.href. Mit dieser Methode können Sie die aktuelle URL der Seite abrufen und als Link ausgeben. Zum Beispiel, wenn Sie den folgenden Code haben:
var currentUrl = window.location.href;
var link = document.createElement('a');
link.innerHTML = 'Zur aktuellen Seite wechseln';
link.href = currentUrl;
document.body.appendChild(link);
Dann wird beim Laden der Seite ein Link angezeigt, der die aktuelle URL der Seite enthält.
var link = document.createElement('a');
link.innerHTML = 'Link zu einer anderen Seite';
link.href = 'https://www.example.com';
document.body.appendChild(link);
Wenn Sie diesen Code ausführen, wird auf der Seite ein Link angezeigt, auf den Sie klicken, um den Benutzer an die im Code angegebene URL weiterzuleiten.
Manipulating HTML elements with JavaScript
Eine der häufigsten Methoden zum Manipulieren von HTML-Elementen mit JavaScript besteht darin, auf Elemente anhand ihrer ID, Klasse oder ihres Tags zuzugreifen und ihre Eigenschaften oder Inhalte zu ändern.
Um beispielsweise den Text innerhalb eines Elements zu ändern, können Sie die textContent-Eigenschaft verwenden :
const element = document.getElementById('myElement');element.textContent = 'Новый текст';Sie können die style-Eigenschaft verwenden, um die Stile eines Elements zu ändern. Der folgende Code ändert beispielsweise die Hintergrundfarbe eines Elements:
const element = document.getElementById('myElement');element.style.backgroundColor = 'red';Die Attribute eines Elements können auch mit JavaScript geändert werden. Der folgende Code ändert beispielsweise den Wert des src-Attributs eines Bildes:
const image = document.getElementById('myImage');image.src = 'новый-путь-к-изображению.jpg';const list = document.getElementById('myList');const newItem = document.createElement('li');newItem.textContent = 'Новый пункт списка';list.appendChild(newItem);Dies ist nur eine kurze Einführung in die Manipulation von HTML-Elementen mit JavaScript. JavaScript bietet viele weitere Methoden und Eigenschaften, mit denen Sie dynamische und interaktive Webseiten erstellen können.
Hinzufügen von JavaScript-Ereignis-Listenern zu HTML-Elementen
JavaScript ermöglicht es uns, auf Ereignisse zu warten, die mit HTML-Elementen auf einer Seite auftreten. Dazu verwenden wir die Methode addEventListener() . Es ermöglicht Ihnen, den Ereignistyp anzugeben, an dem wir interessiert sind, und die Handlerfunktion, die aufgerufen wird, wenn dieses Ereignis eintritt.
Beispiel für die Verwendung von addEventListener() :
// Получение ссылки на элемент HTMLvar button = document.getElementById('myButton');// Добавление прослушивателя события 'click' к кнопкеbutton.addEventListener('click', function() );Im obigen Beispiel erhalten wir mithilfe der getElementById() -Methode einen Verweis auf ein HTML-Element, das als 'myButton' identifiziert wurde. Dann fügen wir dieser Schaltfläche mithilfe der addEventListener() -Methode einen 'click'-Ereignis-Listener hinzu. Innerhalb der Handlerfunktion definieren wir den Code, der beim Klicken auf eine Schaltfläche ausgeführt werden soll - in diesem Fall zeigen wir ein Popup-Fenster mit der Meldung 'Die Schaltfläche wurde angeklickt!' mit der Funktion alert() .
Sie können die addEventListener() -Methode verwenden, um auf verschiedene Ereignistypen wie 'click', 'mouseover', 'keydown' und andere zu hören. Dies gibt uns die Möglichkeit, auf Benutzeraktionen zu reagieren und Code als Reaktion auf diese Aktionen auszuführen.
Die Verwendung von JavaScript-Ereignis-Listenern für HTML-Elemente ist eine effektive Möglichkeit, interaktive und reaktionsfähige Webseiten zu erstellen. Sie ermöglichen es uns, Funktionen und Aktionen an die Elemente unserer Seite zu binden und die Interaktion mit dem Benutzer dynamisch zu gestalten.
