JavaScript tiene las siguientes formas de obtener el contenido de un campo de entrada input:
Método 1
document.getElementById('textbox_id').value // 获取指定 id 的内容
Ejemplo
document.getElementById("searchTxt").value;
Nota: los siguientes métodos 2, 3, 4 y 6 devuelven colecciones de elementos; mediante el índice[index]para obtener el elemento especificado. Para el primer elemento se usa[0], para el segundo elemento se usa[1], y así sucesivamente...
Método 2
Use el siguiente método para devolver una HTMLCollection:
document.getElementsByClassName('class_name')[index].value
La interfaz HTMLCollection representa una colección genérica (un objeto similar a un array (array-like) al igual que arguments) que contiene elementos (en el orden del flujo del documento) y también proporciona métodos y propiedades para seleccionar elementos de dicha colección.
HTMLCollection en el DOM HTML se actualiza en tiempo real (live); cuando la estructura del documento que contiene cambia, se actualiza automáticamente.
Ejemplo
document.getElementsByClassName("searchField")[0].value;
Método 3
Obtener la HTMLCollection mediante el nombre de etiqueta:
document.getElementsByTagName('tag_name')[index].value
Ejemplo
Obtener el contenido mediante el nombre de etiqueta input:
document.getElementsByTagName("input")[0].value;
Método 4
Lo siguiente devuelve una NodeList. El objeto NodeList es una colección de nodos, generalmente devuelta por propiedades como Node.childNodes y métodos como document.querySelectorAll.
NodeList es una colección en vivo, es decir, si el árbol de nodos del documento cambia, NodeList también cambiará en consecuencia.
document.getElementsByName('name')[index].value
Ejemplo
Obtener el contenido mediante el atributo name establecido en el elemento:
document.getElementsByName("searchTxt")[0].value; // name 属性值为 searchTxt
Método 5
Se utiliza el selector de CSS para obtenerlo; este método es más potente:
document.querySelector('selector').value // selector 是 CSS 选择器
Ejemplo
Ejemplo
document.querySelector('.searchField').value; // Obtener por clase class
document.querySelector('input').value; // Obtener por nombre de etiqueta
document.querySelector('[name="searchTxt"]').value; // Obtener por el atributo name y su valor
Método 6
querySelectorAll puede devolver todos los elementos correspondientes a un selector de CSS; es una NodeList.
document.querySelectorAll('selector')[index].value
Ejemplo
Ejemplo
document.querySelectorAll('.searchField')[0].value; // Obtener por clase class
document.querySelectorAll('input')[0].value; // Obtener por nombre de etiqueta
document.querySelectorAll('[name="searchTxt"]')[0].value; // Obtener por el atributo name y su valor