DOM 구조
-
Javascript로 HTML을 동적으로 만들 수 있음.
-
js를 head가 아닌 body에 선언하는 이유.
-
js에서 document를 정보를 읽을 때 html이 파싱되지 않으면 null이 뜨는 오류.
-
단순히 Create만 했을 때 해당 Elements는 DOM을 떠다니고 있다.
CREATE
-
APPEND(PREPEND)
-
이것을 DOM Tree에 집어넣기 위해선 Append(경우에 따라 Prepend)를 해줘야한다.
-
append를 할 경우 요소가 넣고자 하는 곳 가장 마지막 부분에 추가가 되고, prepend를 할 경우 가장 첫 부분에 추가가 된다.
-
READ
-
querySelector는 해당하는 부분의 첫번째 값만 불러옴, querySelectorAll은 해당하는 부분의 전체 값을 가져오며 배열처럼 for문을 사용할 수 있음. 배열은 아니기때문에 유사배열 등의 이름으로 불리움(Array - like Object)
-
반드시 CSS selector 구문을 이용하여 사용해야 된다고 한다. class는 .을, ID는 #을 이용하듯 말이다.
-
getElementById와 querySelector는 동일하게 하나의 요소를 반환한다.
-
/(백슬래쉬)는 자바스크립트뿐만 아니라 querySelector 구문에서 인식하지 않으니 꼭 피해야한다고 나온다.
get이 좀 더 오래된 방식이다.
UPDATE
-
classList, className을 통해 클래스를 쉽게 지정할 수 있다.
-
setAttribute를 통해 ID 등 그 외에 속성을 지정할 수 있다.
-
Element.setAttribute(name, value);
DELETE
- Elements.remove()를 통해 간단히 지울 수 있다.
- 여러 개의 자식 엘리먼트를 삭제하려면? → innerHTML을 통해 삭제할 수 있다.
ex) document.querySelector(#cotainer).innerHTML = '';
→ ID가 container인 자식 Element를 모두 삭제함 but, innerHTML은 보안에서 몇 가지 문제를 가지고 있음
- removeChild 메소드를 통해 반복문을 이용할 수 있음
→ container에 firstChild가 있으면 해당 자식을 계속 지워주는 구문이다.
Element를 삭제할 때,
remove()와 removeChild()의 차이점은
remove()는 ()안에 들어온 인자가 무엇이든 그 전에 입력된 querySelector에서 받아온 인자 값 전체를 삭제한다
removeChild()는 ()안에 들어있는 Child값만 삭제한다.
정확한 삭제를 위해선 removeChild()를 사용해주어야한다.
추가 공부할 것
