요소 접근, 요소 검색

1️⃣ DOM검색에 사용

1. getElementById(id)

<div id = "elem">
	<div id = "elem-content">Element</div>

let elem = document.getElemnetById('elem');
// elem-content는 하이폰(-) 때문에 대괄호(['elem-content'] 접근

anyNode.getElementById가 아닌 document.getElementById

getElementById는 document 객체를 대상으로 해당 id를 가진 요소 노드를 찾아 준다.

문서 노드가 아닌 다른 노드엔 호출할 수 없습니다.

2. querySelectorAll(css)

elem 자식 요소 중 주어진 css 선택자 대응하는 요소 모두 반환

✔️Node List(static collection)
인덱스, 반복문을 통해 요소 접근가능
foreach, entires, keys, values는 사용가능
DOM 변경 사항 실시간 반영 X

❗️대부분 Node List는 live collection인데 querySelectorAll만 정적이다
→ 복사해서 담는 느낌

const elements = document.querySelectorAll(".item");
console.log(elements.length); // 3

// 새로운 요소 추가
const newItem = document.createElement("div");
newItem.className = "item";
document.body.appendChild(newItem);

console.log(elements.length); // 3 (변화 없음)

3. closest(css)

자기 자신을 포함해서 css 선택자와 일치하는 가장 가까운 조상 요소

4. getElementsBy*

태그 클래스 등을 이용해 원하는 노드를 찾아주는 메서드도 있다

❗️살아있는 컬렉션을 반환 : 문서 변경 되면 컬렉션이 자동갱신된다

4-1. getElementsByTagName(tag)

주어진 태그 해당 요소 찾고, 대응하는 요소

getElemnetsByTagName(*) : 모든 태그 검색

// 문서 내 모든 div를 얻습니다.
let divs = document.getElementsByTagName('div');

4-2. getElementsByName(name)

문서 전체 대상으로 검색 수행
검색 기준 name

4-3. getElementsByClassName(className)

검색 기준 class

❗️

• getElementsByTagName(tagName)
• getElementsByClassName(className)
• getElementsByName(name)
  요소 하나가 아니라 컬렉션을 반환한다

// 동작하지 않는 코드
document.getElementsByTagName('input').value = 5;

컬렉션 요소 내에 값을 할당하고 싶었지만 동작하지 않는다
컬렉션을 순회하거나, 인덱스를 사용해서 값을 할당해야 한다

// (문서에 input 요소가 있다면) 아래 코드는 잘 동작합니다.
document.getElementsByTagName('input')[0].value = 5;

✔️HTML collection(live collection)
인덱스, 반복문을 통해 요소 접근 가능
배열 메서드 사용불가

DOM 변경사항 실시간 반영(동적 컬렉션)
→ 참조 느낌

const elements = document.getElementsByClassName("item");
console.log(elements.length); // 3
// 새로운 요소 추가
const newItem = document.createElement("div");
newItem.className = "item";
document.body.appendChild(newItem);
console.log(elements.length); // 4 (자동 반영)

2️⃣ 불리언 메소드

1. matches(css)

DOM검색이 아닌, 불리언 메소드
선택자 요소가 주어진 css 선택자와 일치하는지 여부 판단
if문에 주로 쓰인다

2. contains(elemB)

elemA.contains(elemB) : elemB가 elemA에 속해 있는데, elemA == elemB일 때 참 반환

✔️querySelector vs querySelectorAll

• 공통점 : SyntaxError 예외 발생
  
  
• document.querySelector(selector): 첫 번째 요소만 선택
• document.querySelectorAll(selector): 모든 요소(NodeList) 선택
  
  querySelectorAll은 NodeList를 반환하지만 getElementsByClassName은 HTMLCollection을 반환하는 차이가 있다.
  querySelector : querySelectorAll 보다 더 빠르고, 코드 길이도 짧다.
  = 모든 것에서 하나 찾는 것과 바로 검색 하는 것의 검색 속도 차이

✔️querySelector, querySelectorAll 추가 설명
querySelector(selectors) : 1번째 반환, 일치하는 항목이 없으면 null로 반환된다

• 매개변수 : 유효한 CSS 선택자 문자열이어야 한다. 그렇지 않으면 SyntaxError 예외가 발생한다

1. 태그 select : “태그”

const selected = document.querySelector("h1");
selected.style.color = "red";

2. 클래스 select : .클래스이름

const selected = document.querySelector(".h2");
selected.style.color = "red";

3. id select : #id이름

const selected = document.querySelector("#h3");
selected.style.color = "red";

4. 복합 select : 복합태그이름 “div span”

const selected = document.querySelector("div span");
selected.style.color = "red";

“div span:first-child”
“div span:nth-child(2)” 이런 식으로도 사용할 수 있다

• 반환값 : 지정된 CSS 선택기 Element 세트와 일치하는 1번째 요소 개체
  일치하는 요소가 없으면 null 반환된다
• 예외 : SyntaxError DOMException
  지정된 선택기 구문이 잘못된 경우 발생한다

const el = document.querySelector(".myclass");
// = document.querySelectorAll(css)[0]
// 복잡한 선택기
const el = document.querySelector("div.user-panel.main input[name='login']");
// 부정
const el = document.querySelector(
  "div.user-panel:not(.main) input[name='login']",
);

querySelectAll(selectors) : 모든 요소 목록이 필요한 경우에 사용한다

• 매개변수 : 일치시킬 1개 이상 선택자 포함 문자열, 유효한 css 선택자 문자열이 아니면 SyntaxError 예외 발생
• 반환값 : 문서 순서대로 정렬된다.
  부모 > 자식, 형재 > 나중 형제
• 예외 : SyntaxError DOMException : 지정된 selectors 문자열 구문이 유효하지 않은 경우 발생
  CSS 선택자의 가상 클래스도 사용할 수 있다.
• : hover, : active
  DOM 트리 최상단에 위치한 부터 가장 하단 요소 순으로 채워진다

  // 문서 내 모든 <p> 요소 얻기
  const matches = document.querySelectorAll("p");
  // <div> 내 클래스 note 모든 요소 목록 반환
  const matches = document.querySelectorAll("div.note, div.alert"); 

✔️Live Collection vs. Node List 차이 및 사용 상황
언제 사용하면 좋을까?

구분	Live Collection (동적)	Static NodeList (정적)
자동 업데이트	O	X
성능 (속도)	상대적으로 느림	상대적으로 빠름
사용 예시	실시간 요소 변경 감지 필요 시	변경 없이 한 번만 가져올 때

사용 예시

1. Live Collection이 유리한 경우
   • DOM이 자주 변경될 때 자동으로 최신 상태를 반영해야 하는 경우
   • 예: getElementsByClassName, getElementsByTagName 사용
2. Static NodeList가 유리한 경우
   • 한 번만 DOM 요소를 가져오고, 이후 변경이 필요하지 않은 경우
   • 예: querySelectorAll() 사용하여 반복문 실행 시

DOM 변경 감지가 필요하면 Live Collection, 그렇지 않다면 Static NodeList를 사용하는 것이 성능과 코드 관리 측면에서 효율적이다