Compruebe si un elemento de entrada HTML está vacío o no tiene ningún valor ingresado por el usuario

Relacionado con esta pregunta aquí. ¿Puedo verificar si un elemento en el DOM tiene un valor o no? Estoy tratando de ponerlo en una declaración ‘si’ y no estoy seguro de si mi enfoque es correcto. Aquí va:

if (document.getElementById('customx')){
    //do something
}

O debería ser:

if (document.getElementById('customx') == ""){
    //do something
}

EDITAR: Por valor quiero decir, customx es un cuadro de entrada de texto. ¿Cómo puedo verificar si este campo no tiene texto ingresado?

El getElementById El método devuelve un objeto Element que puede usar para interactuar con el elemento. Si no se encuentra el elemento, null es regresado. En el caso de un elemento de entrada, el value propiedad del objeto contiene la cadena en el atributo de valor.

Utilizando el hecho de que el && cortocircuitos del operador, y que ambos null y la cadena vacía se considera “falsa” en un contexto booleano, podemos combinar las comprobaciones de la existencia de elementos y la presencia de datos de valor de la siguiente manera:

var myInput = document.getElementById("customx");
if (myInput && myInput.value) {
  alert("My input has a value!");
}

getElementById devolverá falso si el elemento no se encontró en el DOM.

var el = document.getElementById("customx");
if (el !== null && el.value === "")
{
  //The element was found and the value is empty.
}

var input = document.getElementById("customx");

if (input && input.value) {
    alert(1);
}
else {
    alert (0);
}

Tu primera fue básicamente correcta. Esto, FYI, es malo. Realiza una verificación de igualdad entre un nodo DOM y una cadena:

if (document.getElementById('customx') == ""){

Los nodos DOM son en realidad su propio tipo de objeto JavaScript. Por lo tanto, esta comparación nunca funcionaría en absoluto, ya que está haciendo una comparación de igualdad en dos tipos de datos claramente diferentes.

Quieres:

if (document.getElementById('customx').value === ""){
    //do something
}

El value La propiedad le dará un valor de cadena y debe compararlo con una cadena vacía.

var myInput = document.getElementById("customx");
if (myInput.value.length > 0) {
  //do something;
}

(.length > 0 es otra forma de verificar el elemento de entrada)

Vacío no es lo mismo que “sin valor”.

HTMLInputElement.value es '' cuando tiene una entrada inválida. Si .value no es '', entonces no está vacío. Eso es definitivo, pero como hay momentos en que .value === '' pero no vacío, tenemos que probar. Por ejemplo, en Chrome, con un number tipo de entrada, si escribe . o e se colocará en el cuadro de entrada, pero .value no cambiará de '' porque no es válido.

<input type=number>

Podemos pedirle al navegador más información y afortunadamente ValidityState está muy bien soportado. Básicamente, si no hay valor, pero el navegador dice que hay una entrada incorrecta, entonces no está vacío.

function isInputEmpty(input) {
  return !input.value && !input.validity.badInput;
}

Editar: Créditos a @osullic por encontrar esto en las especificaciones:

El valor de un control es su estado interno. Como tal, es posible que no coincida con la entrada actual del usuario.

https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#a-form-control’s-value