Javascript JS DOM & EVENT #1 노드에 접근하기

DOM (Document Object Model) - 문서 객체 모델 각 html 요소들을 트리형태로 된 데이터 구조로 만듬 DOM이 완성되고 나면 JS같은 프로그래밍 언어가 DOM을 제어할 수 있게됨

DOM 트리

document.documentElement - 화면의 모든 html 요소를 가져옴

document.getElementById('id') - id로 해당하는 html 요소를 가져옴

document.getElementsByTagName('tagName') - 태그명으로 해당하는 html 요소를 객체로 가져옴

document.getElementsByClassName('class명') - class명으로 해당하는 html 요소를 객체로 가져옴

document.getElementsByName('태그 name 명') - 태그 name 명으로 해당하는 html 요소를 객체로 가져옴

document.querySelectorAll('.class명') - class명으로 해당하는 노드를 객체로 가져옴

document.querySelector('#id') - id로 해당하는 노드를 객체로 가져옴

document.querySelector('h3:nth-of-type(2)') - h3에 해당하는 태그중  2번째 노드만 가져옴

document.querySelectorAll('h3:nth-of-type(2n)') - h3에 해당하는 태그중 짝수 노드만 가져옴

 

 

출처: 코딩앙마 유튜브