FU11M00N

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - Document Document 객체는 DOM의 스펙입니다. 이것이 웹브라우저에서는 HTMLDocument 객체로 사용됩니다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있습니다. - 예제 document 는 node 를 상속받았기 때문에, childNodes를 사용가능합니다. 위의 결과는 document 의 첫번째 자식은 이 출력되고 두번째 자식은 html 태그 전체라는 것을 출력해줍니다. - Document 주요 API 노드 생성 API document 객체의 주요 임무는 새로운 노드를 생성해주는 역할입니다. createElement() createTextNode() 문서 정보 API title ..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 문자열로 노드 제어 - innerHTML innerHTML은 문자열로 자식 노드를 만들 수 있는 기능을 제공합니다. 또한 자식 노드의 값을 읽어올 수도 있습니다. - innerHTML 예제 HTML CSS get 버튼을 누르면 콘솔창에 위와 같은 결과가 출력됩니다. innerHTML 로 타겟의 하위 html 태그를 얻어옵니다. set 버튼을 누르면 html 문서가 변해서 출력됩니다. - outerHTML outerHTML은 선택한 엘리먼트를 포함해서 처리됩니다. innerHTML 은 선택한 엘리먼트 하위의 엘리먼트들을 다뤘지만, outerHTML 선택한 엘리먼트를 포함한다는 점에서 차이가 있습니다. - outerHTML 예제..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - jQuery 노드 변경 API jQuery에서 노드를 제어하는 기능은 주로 Manipulation 카테고리에 속해 있습니다. 아래 링크는 jquery api manipulation 관련 링크입니다. http://api.jquery.com/category/manipulation/ Manipulation | jQuery API Documentation Adds the specified class(es) to each element in the set of matched elements. Insert content, specified by the parameter, after each element in the set of mat..

생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅입니다. - 노드 변경 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는 결괏값이 차이가 납니다. 이 둘의 ..