고정 헤더 영역
상세 컨텐츠
본문
DOM에 대해 공부한뒤 'DOM으로 HTML 조작하기' 를 연습해보았다. DOM을 javascript로 조작하여 HTML Element를 추가할 수 도 삭제 또는 내용을 변경할 수 도 있다는것이 새로웠다. CREATE, READ, UPDATE, DELETE(CRUD)그리고 APPEND 이렇게 크게 5가지라는것을 배웠다. 이것을 학습한 후 페어와 함께 유효성 검사를 진행했다. 로그인을 할때 아이디가 4글자 이상이면 '사용할 수 있는 아이디 입니다'라는 문구를 띄우고 또 4글자 미만이면 '사용할 수 있는 아이디 입니다'라는 문구는 안보이도록 해야한다. 대신 '아이디는 네글자 이상이어야 합니다'라는 문구를 띄워야 하는것이다. 어려울 것 같아 긴장했지만 하다보니 재미있었다.
DOM이란?
DOM(Document Object Model)은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일 , 내용 등을 변경 할 수 있게 돕는다.
웹 페이지는 일종의 문서(document)다. DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.
CREATE createElement
APPEND append, appendChild
READ querySelector, querySelectorAll
UPDATE textContent, classList.add
DELETE remove, removeChild
Today's Key🔑
- document 객체를 통해서 HTML 엘리먼트를 만들고(CREATE), 조회하고(READ), 갱신하고(UPDATE), 삭제하는(DELETE) 할 수있다.
- DOM에는 HTML에 적용(APPEND)하는 메소드가 따로 있다.
