다음 양식을 사용한 사례가 있습니다.

그리고 자바스크립트를 사용하여 ID를 검색하려고 했습니다.

const form  = document.getElementById("#hello")
console.log(form.id)

그러나 이로 인해 다음이 반환되었습니다.

HTMLElement가 대신 사용됩니다. 따라서 이 문제를 완화하기 위해 대신 getAttribute 함수를 사용했습니다.

const form  = document.getElementById("#hello")
console.log(form.getAttribute('id'))

내가 사용한 곳

처음에는 이 예가 문제와 관련이 없는 것 같다고 생각했습니다. 하지만 내 경우에는 HTMLElement가 인수로 수신되는 유틸리티 라이브러리를 개발 중이었습니다.

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.id
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

제 경우에는 이 함수를 사용하여 양식 활성화를 위한 논리를 배치했는데 이름 ID가 있는 숨겨진 입력이 내 양식 버튼의 입력 필드였기 때문에 검색에 실패했습니다.

따라서 대신 다음을 수행했습니다.

function formEnable(form,enable,resetFeedback=true){

    // checks whether for is an actual form are ommited for simplicity
    const formId = form.getAttribute('id');
    const submitBtn = form.querySelector(`button[type="submit"]`)?? document.querySelector(`button[form="${formId}"][type="submit"]`) ?? document.querySelector(`button[form="${formId}"]`);

   if(!submitBtn){
        throw Error("Unable to enable or disable form")
   }
  // Form Enabling Logic
}

입력과 내 양식 내에 존재하는 해당 이름에 관한 id 속성을 받았는지 확인합니다.