12 장 문서 객체 모델과 이벤트 다루기

메서드 형식
getElementById(< ID 속성값 > ) ID 속성값과 일치하는 요소 노드를 1개만 선택합니다

getElementsByClassName (< class 속성값 > ) class 속성값과 일치하는 요소 노드를 모두 선택합니다

getElemenetsByTagName (< 태그명 >) 태그명과 일치하는 요소 노드를 모두 선택합니다.

querySelector (< CSS 선택자 > ) 매개 변수로 넘어오는 CSS 선택자에 해당하는 노드를 1개만 선택합니다

querySelectorAll(< CSS 선택자 > ) 매개변수로 넘어오는 CSS 선택자에 해당하는 노드를 모두 선택합니다.

콘텐츠 조작하기

textContent 노드 요소의 모든 텍스트에 접근합니다

innerText 노드 요소의 텍스트 중 웹 브라우저에 표시되는 텍스트에만 접근합니다,

innerHTML 노드 요소의 텍스트 중 HTML 태그를 포함한 텍스트에만 접근합니다.,

스타일 조작하기 <노드>.style.< CSS 속성명 > = <속성값>;
<노드>.classList.add (class 속성값);
<노드>.classList.remove(class 속성값);

데어터 속성 조작하기 dataset 속성으로 HTML 문서에서 data-* 속성을 조작할 수 있습니다.
<노드>.dataset;

이벤트 사용하기

마우스 이벤트 onclick 마우스로 클릭하면 발생합니다.
ondblclick 마우스로 두 번 빠르게 클릭하면 발생합니다
onmouseover 마우스 포인터를 올리면 발생합니다
onmouseout 마우스ㅗ 포인터가 빠져나가면 발생합니다.