3) DOM APIs 실습 실습1 지금 나온 DOM API를 사용해서, strawberry 아래에 새로운 과일을 하나 더 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText = document.createTextNode("망고"); mango.appendChild(mangoText); var parent = document.querySelector("ul"); parent.appendChild(mango); 실습2 insertBefore메서드를 사용해서, orange와 banana 사이에 새로운 과일을 추가하시오. 링크 바로가기 var mango = document.createElement("li"); var mangoText =..
2) 문자열기반으로 DOM 조작하기 DOM API를 사용해서 node를 생성하고 추가하는 건 복잡한 일입니다. html을 문자열로 처리하면서 dom에 쉽게 추가하는 방법을 알아보겠습니다. 1. DOM 조작 API 아래 API들은 삭제, 추가, 이동, 교체를 위한 API사용법입니다. removeChild(): 노드의 자식노드인 인자 값에 들어 있는 노드를 지운 뒤 반환합니다. ex) node.removeChild(child); appendChild(): 인자 값으로 들어온 노드를 엘리먼트의 마지막 자식 노드로 추가합니다. 반환된 값은 이동한 자식 노드를 의미합니다. ex) element.appendChild(aChild); cf) HTML을 어떤 메서드 기반으로 넣는 게 아니고 문자열 기반의, 문자열 처리..
1) DOM node 생성과 추가 DOM DOM(Document Of Model)은 객체 지향 모델로써 구조화된 문서를 표현하는 형식이다. DOM은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. W3C DOM, WHATWG DOM 표준은 대부분의 브라우저에서 DOM을 구현하는 기준이다. (출처: https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8 https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%8..
2) 자바스크립트 객체 객체 자바스크립트에서 어떤 데이터를 저장, 보관, 관리, 수정하기 위해서는 배열을 쓰거나 객체 데이터를 사용해야 합니다. 배열은 순서가 있는 리스트이고 객체는 key값을 이용하여 value를 뽑아내는 것입니다. 이름이 있는 데이터를 보관할 떄 쓰일 수 있습니다. key, value 구조의 자료구조입니다. JavaScript로 데이터를 표현하기 위해서는 Array, Object를 사용합니다. Object형태는 {}로 그 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할 때 Object포맷과 비슷한 방법으로 데이터를 보냅니다. 자바스크립트 객체는 내부적으로는 어떤 순서(order)를 가지고는 있습니다. 하지만 겉으로 드러나는 index가 아니므로 객체를 순서기반으로 사용하면 안..