푸린세스

이전에 Element 객체에서 getElementsBy* 메소드를 실행하면 조회의 범위가 그 객체의 하위 엘리먼트로 제한된다는 것을 알아봤다. jQuery에서는 어떻게 이러한 작업을 할 수 있을까? selector context 가장 간편한 방법은 조회할 때 조회 범위를 제한하는 것이다. 그 제한된 범위를 jQuery에서는 selector context라고 한다. html css JavaScript JavaScript Core DOM BOM // $( ".marked", "#active").css( "background-color", "red" ); 밑에와 동일한 결과 $("#active .marked").css("background-color", "red"); $("#active.marked").css..

DOCTYPE html> HTML CSS JavaScript console.group('before'); var lis = document.getElementsByTagName('li'); //HTMLCollection for(var i = 0; i < lis.length; i++){ console.log(lis[i]); } console.groupEnd(); console.group('after'); lis[1].parentNode.removeChild(lis[1]); for(var i = 0; i < lis.length; i++){ console.log(lis[i]); } console.groupEnd(); jQuery 객체에는 조회된 엘리먼트가 담겨 있다. jQuery 객체는 일종의 유사배열의 형태..

DOCTYPE html> HTML CSS JavaScript var li = document.getElementById('active'); console.log(li.constructor.name); //HTML LI Element 조회한 결과 객체(LI)가 하나가 리턴되는경우 var lis = document.getElementsByTagName('li'); console.log(lis.constructor.name); //HTML Collection 조회한 메서드가 복수개의 element를 return하는 경우 HTML Collection이라는 객체 //유사배열, 여러개의 element를 담고있다. HTMLElement getElement* 메소드를 통해서 원하는 객체를 조회했다면 이 객체들을 대상으..

DOM을 이용해서 문서를 조회 or js library = jquery를 이용해서 조회 dom을 이용해서 직접조회 --> 적은코드로 jqeury로 가능하다. jQuery를 이용하면 DOM을 사용하는 것 보다 훨씬 효율적으로 필요한 객체를 조회할 수 있다. jQuery는 객체를 조회할 때 CSS 선택자를 이용한다. jQuery의 기본문법 jQuery의 기본 문법은 단순하고 강력하다. $()는 jQuery의 함수이다. 이 함수의 인자로 CSS 선택자(li)를 전달하면 jQuery 객체라는 것을 리턴한다. 이 객체는 선택자에 해당하는 엘리먼트를 제어하는 다양한 메소드를 가지고 있다. 위의 그림에서 css는 선택자에 해당하는 객체들의 style에 color:red로 변경한다. ==> 함수의 인자로 CSS선택자를..

document.getElementsByTagName HTML CSS JavaScript HTML CSS JavaScript DOCTYPE html> // body 객체 console.log(document.getElementsByTagName('body')[0]); // 이미지 객체들의 리스트 console.log(document.getElementsByTagName('body')); document.getElementsByClassName js 에서는 className이라고 부른다. class속성의 값을 기준으로 객체를 조회한다. DOCTYPE html> HTML CSS JavaScript var lis = document.getElementsByClassName('active'); for(var i..