Javascript 는 호스트된 환경 브라우저가 javascript엔진을 이해하고 분석하고 실행할수 있게하는것 브라우저와 상호작용 할 수 있게 해줍니다.
HTML코드와 상호작용하게 하고 이것을
DOM이라고 부릅니다 결국 로드된 텐더링된 HTML코드
JavaScript 객체로서 노출된 객체들과 함께 작동되며 결국 이건 렌더링한 결과물.
window 창과 document 창이있는데
(ROOT DOM)
document는 window의 일부이다.
요소노드 > HEAD>TITLE>BODY>HEADER>H!HTML페이지 querySelector() , getElementById(), -ID를 가지고 선택하는것
querySelector() -
요약: 노드 쿼리 메서드
다음은 DOM 요소에 접근하는 다양한 방법에 대한 요약입니다 (참고: 요소 노드에 대해서만 쿼리할 수 있음).
아래의 쿼리 메서드 외에도 문서 객체에 대한 아래의 특수 프로퍼티로 문서의 일부를 선택합니다.
document.body => 요소 노드를 선택합니다.
document.head => 요소 노드를 선택합니다.
document.documentElement => 요소 노드를 선택합니다.
쿼리 메서드
document.querySelector();
모든 CSS 선택자(예: '#id이름', '.클래스명' 또는 'div p.클래스명')를 사용하여 DOM에서 처음(!) 일치하는 요소를 반환합니다. 일치하는 요소를 찾을 수 없는 경우에는 null 을 반환합니다.
추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
document.getElementById();
ID(# 없이 ID 이름만)를 가져와 이 ID를 가진 요소를 반환합니다. 동일한 ID가 페이지에서 두 번 이상 발생하지 않으므로 항상 정확히 하나의 요소를 반환합니다. 지정된 ID를 가진 요소를 찾을 수 없는 경우 null 을 반환합니다.
추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
document.querySelectorAll();
모든 CSS 선택자(예: '#id이름', '.클래스명' 또는 'div p.클래스명')를 사용하여 DOM에서 일치하는 모든 요소를 정적(넌 라이브) NodeList로 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 NodeList 를 반환합니다.
추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
document.getElementsByClassName();
CSS 클래스 g(예: '클래스명')를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection 을 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.
추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
document.getElementsByTagName();
HTML 태그(예: 'p')를 가져와 DOM에서 일치하는 요소의 라이브 HTMLCollection을 반환합니다. 일치하는 요소를 찾을 수 없으면 빈 HTMLCollection을 반환합니다.
추가 정보: https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName
일반적으로는 사용되지 않는 getElementsByName() 메서드도 있습니다(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName<2 }).
속성-프로퍼티에 매핑되어있고 실시간 동기화가 설정되어 있다.
