FU11M00N

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 노드 변경 API 노드 추가, 생성 , 제거 , 변경를 해주는 API를 알아보겠습니다. - 노드 추가 노드의 추가와 관련된 API들은 아래와 같습니다. appendChild(child) 노드의 마지막 자식으로 주어진 엘리먼트 추가합니다. insertBefore(newElement, referenceElement) appendChild와 동작방법은 같으나 두번째 인자로 엘리먼트를 전달 했을 때 이것 앞에 엘리먼트가 추가됩니다. 노드를 추가하기 위해서는 추가할 엘리먼트를 생성해야합니다. 이것은 document 객체의 기능입니다. - 노드 생성 노드를 생성하는 API 입니다. document.createElement(tagname..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 노드 종류 API 노드 작업을 하게 되면 현재 선택된 노드가 어떤 타입인지를 판단해야 하는 경우가 있습니다. 이런 경우에 사용할 수 있는 API가 nodeType, nodeName입니다. Node.nodeTypenode의 타입을 의미합니다. Node.nodeNamenode의 이름 (태그명을 의미합니다.) - 모든 노드의 종류와 종류에 따른 값 for(var name in Node){ console.log(name, Node[name]); } 모든 노드의 종류와 종류에 따른 값을 출력하는 예제입니다. Node Type 노드의 종류에 따라서 정해진 상수가 존재합니다. 실행 결괏값입니다. 굳이 다 외울필요는 없고 필요할 때 찾아보..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - Node 객체 소개 Node 객체는 DOM에서 시조와 같은 역할을 합니다. 모든 DOM 객체는 Node 객체를 상속 받습니다. Node 객체의 위상은 위와 같습니다. 주요 기능 - 관계 엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있습니다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 API를 통해 문서를 프로그래밍적으로 탐색할 수 있게 됩니다. Node.childNodes Node.firstChild Node.lastChild Node.nextSibling Node.previousSibling Node.contains() Node.hasChildNodes() - 노드의 종류 Node 객체는 모든..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - selector context 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것입니다. 그 제한된 범위를 jQuery에서는 selector context라고 합니다. html css JavaScript JavaScript Core DOM BOM 선택자를 아래와 같이 작성해도 결과는 동일합니다. $( ".marked", "#active").css( "background-color", "skyblue" ); - .find() find는 jQuery 객체 내에서 엘리먼트를 조회하는 기능을 제공합니다. 아래의 코드는 위의 예제와 효과가 같습니다. $( "#active").find('.marked').css( "backgroun..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 속성제어 jQuery 객체의 메소드 중 setAttribute, getAttribute에 대응되는 메소드는 attr입니다. 또한 removeAttribute에 대응되는 메소드로는 removeAttr이 있습니다. opentutorials 위 그림과 같이 href 속성이 제대로 출력되는 것을 알 수 있습니다. - attribute와 property DOM과 마찬가지로 jQuery도 속성(attribute)과 프로퍼티를 구분합니다. 속성은 attr, 프로퍼티는 prop 메소드를 사용합니다. opentutorials 마치 Atrribute 방식과 Property 가 다른것처럼 attr과 prop는 결괏값이 차이가 납니다. 이 둘의 ..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 속성 API 속성은 HTML에서 태그명만으로는 부족한 것을 채워주는 부가적인 정보라고 할 수 있습니다. 이 속성을 어떻게 제어하는지에 대해 알아봅시다. 속성을 제어하는 API는 아래 리스트와 같습니다. Element.getAttribute(name) Element.setAttribute(name, value) Element.hasAttribute(name); Element.removeAttribute(name); Element.getAttribute(name) 는 name이라는 이름을 가진 속성 값을 가져옵니다. Element.setAttribute(name, value) 는 name 속성을 value 값으로 설정합니다. E..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 조회 API 조회 API는 엘리먼트를 조회하는 기능입니다. 이번엔 조회 대상을 제한하는 방법에 대해 알아보겠습니다. 지금까지 document.getElementsBy* 메소드를 통해서 엘리먼트를 조회했습니다. document 객체는 문서 전체를 의미하는 엘리먼트입니다. 즉, document의 조회 메소드는 문서 전체를 대상으로 엘리먼트를 조회합니다. Element 객체 역시도 getElementsBy* 엘리먼트를 가지고 있습니다. Element 객체의 조회 메소드는 해당 엘리먼트의 하위 엘리먼트를 대상으로 조회를 수행합니다. 아래는 예제입니다. html css JavaScript JavaScript Core DOM BOM c..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 식별자 API 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요합니다. 이번 포스팅에서는 식별자 API들에 대해서 알아보도록 하겠습니다. HTML에서 엘리먼트의 이름과 id, 그리고 class는 식별자로 사용됩니다. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 합니다. - Element.tagName 해당 엘리먼트의 태그 이름을 알아냅니다. 읽기 전용이기 때문에 태그 이름을 변경하지는 못합니다. html css JavaScript 태그의 이름인 li 가 출력됩니다. - Element.id 문서에서 id는 단 하나만 등장할 수 있는 식별자입니다. 아래 예제는 id의 값을 읽고 변경하는 방법입니다...