var element = document.getElementById('element-id');
if (element) {
	// Element wurde gefunden und kann verwedet werden.
	element.style.width = '100%';
}
 

Es ist wichtig zu prüfen, ob auch tatsächlich ein Element mit der angegebenen ID gefunden werden konnte. Ansonsten führen Fehler beim Zugriff auf Eigenschaften und Methoden auf einem nicht vorhandenen Objekt zu einem Abbruch des ganzen Skripts.

$('#element-id').css('width', '100%');
 

Eine ID wird wie in CSS mit einer Raute (#) gekennzeichnet.

var elements = document.getElementsByName('element-name');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.width = '100%';
}
 

Die Rückgabe ist eine Liste mit den gefundenen HTML-Elementen, da mehrere Elemente das gleiche name-Attribut besitzen können. Der Zugriff auf die Elemente erfolgt wie bei einem Array und bietet so die Verwendung in Schleifen an.

var elements = document.getElementsByName('element-name');
if (elements.length > 0) {
	// Min. ein Element (evtl. einziges) gefunden und verwenden.
	elements[0].style.width = '100%';
}
 

Auch hier muss vor dem Zugriff sichergestellt sein, dass auch wirlich ein Element gefunden werden konnte. In Schleifen entfällt diese Prüfung in der Regel, weil sie nicht durchlaufen werden, wenn die Länge des Arrays gleich "0" ist.

$('[name="element-name"]').css('width', '100%');
 

Die Syntax orientiert sich an CSS, bei der ein Attribut in eckigen Klammern angegeben wird. Optional kann dabei die Auswahl mit Gleichheitszeichen und nachfolgendem Wert auf Elemente mit bestimmtem Attribut-Wert eingegrenzt werden, hier also element-name.

Auch ohne Schleife wird die Methode .css() auf allen gefundenen Elementen angewendet.

var elements = document.getElementsByTagName('div');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.width = '100%';
}
 

Die Rückgabe ist eine Liste mit den gefundenen HTML-Elementen, deren Tag dem angegebenen Namen entspricht. In diesem Fall wären das alle DIV-Tags. Der Zugriff auf die Elemente erfolgt wie bei einem Array und bietet so die Verwendung in Schleifen an. Auch hier muss immer das Vorhandensein vor Verwendung sichergestellt werden, siehe dazu auch Zugriff über Name.

$('div').css('width', '100%');
 

Die Syntax orientiert sich an CSS, bei der ein Selektor nur aus dem Namen eines Tags besteht.

Auch ohne Schleife wird die Methode .css() auf allen gefundenen Elementen angewendet.

var elements = document.getElementsByClassName('full-width');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.width = '100%';
}
 

Die Rückgabe ist eine Liste mit den gefundenen HTML-Elementen, deren Klassen-Name dem angegebenen Namen entspricht. In diesem Fall wären das alle Tags mit der Klasse full-width. Der Zugriff auf die Elemente erfolgt wie bei einem Array und bietet so die Verwendung in Schleifen an. Auch hier muss immer das Vorhandensein vor Verwendung sichergestellt werden, siehe dazu auch Zugriff über Name.

Mehrere Klassen-Namen können durch Leerzeichen getrennt angegeben werden.

$('.full-width').css('width', '100%');
 

Eine Klasse wird wie in CSS mit einem Punkt (.) gekennzeichnet.

Auch ohne Schleife wird die Methode .css() auf allen gefundenen Elementen angewendet.

var element = document.querySelector('#element-id div[name="element-name"] .full-width');
if (element) {
	element.style.width = '100%';
}
 

Seit HTML5 können auch mit den grundlegenden JavaScript-Funktionen Elemente wie in CSS oder jQuery über mächtigere Selektoren ausgewählt werden. Mehrere passende Selektoren können durch Kommata getrennt angegeben werden. Die Rückgabe von querySelector liefert immer nur das erste gefundene Element, auch wenn mehrere auf die Auswahl zutreffen würden. Auch hier muss immer das Vorhandensein vor Verwendung sichergestellt werden, siehe dazu auch Zugriff über ID.

Falls der Zugriff nur über die Angabe einer ID, eines Namens oder einer Klasse erfolgt, sind die anderen document.getElementBy…()-Funktionen vorzuziehen, da diese aufgrund der offiziellen Spezifikation schneller arbeiten. Dennoch ist der Query-Selektor in HTML5 schneller als der von jQuery.

var elements = document.querySelectorAll('#element-id div[name="element-name"] .full-width');
for (var i = 0; i < elements.length; i++) {
	elements[i].style.width = '100%';
}
 

Der querySelectorAll sucht nach allen Vorkommen von Tags, auf welche der Selektor zutrifft. Der Zugriff auf die Elemente erfolgt wie bei einem Array und bietet so die Verwendung in Schleifen an. Auch hier muss immer das Vorhandensein vor Verwendung sichergestellt werden, siehe dazu auch Zugriff über Name.

$('#element-id div[name="element-name"] .full-width').css('width', '100%');
 

In jQuery ist es ohnehin bereits üblich, die Elemente über eine css-ähnliche Syntax auszuwählen. Deswegen nur ähnlich, weil jQuery selbst noch eigene zusätzliche Pseudo-Selektoren definiert.

Es wird übrigens nicht unterschieden, ob nur das erste oder alle Vorkommen gesucht werden sollen, da es generell immer alle auf den Selektor passenden Elemente heraussucht. Auch ohne Schleife wird die Methode .css() auf allen gefundenen Elementen angewendet.

var object = document.getElementById('id');
var jQueryObject = $(object);
[…]
 

Falls möglich, sollte das Objekt allerdings direkt über jQuery herausgesucht werden.

var jQueryObject = $('#id');
 

Das ist nicht unbedingt schneller, allerdings einfacher lesbar und bewahrt die Kompatibilität zwischen verschiedenen Browsern.

var jQueryAudioObject = $('audio');
if (jQueryAudioObject.length > 0) {
	var audioObject = jQueryAudioObject[0];
	audioObject.play();
}
[…]
 

Es sollte auch hier wieder sichergestellt werden, ob mindestens ein Objekt ausgewählt wurde. Dann kann über den Index "0" auf das erste Element zugegriffen werden. Beim Auslesen weiterer Indizes sind diese ggf. auch abzusichern.

try {
	// Anweisungen, welche potentiell einen Fehler erzeugen.
	/*
	 * Hier zur Demonstration der Zugriff auf ein nicht
	 * vorhandenes Element mit der ID "element-id" ohne Absicherung
	 * auf Vorhandensein (s. DOM-Manipulation, Zugriff über ID).
	 */
	document.getElementById('element-id').style.width = '100%';
	[…]
}
catch (err) {
	/*
	 * Auf den Fehler reagieren,
	 * eine Meldung ausgeben/protokollieren
	 * oder einfach nichts tun (leer lassen).
	 */
	 console.error(err);
}
finally {
	// Wird immer ausgeführt.
}
 

Hinweis:
Der try-Block wird sofort nach dem ersten Fehler verlassen. Falls mehrere Anweisungen einen Fehler erzeugen könnten, ist entweder die Verwendung mehrerer kompletter try-catch-Blöcke nötig oder das Abfangen der unterschiedlichen Fehler-Klassen mit mehreren catch-Blöcken (nach einem try), für jede abzufangende Fehlerart einer.