JavaScript bietet die folgenden Möglichkeiten, den Inhalt eines Eingabefelds abzurufen:
Methode 1
document.getElementById('textbox_id').value // 获取指定 id 的内容
Beispiel
document.getElementById("searchTxt").value;
Hinweis: Die Methoden 2, 3, 4 und 6 unten geben eine Sammlung von Elementen zurück. Verwenden Sie den Index[index], um das angegebene Element zu erhalten. Das erste Element verwendet[0], das zweite Element verwendet[1], und so weiter...
Methode 2
Verwenden Sie die folgende Methode, um eine HTMLCollection zurückzugeben:
document.getElementsByClassName('class_name')[index].value
Die HTMLCollection-Schnittstelle repräsentiert eine generische Sammlung (ein array-ähnliches Objekt, ähnlich wie arguments) mit Elementen (in der Reihenfolge der Elemente im Dokumentfluss) und bietet außerdem Methoden und Eigenschaften zum Auswählen von Elementen aus der Sammlung.
Die HTMLCollection im HTML-DOM ist live; sie aktualisiert sich automatisch, wenn sich die Dokumentstruktur, die sie enthält, ändert.
Beispiel
document.getElementsByClassName("searchField")[0].value;
Methode 3
Eine HTMLCollection anhand des Tag-Namens abrufen:
document.getElementsByTagName('tag_name')[index].value
Beispiel
Inhalt anhand des input-Tag-Namens abrufen:
document.getElementsByTagName("input")[0].value;
Methode 4
Das Folgende gibt eine NodeList zurück. Das NodeList-Objekt ist eine Sammlung von Knoten; es wird üblicherweise von Eigenschaften wie Node.childNodes und Methoden wie document.querySelectorAll zurückgegeben.
NodeList ist eine Live-Sammlung; das heißt, wenn sich der Knotenbaum im Dokument ändert, ändert sich die NodeList entsprechend.
document.getElementsByName('name')[index].value
Beispiel
Inhalt über das am Element gesetzte name-Attribut abrufen:
document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt
Methode 5
Verwenden Sie CSS-Selektoren, um es abzurufen; diese Methode ist leistungsfähiger:
document.querySelector('selector').value // selector 是 CSS 选择器
Beispiel
Beispiel
document.querySelector('.searchField').value; // Nach Klasse abrufen
document.querySelector('input').value; // Nach Tag-Namen abrufen
document.querySelector('[name="searchTxt"]').value; // Nach name-Attribut und Wert abrufen
Methode 6
querySelectorAll kann alle Elemente zurückgeben, die einem CSS-Selektor entsprechen; es ist eine NodeList.
document.querySelectorAll('selector')[index].value
Beispiel
Beispiel
document.querySelectorAll('.searchField')[0].value; // Nach Klasse abrufen
document.querySelectorAll('input')[0].value; // Nach Tag-Namen abrufen
document.querySelectorAll('[name="searchTxt"]')[0].value; // Nach name-Attribut und Wert abrufen