javascript : DOM

DOM

• Document Object Model
• body, h1, ul 과 같은 객체 중 가장 상위 객체이다.
• document 객체는 브라우저에서 자동으로 생성된다. 새로운 페이지를 열 때마다 해당 페이지의 콘텐츠를 이용한 문서 객체 모델이 생성된다.
• 개발자도구 -> console

console.dir(document); // document 객체 구성 요소 확인

const banner = document.getElementById("banner");
console.dir(banner); // banner 객체 구성 요소 확인

• document.getElementById 메소드는 html이 아닌 문서 객체 모델의 객체를 찾는다.
• html이 아닌 javascript 객체가 생성된다.

const allImages = document.getElementsByTagName('img');
// 모든 img 태그 선택
// HTML Collection 을 통해 복수의 element가 집합이나 배열과 비슷한 형태로 반환된다.

• DOM에 더 최근에 추가된 메소드로 querySelector가 있다.
• querySelector를 통해 html이 아닌 js 객체인 element가 반환된다.

document.querySelectory('h1'); //element 반환
document.querySelectory('#red'); //id
document.querySelectory('.big'); //class

document.querySelector('a[title="java"]');
// css 선택자를 다양하게 사용할 수 있다.

document.querySelectorAll('p'); // 모든 element가 집합이나 배열과 같은 형태로 반환된다.
document.querySelector('p'); // 해당되는 첫번째 element만 반환된다.