JavaScript에서 유형별로 요소 가져오기

1. JavaScript에서 querySelectorAll()로 요소 가져오기
2. JavaScript에서 getElementsByTagName()으로 요소 가져오기

JavaScript는 getElementById() 및 getElementByClass()와 같은 요소를 가져오는 다양한 방법을 제공합니다. 그러나 특정 유형의 모든 요소를 ​​선택/처리하려면 어떻게 해야 할까요? JavaScript는 이러한 작업을 수행하기 위해 querySelectorAll() 메서드 또는 getElementsByTagName() 메서드를 제공합니다.

이 기사에서는 JavaScript에서 유형별로 요소를 가져오는 방법을 배웁니다.

JavaScript에서 querySelectorAll()로 요소 가져오기

이것은 JavaScript에서 제공하는 내장 document 메소드이며 selectors가 지정된 선택기와 일치하는 요소 개체/NodeList를 반환합니다. 다중 선택자도 전달할 수 있습니다. querySelectorAll()과 querySelector() 사이에는 한 가지 차이점이 있습니다. 첫 번째 경우에는 일치하는 요소의 모든 개체가 반환되고 두 번째 경우에는 일치하는 단일 요소 개체가 반환됩니다. 유효하지 않은 선택기가 전달되면 SyntaxError가 발행됩니다.

통사론

document.querySelectorAll($selectors);

매개변수

• $selectors: 일치해야 하는 HTML 속성의 selector를 지정하는 필수 매개변수입니다. 여러 선택자는 쉼표로 구분하여 전달할 수 있습니다. 예를 들어 document.querySelectorAll("p")은 모든 p 태그 요소를 찾습니다.

반환 값

해당 요소가 발견되면 해당 DOM 요소 객체를 반환합니다. 그렇지 않으면 빈 NodeList를 반환합니다.

예제 코드:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const selectors = document.querySelectorAll('input[type=text]');
console.log(selectors.length, selectors[0].value, selectors[1].value);

출력:

2
John
Doe

JavaScript에서 getElementsByTagName()으로 요소 가져오기

이것은 JavaScript에서 제공하는 내장 document 메소드이며 tag가 지정된 태그 이름과 일치하는 요소 개체/NodeList를 반환합니다. 루트 노드도 검색에 포함되며 라이브 HTML 컬렉션이 반환됩니다.

통사론

document.getElementsByTagName($name);

매개변수

• $name: 일치해야 하는 HTML 속성의 tagName을 지정하는 필수 매개변수입니다.

반환 값

해당 요소가 발견되면 해당 DOM 요소 객체를 반환합니다. 그렇지 않으면 null을 반환합니다.

getElementsByTagName과 querySelectorAll의 유일한 차이점은 첫 번째 요소는 지정된 태그 이름이 지정된 태그 이름과 일치하는 요소만 선택한다는 것입니다. 대조적으로 querySelectorAll은 모든 선택기를 사용할 수 있으므로 훨씬 더 유연하고 강력합니다.

또한 getElementsByTagName은 라이브 노드 목록을 반환하고 querySelectorAll은 정적 노드 목록을 반환합니다. 라이브 노드 목록은 DOM이 변경되는 즉시 결과를 업데이트하는 데 도움이 되며 쿼리를 실행할 필요가 없습니다.

예제 코드:

<div>
  <label>FirstName</label>
  <input type="text" id="firstName" value="John">
</div>
<div>
  <label>Last Name</label>
  <input type="text" id="lastName" value="Doe">
</div>

const inputs = document.getElementsByTagName('input');

for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].type.toLowerCase() == 'text') {
    console.log(inputs[i].value);
  }
}

출력:

John
Doe