04/19 Javascript 엘리먼트 노드 추가/속성 다루기

저번시간에 상자옮기기 숙제가 있었다 

-> 잘 움직이고 잘했지만

 

 

아래의 사진처럼 박스1의 시작이 0이 아니라면?

70픽셀 부터 시작한다면 거기부터 출발할 수 있게 할수있나?

 

 

css에서 left 70px준 것이 자바스크립트에서는 반영이 되지 않는다 

(css가 자바스크립트로 쓸 수 있게 만들어지지 않아서...)

 

-> 70px부터 출발을 하지 못함 / 초기값 다시 잡아줘야 되는데 

 

-> 어떻게 하면 되느냐 (계산해주는 기능이 추가?)

 

 

 

 

 

 

 

 

실질적으로 현재 위치에서 출발하게 초기값을 잡아주려면 아래의 함수 써주면 된다

 

 

developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle() - Web APIs | MDN

 

 

css값을 읽어오는 것이 아니고

이미 스타일을 갖고있는 결과물(객체)로 만들어주자는 것

 

-> let boxStyle = window.getComputedStyle(box);

 

boxStyle이 이제 그걸 갖고 있게 되는데 

 

그 중 left라는 속성만 얻어와서 left라고 해준다

 

-> var left = boxStyle.getPropertyValue("left");

 

 

 

 

여기다가 parseInt해주면 "70px" -> "70" -> 70 으로 알아서 바꿔준다!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

# ex5 노드 조작하기

 

코드 준비

추가 삭제 복제 버튼

버튼누르면 출력되도록

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

document는 body를 가지고 그 아래에 자식객체들을 쭉 가진다

 

자식이 있는 부모가 있고 없는 부모가 있는데, 그냥 연결과 연결점에 있는 것들을 다 node라고 한다

 

 

-> 나무의 줄기와 줄기를 잇는 마디 를 노드라고 한다 (만나는 교차점)

 

 

 

 

 

 

노드객체들이 12가지로 분류가 된다

객체트리를 만들게 했던 객체들의 타입 종류 

 

 

 

Element : 태그로 되어있는 객체

 Entity :꺾음새와 같은 출력될수없는 것 -> &+lt  (실제출력)-> <

 

 

 

노드가 가진 기능적인 내용들을 알아야겠다

 

 

 

 

 

 

 

 

 

 

 

 

 

클릭하면 이미지가 추가되도록 해보자

 

앨리먼트 노드를 추가하는 것이다 -> 다음과 같이 세가지의 경로를 거쳐야 함

 

 

 document.createElement("~");

 

 

appendChild(~); 를 해주어야 저 빨간 줄이 이어진다고 보면됨

 

 

 

 

 

 

 

 

 

이번에는 이미지가 아닌 

 

div박스를 만들어서 추가해보자

 

박스는  누를때마다 생성이 된다

 

 

속성 추가..

 

 

 

 

 

 

www.youtube.com/watch?v=QdMX4K5x28I&list=PLq8wAnVUcTFWhQrIXNN6kPYXJA6X2IQM4&index=33