0. 요약본

메소드의미결과
document.getElementById('id')HTMLid속성으로 태그 선택하기id에 해당하는 태그 하나
document.getElementsByClassName('class')HTML class속성으로 태그 선택하기class에 해당하는 태그 모음(HTMLCollection)
document.getElementsByTagName('tag')HTML 태그 이름으로 태그 선택하기tag에 해당하는 태그 모음(HTMLCollection)
document.querySelector('css')css 선택자로 태그 선택하기css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나
document.querySelectorAll('css')css 선택자로 태그 선택하기css 선택자에 해당하는 태그 모음(NodeList)

1. id로 태그 선택하기

document.getElementById('id');

존재하지 않는 id를 입력하면 null을 리턴한다.

const myTag = document.getElementById('btns'); //null

2. class로 태그 선택하기

document.getElementsByClassName('class');

  • 요소들의 순서는 깊이와 상관없이 위-아래로 들어간다.
  • 유사배열(Array-Like Object)형태로 저장된다.

    유사배열의 조건과 특징
    1) 숫자 형태의 indexing이 가능
    2) length 프로퍼티가 있음
    3) 배열의 기본 메소드 사용불가(push,splice)
    4) Array.isArray 리턴값은 false

  • 존재하지 않는 class는 빈 배열을 리턴한다.
console.log(myClassTag === null); // false
console.log(myClassTag.length); // 0

3. HTML태그 이름으로 태그 선택하기

document.getElementsByTagName('tag');

  • css 선택자처럼 * 값을 전달하게 되면 모든 태그를 선택할 수 있다. (잘 안씀)
const allTags = document.getElementsByTagName('*');

4. css선택자로 태그 선택하기

css selector를 활용하여 HTML태그요소를 가져올 수 있다.

document.querySelector('#css');
document.querySelector('.css');
document.querySelectorAll('.css'); //유사배열 리턴(NodeList)

profile
깊이생각하고 한삽질뜨는

0개의 댓글