[JS-중급편-DOM] 2. querySelector로 DOM 항목 찾기

 

 

이전 강좌에서 봤듯이 DOM은 HTML 문서에 존재하는 모든 요소로 구성된 트리와 같은 구조 일뿐입니다.

 

 

 

세부 사항은 중요하지 않습니다.

 

중요한 것은 데이터에 액세스하고 데이터를 읽거나 수정하려는 모든 HTML 요소가 주변에 떠 있다는 것입니다.

 

HTML 요소를 찾는 방법에는 여러 가지가 있습니다.

 

단순한 방법은 바로 나무와 같은 구조로 배열되어 있어 간단히 말해 위아래로 움직여 무언가를 찾는 방법입니다.

 

이번 강좌에서는 모든 DOM 검색 요구의 95 %를 충족시키는 querySelector 와 querySelectorAll이라는 두 가지 내장 함수를 사용하는 방법을 배우게됩니다.

 

 

querySelector 맛보기

querySelector 및 querySelectorAll의 기능을 설명하려면 다음 HTML을 살펴보십시오.

 

<div id="main">
    <div class="pictureContainer">
        <img class="theimage" src="smiley.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="tongue.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="meh.png" height="300" width="150"/>
    </div>
    <div class="pictureContainer">
        <img class="theimage" src="sad.png" height="300" width="150"/>
    </div>
</div>

 

이 예제에서는 id가 main 인 div가 하나 있고 각각 class 값이 pictureContainer 및 theimage 인 4 개의 div 및 img 요소가 있습니다.

 

다음 섹션에서는 이 HTML에서 querySelector 및 querySelectorAll 함수를 느슨하게 설정하고 어떤 일이 발생하는지 살펴 보겠습니다.

 

querySelector

querySelector 함수는 기본적으로 다음과 같이 작동합니다.

 

var element = document.querySelector("< CSS selector >");

 

querySelector 함수는 인수를 취하며 이 인수는 찾으려는 요소에 대한 CSS selector를 나타내는 문자열입니다.

querySelector에 의해 반환되는 것은 해당 CSS selector에 해당되는 다른 요소가 존재하더라도 무조건 첫 번째로 찾는 요소만 리턴합니다.

 

이전 예제의 HTML을 사용하여 id가 main인 div에 액세스하려면 다음과 같이 작성하면 됩니다.

 

var element = document.querySelector("#main");

 

main은 id이므로 이를 대상으로하는 selector 구문은 #main이 됩니다.

 

마찬가지로 pictureContainer 클래스에 대한 selector를 지정하겠습니다. 클래스 selector은 "."으로 시작합니다.

 

var element = document.querySelector(".pictureContainer");

 

반환되는 것은 클래스 값이 pictureContainer 인 첫 번째 div입니다.

 

 pictureContainer의 클래스 값을 가진 다른 div 요소는 무시됩니다.

 

javaScript에서는 selector 구문이 특별하게 만들어지지는 않았습니다.

 

스타일 시트 또는 스타일 영역에서 selector 구문에 사용할 정확한 구문을 사용하면 됩니다.

 

 

querySelectorAll

querySelectorAll 함수는 제공 한 selector 구문과 일치하는 모든 요소를 반환합니다.

 

var elements = document.querySelectorAll("< CSS selector >");

 

반환 된 요소 수를 제외하고 위에서 querySelector에 대해 설명한 모든 내용은 querySelectorAll에도 적용됩니다.

 

여기서 명심해야 할 거는 실제로 querySelectorAll 함수를 사용하는 방법이 아닙니다.

 

중요한 것은 반환되는 것이 단일 요소가 아니고, 그 요소의 배열인 겁니다.

 

위 첫번째 HTML을 계속 이용해본다고 할때, 클래스 값 theimage를 포함하는 모든 img 요소의 src 속성을 표시하기 위해 querySelectorAll을 사용하려는 경우는 다음과 같습니다.

 

var images = document.querySelectorAll(".theimage");
 
for (var i = 0; i < images.length; i++) {
    var image = images[i];
    alert(image.getAttribute(src));
}

 

아주 간단합니다.

 

당신이 해야 할 가장 중요한 것은 배열로 작업하는 방법을 기억하는 것입니다.

 

여기서 이해 못할 것은 아마 getAttribute 함수일 겁니다.

 

getAttribute 및 요소에서 값을 읽는 방법에 익숙하지 않더라도 괜찮습니다.

 

앞으로 모든 함수를 살펴 볼 예정입니다.

 

지금은 모든 HTML 속성의 값을 읽을 수 있다는 점만 알아 두십시오.

 

 

CSS selector 구문

처음 querySelector와 querySelectorAll을 사용할 때 놀랐던 점은 실제로 CSS selector 구문 변형의 전체 범위를 인수로 사용한다는 것입니다.

 

클래스 값을 지정하지 않고 모든 img 요소를 대상으로하려는 경우 querySelectorAll 호출은 다음과 같습니다.

 

var images = document.querySelectorAll("img");

 

src 속성이 meh.png로 설정된 이미지만 타겟팅하려는 경우 다음과 같이 할 수 있습니다.

 

var images = document.querySelectorAll("img[src='meh.png']");

 

querySelectorAll에 대한 인수로 Attribute Selector를 지정했습니다.

 

CSS 문서에서 selector에 지정할 수있는 거의 모든 복잡한 표현식은 querySelector 또는 querySelectorAll에 대한 인수로 지정하는 데 적합합니다.

 

여기에는 알아야 할 몇 가지 주의 사항이 있습니다.

 

1. 모든 의사 클래스(pseudo-class) selector가 허용되는 것은 아닙니다. : visited 또는 : link로 구성된 selector는 무시되고 아예 요소가 없습니다.
2. 제공하는 selector는 브라우저의 CSS 지원에 따라 다릅니다. Internet Explorer 8은 querySelector 및 querySelectorAll을 지원합니다. CSS 3는 지원하지 않습니다. 이러한 상황에서 IE8에서 querySelector 및 querySelectorAll과 함께 사용하면 CSS 2에 정의 된 selector보다 더 최근의 selector를 사용할 수 없습니다.
3. 지정하는 selector는 검색을 시작하는 시작 요소의 하위 항목에만 적용됩니다. 시작 요소 자체는 포함되지 않습니다.

 

결론

querySelector 및 querySelectorAll 함수는 특정 요소를 대상으로 하는 것이 복잡한 문서에서 매우 유용합니다.

 

잘 정립된 CSS selector 구문에 의존하여 원하는 요소에 대해 작거나 넓은 그물로 캐스팅 할 수 있습니다.

 

모든 이미지 요소를 원하면 querySelectorAll ( "img")이라고 말하면 됩니다.

 

부모 div 내부에 포함 된 즉각적인 img 요소만 원한다면 querySelector ( "div> img")라고 쓸 수 있습니다.

 

꽤 굉장한 함수입니다.

 

getElementById, getElementsByTagName, getElementsByClassName 에 대해

querySelector 및 querySelectorAll 함수는 javaScript에서는 꽤 최근 함수입니다.

 

과거에는 이름에서 보듯이 getElementById, getElementsByTagName 및 getElementsByClassName 함수를 사용했었습니다.

 

온라인에서 오래된 책을 보시면 간혹 보입니다.

 

일반적으로는 querySelector 및 querySelectorAll 만 사용해야합니다.

 

이 두 함수는 getElement* 함수로 할 수 있는 것보다 사용하기 쉽고 훨씬 강력합니다.