getElement*, querySelector*

document.getElementById

요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용해 접근할 수 있을뿐아니라 id 속성값을 그대로 딴 전역변수를 이용해 접근할 수도 있다.

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

<script>
  // 변수 elem은 id가 'elem'인 요소를 참조합니다.
  elem.style.background = 'red';

  // id가 elem-content인 요소는 중간에 하이픈(-)이 있기 때문에 변수 이름으로 쓸 수 없습니다.
  // 이럴 땐 대괄호(`[...]`)를 사용해서 window['elem-content']로 접근하면 됩니다.
</script>

< div id='div-ab'>abcd< /div >
document.getElementById('div-ab');

let div-ab; 자바스크립트변수에는 -를 사용할 수 없으므로 요소노드 id에 -를 사용하는 것도 하나의 방법이 되겠다.
window['elem-content']로 접근하면 된다.

document.body.getElementById 이렇게 사용할 수 없다.
오직 document.getElementById 이렇게 사용해야 한다.

querySelectorAll

<ul>
  <li>1-1</li>
  <li>1-2</li>
</ul>
<ul>
  <li>2-1</li>
  <li>2-2</li>
</ul>
<script>
  let elements = document.querySelectorAll('ul > li:last-child');

  for (let elem of elements) {
    alert(elem.innerHTML); // "1-2", "2-2"
  }
</script>

querySelectorAll에는 :hover나 :active 같은 CSS 선택자의 가상 클래스(pseudo-class)도 사용할 수 있습니다. document.querySelectorAll(':hover')을 사용하면 마우스 포인터가 위에 있는(hover 상태인) 요소 모두를 담은 컬렉션이 반환됩니다. 이때 컬렉션은 DOM 트리 최상단에 위치한 부터 가장 하단의 요소 순으로 채워집니다.

querySelector

elem.querySelector(css)는 주어진 CSS선택자에 대응하는 요소 중 첫 번째 요소를 반환한다.

어떤 요소노드에서도 querySelector를 사용할 수 있으며 인자로 CSS선택자를 사용할 수 있다.

matches
elem.matches(CSS);
이 메서드는 요소 elem이 주어진 CSS 선택자와 일치하는지 여부를 판단하여 일치한다면 true, 아니라면 false를 반환한다.

<a href="http://example.com/file.zip">...</a>
<a href="http://ya.ru">...</a>

<script>
  // document.body.children가 아니더라도 컬렉션이라면 이 메서드를 적용할 수 있습니다.
  for (let elem of document.body.children) {
    if (elem.matches('a[href$="zip"]')) {
      alert("주어진 CSS 선택자와 일치하는 요소: " + elem.href );
    }
  }
</script>

closest

elem.closest(css)는 elem 자기 자신을 포함하여 CSS 선택자와 일치하는 가장 가까운 조상 요소노드를 찾아서 반환한다.

elem.getElementsByTagName(tag)
elem.getElementsByClassName(className)
document.getElementsByName(name)

'getElementsBy'로 시작하는 모든 메서드는 살아있는 컬렉션을 반환
querySelectorAll은 정적인 컬렉션을 반환