Programming/JavaScript (17) 썸네일형 리스트형 Node의 관계 API Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 노드 객체 관계도 ( 출처 : opentutorials.org ) Node.firstChild // 첫번째 자식 노드 Node.lastChild // 마지막 자식 노드 Node.nextSibling // 다음 형제 노드 ( 형제 노드는 같은 레벨에 있는 노드를 말함 ) Node.previousSibling // 이전 형제 노드 Node.childNodes //자식노드들을 유사배열에 담아서 리턴 [0] , [1] 요소들을 각자 배열처럼 뽑아낼수있음 jQuery 속성 제어 API 지금까지 살펴본건 Element의 API에 해당되는것들이다. 앞으로는 jQuery의 API들을 알아보자. 우리가 앞서 DOM에서 속성을 제어할땐setAttribute(속성 값 설정), getAttribute(속성 값 가져오기) , removeAttribute(속성 값 삭제) 등을 이용했다. 이러한 DOM의 메소드들의 대응되는 jQuery메소드는 attr이다. (attribute의 준말이다.) 8행 : 속성값으로 id는 target href는 "opentutorials.org"인 opentutorials 를 선언하고 11행 : jQuery 함수를 통해 ID값이 target인 엘리먼트를 t에 저장12행 : jQuery객체 t의 메소드 attr를 통해 href를 인자로 전달, 즉 t의 href 출력 13행 :.. 식별자 API 식별자 : 엘리먼트들을 식별할 수 있는 , 제어할 수 있는 것Element 객체의 식별자 API Element.tagName // 해당 엘리먼트의 태그 이름을 알아낸다.(태그이름 변경은 불가) ex)JavaScript li태그를 이용해 active라는 id를 가진 엘리먼츠를 먼저 선언하고 getElementById를 통해 'active'라는 ID를 가진 엘리먼트 조회 , .tagName을 이용해 해당 엘리먼트의 태그네임(li) 확인가능 Element.id //문서에서 id는 단 하나만 등장할 수 있는 식별자다. 아래 예제는 id값을 읽고 변경하는 방법을 보여준다. JavaScript //id 식별자가 active 보는바와 같이 id식별자는 변경이 가능하다. Element.className //클래스는 여.. jQuery 객체 체이닝은 선택된 엘리먼트에 대해서 연속적으로 작업을 처리하는것을 의미 .constructor.name 조회한 객체가 단수개의 리턴: HTMLElement 조회한 객체가 복수개의 리턴: HTMLCollection (유사배열) $('li') 는 jQuery함수이며 li라는 css선택자를 조회한다. var li= $('li') 는 함수 실행결과를 변수 li에 담는다. li에 담긴것을 jquery 객체라고 한다. 이 두가지는 꼭 구분하자. jQuery객체가 하는일은 우리가 jQuery함수의 인자로 선택한 엘리먼트들의 정보를 가지고 있으면서 동시에 작업이 가능한 객체 li.css('text-decoration','underline'); // li라는 객체의 css라는 메소드를 이용해 속성 수정| jQuery 객체.. jQuery jQuery는 자바스크립트를 사용하는 사람들이 많이쓰는 라이브러리 ( 라이브러리 : 자주 사용하는 로직을 재사용할 수 있도록 고안된 소프트웨어 ) jQuery의 기본 문법은 단순하고 강력. $('li'').css('color','red'); $( )는 jQuery의 함수, 이 함수의 인자로 CSS selector(선택자) (ex: (li))를 전달하면 jQuery 객체라는 것을 리턴한다. jQuery 함수가 리턴하는 것이 jQuery 객체 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다. DOM(Document Object Model) 기반으로 자바스크립트를 사용할때와 jQuery 기반으로 .. 제어 대상 찾기 ( getElementById ) 이번에 배우는 getElementsById는 사용되는 빈도가 많다. id값을 기준으로 객체를 조회하며 , 성능면에서 가장 우수하다! 특징은 이전에 배웠던 getelementsByTagname 과 getElementsByClassName과는 다르게 element가 단수형이다. 즉 얘가 조회한 결과는 하나의 결과만 갖는다는 특징이 있다. 또한 html의 속성중 id값을 기준으로 조회한다. (문서에서 id는 하나의 엘리먼트만 식별하는 특별한 식별자다!) 다음 예시를 보자. 10행에서 li태그 중 id값을 가진 엘리먼트는 하나 뿐이다. 이때 getElementById를 이용한다. 14행을 보자 , li = document.getElementById('active');이 문서에서 Id값이 'active'인 엘리먼.. 제어 대상 찾기 ( getElementsByClassName ) 두번째로 소개할 태그(엘리먼츠) 조회방법은 ClassName이다. 말 그대로 클래스의 이름을 기준으로 조회한다. 여기 문서를 보면 li태그중 2개의 태그만 클래스의 값이 'active'다. HTML에서는 클래스라고 하는것이 자바스크립트에서는 클래스 네임이라는 표현을 쓴다. 14행에서 인자로 전달된 값('active')에 해당되는 클래스 네임을 갖고있는 엘리먼트들을 조회해서 그것을 유사배열에 담는 메소드다. 그렇게 해서 담긴 lis를 for문으로 처리하면 앞서봤던 getElementsByTagName에서 본것과 같이 동일하게 처리된다. 제어 대상 찾기 ( getElementsByTagName ) 문서를 자바스크립트로 제어하려면 제어의 대상에 해당되는 객체를 찾는 것이 제일 먼저 할 일이다. 문서 내에서 객체를 찾는 방법은 document 객체의 메소드를 이용한다. 문서 내에서 특정 태그에 해당되는 객체를 찾는 방법은 여러가지가 있다. 첫번째로 소개할 getElementsByTagNaem은 인자로 전달된 태그명에 해당하는 객체들을 찾아서 그 리스트를 NodeList라는 유사 배열에 담아서 반환한다. NodeList는 배열은 아니지만 length와 배열접근연산자를 사용해서 element를 조회할 수 있다. 예제 코드를 보자 8행부터 12행까지 ul이라고 하는 리스트의 element가 있다. 14행을 보면 document객체의 getElementsByTagName이라는 메서드를 호출하고있다 docum.. 이전 1 2 3 다음
