코드스테이츠 17일차
고차함수/알고리즘 챕터가 끝이났다.
한층 높게 생각하기가 쉽지 않았다.
생각나는대로 수도코드를 작성해도 그걸 코드로 옮기는것이 쉽지 않았다.
좀더 다양하게 문제를 해결할 방법을 고민해봐야겠다.
그 외에 오늘은 DOM에 대해 배우게 되었다.
이전에 독학할때에는 무작정 따라하는식이었기때문에
어떻게 작동하는지만 알고 넘어갔다면
이젠 더 깊게 알게된 것 같다.
새로 배운 것들
DOM
DOM이란 Document Object Module 의 약자로
HTML 문서를 표현하고 조작할 수 있는 어떤 매개체라고 한다.
DOM을 사용해 문서를 만들고(CREATE), 조회하고(READ),
갱신하고(UPDATE), 삭제하는법(DELETE)에 대해 얘기해보자
만들기(CREATE)
HTML 문서에 어떤 태그를 추가하는 방법은 아래와 같다
document.createElement('div')DOM은 자바스크립트의 어떤 변수에 할당하여 사용하는것 처럼 만들 수도 있다.
이러한 작성 방식을 Document Fragments라고 한다.
const newDiv = document.createElement('div')이렇게 만든 <div>를 어딘가에 할당해 줘야 하는데
그럴때에는 아래처럼 작성하면 된다.
document.body.append(newDiv)이런식으로 작성하면 <body>안에 <div>를 넣을수 있다.
위 예시는 <body>안에 <div>를 새로 만들어 넣은 것이다.
document.body.prepend(newDiv)append가 아닌 prepend를 작성하면
부모의 제일 첫번째 자식으로 추가한다
이밖에도 appendChild를 사용해 추가할 수도 있지만
그다지 추천하지는 않는다. append와 appendChild의 차이는 다음과 같다.
append
append는 자바스크립트 함수이다.
append는 배개변수 없이 사용할 수 있다.
append는 appendChild를 사용할 수 있는 대부분의 상황에서 사용 가능하다.
append는 참조 자료형 데이터를 추가할 수 있다.
append는 반환되는 값이 없다.
appendChild
appendChild는 DOM함수이다.
appendChild는 매개변수가 필요하다.
appendChild는 append를 사용할 수 있는 상황에서 가끔 오류가 발생한다.
appendChild는 원시 자료형 데이터만 추가할 수 있다.
appendChild는 객체를 반환한다.
MDN을 통해 더 자세히 알 수 있다.
조회하기(READ)
DOM을 이용해 HTML 문서를 선택하는 방법은 아래와 같다.
document.querySelector('#read')
document.querySelectorAll('.read')인자로 들어가는 문자열은 CSS에서 선택하는 방법과 같다.
.은 class, #은 id
querySelectorAll은 입력된 값과 같은 모든 노드를 선택한다.
getElementBy###로도 선택할 수 있지만 추천되지 않는 선택법이다.
document.setAttribute('id', 'read')이외에도 setAttribute를 이용해 선택할 수도 있다.
첫번째 인자에는 노드의 속성이름(class, id, herf등의 속성)
두번째 인자에는 노드의 속성값을 넣으면 된다.
갱신하기(UPDATE)
DOM을 이용해 만든 노드에 속성을 추가할 수 있다.
newDiv.classList.add('update')classList를 이용하면 기존의 속성도
제거나 조회, 교체도 가능하다(remove, contains, replase)
newDiv.textContent('Hello World')textContent를 사용하면 안에 문자열을 추가할 수도 있다.
이외에도 innerHTML을 통해 문자열을 추가할수도 있지만
보안상의 이유를 사용하지 않는것이 좋다.
innerHTML은 HTML 자체를 집어넣기 때문에
이를 이용해 <script>를 사용해 웹페이지를 공격하는
XSS공격에 취약하다.
제거하기(DELETE)
DOM을 이용해 노드를 제거하는 방법이다.
newDiv.remove()이렇게 작성하면 특정 노드를 지정해서 삭제할 수 있다.
document.querySelector('#delete').removeChild(newDiv)만약 부모 요소 아래에 있는 자식의 노드를 삭제하고싶다면
이런식으로 작성하면된다. ('#delete')에 부모 요소를 선택할수있는 인자를,
(newDiv)에는 삭제할 노드를 입력하면 된다.
- 노드와 엘레멘트
이부분이 많이 햇갈렸었는데 엘레멘트는 노드의 한 요소중 하나라고 한다.
이 블로그 글을 통해 알게되었다.
0개의 댓글
관련 채용 정보
