코드스테이츠 html의 또 다른 표현 방식 DOM!!

DOM이 필요한 이유와 활용 방법

 

일련의 웹페이지가 user들에게 보이는 과정은

1브라우저가 문서를 파싱하여 읽고 스타일을 입히고

2.뷰 포인트로 보여주는 것

 

그렇다면 DOM은 이런 HTML 문서를 보여주는 또 다른 방식이며, 가장 큰 특징은 객체 방식으로 보여주는 것이다. 이것이 의미하는 것은
1. 속성을 자바스크립트 언어로 컨트롤이 가능하며 원하는대로 값을 바꿀 수 있다는 것이다. 

2. 구조화 되어 있지 않는 HTML 문서는 화면의 형식을 tag로 보여주는 방식이기 때문에 컴퓨터가 받아들일 수 있는 프로그래밍 언어로는 조작이 어렵다. 

 

 

 

 

console.dir(document.body)

 

console.dir(document.body.children[1])

 

let newContents=document.body.children[1]

 

 

DOM Achievement Goals

• DOM을 JavaScript로 조작하여 HTML Element를 추가하거나 삭제, 혹은 내용을 변경할 수 있다.
  • createElement - CREATE
  • querySelector, querySelectorAll - READ
  • textContent, id, classList, setAttribute - UPDATE
  • remove, removeChild, innerHTML = "" , textContent = "" - DELETE
  • appendChild - APPEND
  • innerHTML과 textContent의 차이

 

 

Achievement Goals

• DOM 기초 실습을 통해, 구체적인 사용법을 익힐 수 있다.
  • querySelector를 활용하여, HTML 엘리먼트 정보를 가져올 수 있다.
  • oncilck, onkeyup 속성이나 addEventListener 메소드로 이벤트 핸들러 함수를 HTML 엘리먼트에 적용할 수 있다.
  • 이벤트 핸들러 함수에서 이벤트가 발생한 곳의 정보를 확인할 수 있다.
  • 이벤트 핸들러 함수로 유효성 검사를 실행할 수 있다.
• 유효성 검사에 필요한 기술 요소를 익힐 수 있다.
  • 유효성 검사에 필요한 HTML 엘리먼트, CSS 속성이 무엇인지 알 수 있다.
    • 엘리먼트가 화면에 표시되거나 사라지게 만들 수 있다. (display: none)
  • 유효성 검사에서 활용할 수 있는 정규표현식 사용법 기초에 대해서 익힐 수 있다. (advanced)
• 관심사 분리를 적용하거나, 유효성 검사 함수를 따로 분리해서 설계할 수 있다. (advanced)