문서객체모델 (DOM)

Document Object Model

• 문서객체 모델
• 프로그램이나 스크립트가 웹 페이지 내의 구성 요소들에 접근하여
  내용이나 스타일 등을 변경할 수 있게 해 주는 인터페이스
• 모든 엘리먼트(html, head, body, h1, div, …)는 객체다.

Document 객체의 주요 메소드

• getElementById(id) : 지정된 id에 해당하는 element 객체를 반환한다
• querySelector(“css 선택자”) : 지정된 선택자로 검색된 첫번째 element 객체를 반환한다
• querySelectorAll(“css 선택자”) : 지정된 선택자로 검색된 모든 element 객체를 HTMLCollection에 담아 반환한다

Element 객체의 주요 프로퍼티

• textContent : Element의 텍스트 컨텐츠를 조회/변경할 수 있다
• innerHTML : Element의 html 컨텐츠를 조회/변경할 수 있다
• value : input, select, textarea Element의 값을 조회/변경할 수 있다
• disabled : input, select, textarea, button Element의 비활성화 여부를 조회/변경할 수 있다
• checked : checkedbox, radio element의 비활성화 여부를 조회/변경할 수 있다

Element 객체의 주요 메소드

• appendChild(Element) : 지정된 엘리먼트를 맨 마지막 자식 노드로 추가한다
• removeChild(Element) : 지정된 자식 엘리먼트를 삭제한다
• getAttribute(“속성명”) : 해당 엘리먼트에서 지정된 속석명에 해당하는 속성값을 반환한다 (name)
• setAttribute(“속성명”, “속성값”) : 해당 엘리먼트에서 속성을 변경/추가한다 (name, value)

간단한 사용 예시

   <div class="row mb-3">
      <div class="col">
         <h3>텍스트 컨텐츠 조회 및 변경</h3>
         <p class="border p-3 mb-3" id="text-content-1">첫번째 텍스트 내용입니다.</p>
         <p class="border p-3 mb-3" id="text-content-2">두번째 텍스트 내용입니다.</p>
         <div>
            <button class="btn btn-primary" onclick="getTextContent()">조회</button>
            <button class="btn btn-warning" onclick="changeTextContent()">변경</button>
         </div>
      </div>
   </div>
   
  <script type="text/javascript">
	function getTextContent() {
		// HTML Document 객체에서 id가 "text-content-1"인 엘리먼트(태그를 표현하는 객체) 객체를 찾아서 변수 el에 대입한다.
		let el = document.getElementById("text-content-1");
		console.log("조회된 엘리먼트 -> ", el); // <p class="border p-3 mb-3" id="text-content-1">첫번째 텍스트 내용입니다.</p>
		
		// el 변수에 저장된 엘리먼트 객체의 textContent 프로퍼티가 가지고 있는 텍스트 컨텐츠를 변수 content에 대입한다.
		let content = el.textContent;
		console.log("조회된 엘리먼트의 텍스트 컨텐츠 -> ", content) // 첫번째 텍스트 내용입니다.
	}
	
  // 변경 버튼을 클릭하면 선택한 text-content-2의 textContent를 저녁 먹고 공부하자! 로 변경한다
	function changeTextContent() {
		let el = document.querySelector("#text-content-2");
		el.textContent = "저녁 먹고 공부하자!";
	}
  </script>