분류 javascript

자바 스크립트에서 CSS 셀렉터 사용하기

컨텐츠 정보

  • 조회 231 (작성일 )

본문

CSS에서 선택기는 스타일을 적용 할 요소를 선택하는 데 사용되는 패턴이지만 위의 제목에서 알 수 있듯이 선택기는 자바 스크립트에서도 유용하며 사용 방법에 대한 예가 아래에 나와 있습니다.


https://dev.to/neutrino2211/using-css-selectors-in-javascript-3hlm 


기초 


자바 스크립트에서 선택기 사용하기 


.querySelector 메서드 사용 


const div = document.querySelector("div") // => First occurence of a div element in the document

const p = div.querySelector("p") // => First occurence of a p element in the div


일치하는 요소를 모두 가져 오려면 document.querySelectorAll 메소드를 사용하십시오. 


document.querySelectorAll("div") // NodeList of all div elements


ID로 


ID로 요소를 가져 오려면 요소 ID 앞에 #를 사용하십시오.


document.querySelector("#id") // => document.getElementById('id')


class로


클래스별로 요소를 가져 오려면 class 이름 앞에 .를 사용하십시오. 


document.querySelectorAll(".myElementClass")


태그 이름으로 


태그 이름으로 요소를 가져 오려면 태그 이름을 입력하기만 하면 됩니다.


document.querySelectorAll("body") // => document.getElementsByTagName('body')


.getElementById 및 getElementsByTagName 복제 


.getElementById 복제하기


document.querySelector("#myDivId") // => document.getElementById('myDivId')


.getElementsByTagName 복제하기


document.querySelectorAll("a") // => document.getElementsByTagName('a')


모든 요소 


모든 요소를 ​​사용하려면 *


document.querySelectorAll("*") // => NodeList[...]


다중 선택기 사용 


여러 셀렉터를 사용하려면 각각을 a, b로 구분합니다.


<html>
    <body>
        <p>Hello i am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelectorAll("p, a") // => NodeList[p,a,a]


요소가 더 있음 


위의 예에서는 기본 쿼리를 만들었지만 명령이나 부모별로 요소를 가져 오는 것과 같은 다른 작업도 수행 할 수 있습니다.


요소 자식 가져 오기 


이 두 가지 변종이 있습니다. 나무 아래로 얼마나 깊든 상관없이 요소의 자식을 가져오고 다른 요소는 요소의 직접 자식을 가져옵니다.


<html>
    <body>
        <p>Hello i am a paragraph</p>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <p>
                Hello i am a paragraph and here's
                <a href="https://anotherplace.com">a link</a>
            </p>
        </div>
    </body>
</html>


위의 HTML을 예로 들자면 이 두 변종을 살펴볼 것입니다.


직접 자식


document.querySelector("div > a") // => <a href="https://awesomeplace.com">Hey I am a link</a>


모든 자식


document.querySelectorAll("div a") // => NodeList[a,a]


우선순위별 요소 얻기 


이 작업을 수행하는 데는 두 가지 방법이 있습니다. 다음 HTML을 고려하십시오.


<html>
    <body>
        <div>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <pre>I should intervene but i wont</pre>
            <p>Hello i am another paragraph</p>
        </div>
        <p>Hello i am a paragraph</p>
    </body>
</html>


배치 된 후


document.querySelector("div + p") // => <p>Hello i am a paragraph</p>


곁에 선행하는


~를 사용하면 일치 항목 바로 뒤의 요소는 중요하지 않습니다.


document.querySelector("a ~ p") // => <p>Hello i am another paragraph</p>


사전 요소가 첫 번째 위치에 있었는지 여부가 중요하지 않기 때문에 사전 요소가 결과에 영향을 미치지 않았음을 알 수 있습니다. 그러나 다음 선택자는 요소 바로 위의 요소를 확인하기 때문에 실패합니다.


document.querySelector("a + p") // => null


속성 별 요소 가져 오기 


속성 선택자는 [로 끝나고]로 시작하며 그만큼 사용됩니다


<html>
    <body>
        <p style="color:blue;">Hello i am styled</p>
        <p>Hello i have no style</p>
    </body>
</html>


document.querySelector("p[style]") // => <p style="color:blue;">Hello i am styled</p>


속성 값 확인 


속성 값을 확인하기 위해 = 기호를 사용합니다.


<html>
    <body>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>


document.querySelector('a[href="https://awesomeplace.com"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>


속성 값 추가 


속성이 다음으로 시작하는지 확인하십시오 ...


document.querySelector('a[href^="https://awesome"]') // => <a href="https://awesomeplace.com">Hey I am a link</a>


속성이 ...로 끝나는 지 확인


document.querySelectorAll('a[href$=".com"]') // => NodeList[a,a]


특성에 하위 문자열이 포함되어 있는지 확인하십시오.


document.querySelectorAll('a[href*="place"]') // => NodeList[a,a]


고급 선택자 


:focus

그러면 현재 포커스가 있는 요소가 선택됩니다.


:visited

태그와 함께 사용되며 방문한 링크를 선택합니다.


:link

이것은 태그와 함께 사용되기도 하지만 이 경우에는 방문하지 않은 링크를 선택합니다


:enabled

이렇게 하면 사용 가능 (사용 불가능하지 않음)


<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>


document.querySelectorAll(":enabled") // => NodeList[p,p,a,a]


:disabled

이렇게 하면 비활성화 된 요소가 선택됩니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
        <button disabled="true"> I have been disabled </button>
    </body>
</html>
document.querySelector(":disabled") // => <button disabled="true"> I have been disabled </button>


:first-child

부모 요소의 첫 번째 자식 요소를 선택합니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("p:first-child") // => <p>I am a paragraph</p>


:last-child

부모 요소의 마지막 자식 요소를 선택합니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <p>I am another paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector("p:last-child") // => <a href="anotherplace.com">I am another link</a>


el:first-of-type

이렇게 하면 부모의 첫 번째 하위 요소 인 el과 같은 유형의 요소가 선택됩니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>


document.querySelector("a:first-of-type") // => <a href="https://awesomeplace.com">Hey I am a link</a>


el:last-of-type

이렇게 하면 부모의 마지막 하위 요소이며 el과 동일한 유형의 요소가 선택됩니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <p>I am another paragraph</p>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>


document.querySelector("p:last-of-type") // => <p>I am another paragraph</p>


:not(selector)

선택기와 일치하지 않는 요소를 선택합니다.


<html>
    <body>
        <p>I am a paragraph</p>
        <a href="https://awesomeplace.com">Hey I am a link</a>
        <a href="https://anotherplace.com">I am another link</a>
    </body>
</html>
document.querySelector(":not(a)") // => <p>I am a paragraph</p>


:nth-child(n)

부모의 n 번째 자식 요소를 선택합니다.


<html>
    <body>
        <div>
            <p>I am a paragraph</p>
            <a href="https://awesomeplace.com">Hey I am a link</a>
            <a href="https://anotherplace.com">I am another link</a>
        </div>
    </body>
</html>
document.querySelector("div:nth-child(2)") // => <a href="https://awesomeplace.com">Hey I am a link</a>


:nth-last-child(n)

그러면 상위 요소의 n 번째 요소부터 마지막 ​​요소까지의 요소가 선택됩니다.


CSS 셀렉터