[Javascript] DOM - (2)

초기 화면

** 자바스크립트에서 CSS 변경하기 **

- 원하는 타깃. style.value 값

- value 이름은 camel case로 변환해주어야 한다. (background-color -> backgroundColor)

 

ex 1 ) body 태그의 배경 색 바꾸기

잘 변경된 것을 볼 수 있다.

이렇게 하면 에러 남!! $body는 유사 배열이므로 인덱스를 지정해서 접근해야 된다.

ex 2) city라는 클래스 이름을 가진 요소의 글자 색 변경

클래스 이름이기 때문에 . 선택자 사용

 

** 자바스크립트로 HTML element 생성하고 원하는 클래스나 속성 주기 **

 

** 자바스크립트로 HTML element 생성 **

- createElement(만들고 싶은 태그 이름)

 

ex) 추천 여행지 아래에 비추천 여행지 넣기

 

li를 만드는 로직은 똑같기 때문에 배열을 생성했다.

(map 메소드를 사용하기 위해)

map을 사용하여 위 배열에 하나씩 접근해서 원소마다 li를 생성해주었고,

innerText를 사용하여 생성한 li 태그에 city 이름을 넣어주었다.

worstCityItem 출력 시

appendChild를 사용하여 생성한 li들을 ul에 넣어주었다.

worstCity 출력 시

***

appendChild는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙이는 메소드이다.

***

 

생성한 ul을 html 안에 추가하기 위해 insertAdjustHTML을 사용하였다.

***

insertAdjustHTML은 원하는 위치에 특정 노드를 추가하는 메소드로

element.insertAdjanceHTML(position, text); 형식으로 사용한다.

 

position으로는 beforebegin, afterbegin, beforeend, afterend만 사용할 수 있으며, 차례대로 element 앞, element 안에 가장 첫 번째 child, element 안에 가장 마지막 child, element 뒤에 노드를 추가한다.

***

 

하나에 div에 넣는 것이 아닌 새로운 div를 만들어 안에 넣을 것이다.

createElement를 사용하여 div와 h2를 만들어주고,

innerText를 사용하여 < WORST 5 > 문구를 생성해둔 h2 태그에 넣어주었다.

그리고 appendChild를 통해 생성해둔 div 태그 뒤 붙여주었다.

그다음 appendChild를 사용하여 생성한 ul을 div에 넣어준 후 

화면에 표시하기 위해 $container에 넣어주었다.

($container는 유사 배열이라 인덱스를 통해 접근하였다.)

마지막으로 < BEST 5 > div와 같은 css 속성을 적용하기 위해 

classList 사용하여 클래스를 추가할 것이다.

 

***

classList는 해당 엘리먼트의 클래스들을 배열 형태로 나타내 주는 메소드이다.

클래스를 추가하고 싶으면 add, 삭제하고 싶으면 remove를 사용하면 된다.

***

글자 색에 회색이 적용되지 않은 이유는 worst div가 생기기 전에

자바스크립트를 사용하여 스타일을 지정해줬기 때문이다.

(자바스크립트는 코드가 위에서 아래로 순차적으로 실행됨)

 

만약 속성을 추가하고 싶다면 setAttribute 메소드를 사용하면 된다.

변경된 화면

선택한 DOM에 이벤트를 추가하는 방법은 다음 포스팅에서 작성할 것이다!

---

강의 출처: 컴공 선배