JavaScript propose les méthodes suivantes pour obtenir le contenu d'un champ de saisie :
Méthode 1
document.getElementById('textbox_id').value // 获取指定 id 的内容
Exemple
document.getElementById("searchTxt").value;
Remarque : Les méthodes 2, 3, 4 et 6 ci-dessous renvoient une collection d'éléments. Utilisez l'index[index]pour obtenir l'élément spécifié. Le premier élément utilise[0], le deuxième élément utilise[1], et ainsi de suite...
Méthode 2
Utilisez la méthode suivante pour renvoyer un HTMLCollection :
document.getElementsByClassName('class_name')[index].value
L'interface HTMLCollection représente une collection générique (un objet de type tableau similaire à arguments) contenant des éléments (dans l'ordre des éléments du flux du document), et fournit également des méthodes et des propriétés pour sélectionner des éléments dans la collection.
La HTMLCollection dans le DOM HTML est live ; elle se met à jour automatiquement lorsque la structure du document qu'il contient change.
Exemple
document.getElementsByClassName("searchField")[0].value;
Méthode 3
Obtenir une HTMLCollection par nom de balise :
document.getElementsByTagName('tag_name')[index].value
Exemple
Obtenir le contenu par le nom de la balise input :
document.getElementsByTagName("input")[0].value;
Méthode 4
Ce qui suit renvoie une NodeList. L'objet NodeList est une collection de nœuds, généralement renvoyée par des propriétés telles que Node.childNodes et des méthodes telles que document.querySelectorAll.
NodeList est une collection live ; c'est-à-dire que si l'arborescence de nœuds du document change, la NodeList changera en conséquence.
document.getElementsByName('name')[index].value
Exemple
Obtenir le contenu par l'attribut name défini sur l'élément :
document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt
Méthode 5
Utiliser les sélecteurs CSS pour l'obtenir ; cette méthode est plus puissante :
document.querySelector('selector').value // selector 是 CSS 选择器
Exemple
Exemple
document.querySelector('.searchField').value; // Obtenir par classe
document.querySelector('input').value; // Obtenir par nom de balise
document.querySelector('[name="searchTxt"]').value; // Obtenir par attribut name et valeur
Méthode 6
querySelectorAll peut renvoyer tous les éléments correspondant à un sélecteur CSS ; il s'agit d'une NodeList.
document.querySelectorAll('selector')[index].value
Exemple
Exemple
document.querySelectorAll('.searchField')[0].value; // Obtenir par classe
document.querySelectorAll('input')[0].value; // Obtenir par nom de balise
document.querySelectorAll('[name="searchTxt"]')[0].value; // Obtenir par attribut name et valeur