[JavaScript - 7] DOM

DOM 소개, 콘텐츠 변경하기

• 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성하는데 이를 DOM(Documnet Object Model)이라고 부름
• 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링
• 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스

DOM에 접근하자

• 브라우저 객체 window의 document 속성은 창이 포함한 문서를 참조
• window.document은 현재 브라우정 렌더링 되고 있는 문서를 의미
  • 속성을 이용하면 해당 문서에 접근 할 수 있음

querySelector & textContent

querySelector

• 메소드
• 선택자를 인자로 전달받아 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환
  • 선택자 : 문자열 타입의 ‘유효한 CSS 선택자’

• 요소가 없으면 null 데이터 반환

textContent

• 속성
• 해당 객체가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성
• textContent를 통해 요소가 포함한 텍스트를 읽을 수도 변경할 수도 있음
  • p요소를 받아 p라는 상수에 이름을 붙일 시 p.textConent = ‘새로운 값’으로 변경할 수 있음

 

 

DOM 메서드 및 속성

• DOM을 다루는 명령문 역시 입력 > 처리 > 출력의 절차를 수행
• DOM 메서드
  

  메서드 이름	역할
  doucmnet.querySelector(x)	CSS선택자 x를 기반으로 첫 번째 요소를 선택
  document.querySelectorAll(x)	CSS선택자 X를 기반으로 여러 요소를 선택
  document.getElementById(x)	id속성의 값을 기반으로 요소를 선택
  document.getElementsByClassName(x)	class 속성의 값을 기반으로 여러 요소를 선택
  doucument.write(x)	문서에 콘텐츠 x를 추가 입력

• 속성
  • 사용법
    • 웹요소. 속성 이름

    속성 이름	역할
    textContent	요소가 텍스트 콘텐츠를 반환
    innerHTML	요소 내에 쓰인 HTML 코드를 텍스트 형태로 반환
    className	요소의 class 속성 값을 반환
    sytle	요소의 style 관련 속성 값들을 반환
    title	요소의 title 속성 값을 반환