2020.03.29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기 Javascript (자바스크립트) - 요소(Element) 찾기 자바스크립트에서 특정 아이디(id), 클래스(class), 태그(tag)의 dom 요소를 찾기 위해서 사용되는 메소드가 있다. 1. 아이디(Id)값 찾기 - getElementById() 안녕하세요 반갑습니다. Hello world 2. 클래스(Class.. abcdqbbq.tistory.com 자바스크립트의 요소 찾기와 다르게 제이쿼리의 경우엔 좀더 간단하게 요소를 찾을 수 있다. 1. 기본 셀렉터
위 요소를 사용하는 예시를 들자면 아래와 같다.
*사용시 주의사항
위와 같은 경우라고 했을 때 <div class="box"> <span>안녕</span> </div> 이라는 영역을 가져오고 싶어서 var box = $(".box") 를 사용하여 해당 요소를 찾았지만 <div class="box"> <p>예시용 설명글 입니다.</p> </div> 영역까지 같이 검색이된다. 그렇기 때문에 페이지에 하나만 존재하는 id값을 검색해서 사용하는 경우가 아니라면 클래스 검색, 태그 검색시 주의해야할 필요가 있다. 2. 특정 상황, 속성별 셀렉터
위의 예시들 처럼 css 작성할 때와 마찬가지로 특정 속성 및 상황별 선택자를 사용하면 제이쿼리에서 원하는 영역을 가져올 수 있다. JQuery를 통해 Javascript 코드 상에 HTML 객체(Object)를 제어하는 경우가 많이 있습니다. 이 때에 객체의 특정 class 값을 이용하여 다수의 객체에 동시 접근하여 제어를 하거나 한 번에 동일한 CSS를 적용하는 등 다양한 용도로 사용할 수 있습니다. class 속성은 다양한 용도로 사용되는데요. 이러한 속성값이 특정 객체에 포함되어 있는지 여부를 확인하는 방법은 어떤 방법이 있을까요? JQuery를 통해서 특정 객체(Object)가 특정 클래스 속성 값을 가지고 있는지 알아내는 다양한 방법에 대해서 알아보겠습니다.
위의 div HTML 객체는 3가지의 class 속성 값을 가지고 있습니다. 그럼 위의 객체가 apple 속성을 가지고 있는지 확인하는 방법에는 어떤 것들이 있을까요?
위에서 처럼 hasClass 와 is 함수 그리고 length 속성을 통해 객체가 특정 class 를 포함하고 있는지 여부를 체크할 수 있습니다. 그럼 위의 방법 들 중에서 어떤 것을 사용하는 것이 좋을까요? 사실 용법만 조금 다를 뿐이지, 차이점은 거의 없습니다. 취향 따라 쓰면 되겠습니다.^^ 라고 하면 좋겠지만, 그래도 좀 더 나은 것을 사용하고 싶다. 하신다면.. 코드를 작성하는데에 있어서 어떤 것을 중시하는지에 따라 다르겠지만.. (가독성, 성능(속도), 서비스 부하 등등) 속도를 중시한다고 한다면!! 어떤 것을 사용하는 것이 더 좋을까요? jsMacth(http://jindo.dev.naver.com/jsMatch/index.html) 라는 Javascript 코드 성능 비교 사이트에서 앞의 1번과 2번 두 코드의 성능을 비교해 보았습니다. 결과는 다음과 같았습니다.
크롬 43버전, ie(인터넷 익스플로러) 8,9,10,11, 사파리, 파이어폭스, 총 7개의 브라우저로 테스트 해보았습니다. 위에 보면 mozilla11 이라고 되어 있는데 저건 인터넷익스플로러11 입니다. jsMatch 를 업데이트 해주지 않아서 그런지 ie11 을 mozilla11 로 인식하네요. ㅡ.ㅡ; IE에서는 두 구문이 아주 큰 차이를 보이지는 않지만, 크롬이나, 사파리, 파폭에서는 어느정도 성능 차이가 있는 것으로 보입니다. IE도 차이가 크지만 않을 뿐, hasClass 가 조금더 성능이 좋네요. (속도 측정은 컴퓨터 환경 등에 영향을 받기도 하기 때문에 테스트할 때마다 항상 동일한 결과를 주지는 않지만, 대체적으로 비슷한 수치를 보입니다.) 테스트는 0.1초 동안 1번 코드가 실행된 횟수만큼 2번 코드를 실행하여 걸린 상대적인 시간을 표시합니다. 아마 클래스 존재 여부 만을 체크하기 위한 함수와 모든 객체 타입 및 속성에 대응하는 약간은 범용적인 함수에는 어느정도 차이가 있는 것으로 보입니다. 별도로 포스팅에 작성하지는 않았지만, 1번과 3번의 코드 또한 성능 비교를 해 보았을 때에도, 1번의 성능이 더 좋게 나왔습니다. 그러니 객체의 특정 클래스 존재 여부를 확인할 수 있는 위의 3가지 방법 중에서 성능을 고려하신다면 1번의 방법을 사용하시는 것을 추천드립니다. 그런데 아마도 성능 이런 것을 떠나서라도 보통 1번을 많이 사용하고 있는 것으로 알고 있습니다. 함수 명도 직관적이지 않습니까?^^ 실제 위의 각각의 코드를 한 번 실행 하는 정도는 그 실행 소요 시간이 수만 수십만 분의 1 정도의 차이만 날 정도로 그 차이가 미미합니다. 하지만 대규모 포털 사이트를 개발 및 운용하거나 방문자가 많은 커뮤니티를 운용하는 경우라면 이러한 작은 성능 개선도 무시못할 수준이 될 겁니다. 위의 1번 코드와 2번 코드를 3,500번 정도 수행한 시간을 비교하였을 때에는 약 0.015 초 정도 차이가 있었습니다. 15/1000 분의 성능 효과가 있었던 것이지요. 하루 동안에 위의 코드가 실행되는 페이지가 약 350,000번 정도 읽혀졌다면 약 1.5초의 성능 효과가 있는 것입니다. 그리고 저 코드 하나만 있는 것도 아닐 것이고, 유사한 코드가 상당히 많을 수 있기 때문에 is 나 length 대신 hasClass를 사용하는 것의 성능 개선은 무시하지 못할 것입니다.^^ |