33_[jquery]문서 객체(dom) 선택자

7 minute read

문서 객체(DOM) 선택자

⭐ 선택자 사용하기

방법 1- 잘못된 사례

<head>
...
<script src="js/jquery.js"></script>
<script>
	$("#txt").css("color","red");
</script>
</head>
<body>
 <p id="txt">내용</p>
</body>

위와 같이 html 요소가 아래 body에 있는데 선택자를 먼저 아무런 둘러싸는 윤곽이 없이는 사용할 수 없다!

방법 2, 3 - 정상 적용

<head>
...
<script src="js/jquery.js"></script>
<script>
	$(document).ready(function(){
		$("#txt").css("color","red");
  });
</script>
</head>
<body>
 <p id="txt">내용</p>
</body>

<head>
...
<script src="js/jquery.js"></script>
<script>
	$(function(){
		$("#txt").css("color","red");
   });
</script>
</head>
<body>
 <p id="txt">내용</p>
</body>

🌺 CSS 선택자 기본형

$(“CSS선택자”).css(“스타일 속성명”, “값”);
$(“CSS선택자”).attr(“속성명”, “값”);

⭐ 여러 스타일링을 적용하려 할 경우

<!--객체를 사용하여 CSS 속성과 값을 전달-->
$("CSS 선택자").css({
	스타일_속성명1 : 값,
  ...
  스타일_속성명n : 값
});

<!--인자값을 사용하여 CSS 속성과 값을 전달-->
$("CSS 선택자").css("속성명1","값1").css("속성명2","값2");

기본 선택자

직접 선택자

직접 선택자의 종류

a. 전체 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //전체 선택자
            $("*").css("border","1px solid blue");
        })
    </script>
</head>
<body>
    <body>
        <h1>제이쿼리</h1>
        <h2>선택자</h2>
        <h3>직접 선택자</h3>
    </body>
</body>
</html>

위와 같이 제이쿼리를 이용하게 되면, 특히 전체 선택자를 이용하면, h1 태그 뿐 아니라 h2, h3, body , head 태그에 대해서도 테두리가 적용되어 나타난다!

전체 선택자

head 부분은 F12를 누르면 적용된 사항을 확인해볼 수 있는데, 눈여겨볼 점은 h1/h2/h3 태그의 텍스트 뿐 아니라 여백 부분에 대해서 각 태그가 모두 블록요소이기 때문에 스타일이 적용되었음을 확인해볼 수 있다(F12 개발자 도구 이용)

b. 아이디 선택자, 클래스 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //아이디 선택자
            $("#tit").css("color","violet");
            //클래스 선택자
            $(".dir").css("color","indigo");
        })
    </script>
</head>
<body>
    <body>
        <h1>제이쿼리</h1>
        <h2 id="tit">선택자</h2>
        <h3 class="dir">직접 선택자</h3>
    </body>
</body>
</html>

제이쿼리-아이디 선택자와 클래스 선택자

위와 같이, CSS에서 사용했던 id 및 class 선택자를 그대로 이용하면, 각각에 대한 스타일링을 적용할 수 있다!

c. 요소명 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //요소명 선택자
            $("h1").css("text-align","center");
        })
    </script>
</head>
<body>
    <body>
        <h1>제이쿼리</h1>
        <h2 id="tit">선택자</h2>
        <h3 class="dir">직접 선택자</h3>
    </body>
</body>
</html>

요소명 선택자

CSS에서 사용했던 요소명 선택자를 그대로 이용한 경우라고 생각하면 된다! 즉, h1 요소에 대해서 텍스트가 가운데 정렬이 되게 된다!

d. 그룹 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //그룹 선택자
            $("h1, #tit, .dir").css("background-color","yellow");
        })
    </script>
</head>
<body>
    <body>
        <h1>제이쿼리</h1>
        <h2 id="tit">선택자</h2>
        <h3 class="dir">직접 선택자</h3>
    </body>
</body>
</html>

그룹 선택자

위와 같이, 사용하면, h1 태그 뿐 아니라, id가 tit인 요소, 클래스가 dir인 요소에 대해서 스타일링을 적용해볼 수 있음을 확인해볼 수 있다!

e. 종속 선택자

종속 선택자는 대표적인 예시로 아래처럼 같은 요소 여러개 중에서 아이디가 a 라던지, 클래스가 b인 경우에 사용할 수 있는 케이스이다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //종속 선택자
            $("h2#tit").css("border","3px dashed purple");
        })
    </script>
</head>
<body>
    <body>
        <h1>제이쿼리</h1>
        <h2 id="tit">선택자</h2>
        <h2>선택자2</h2>
        <h3 class="dir">직접 선택자</h3>
    </body>
</body>
</html>

종속 선택자

위에서

$(“h2#tit”)

로 인해서 h2 요소 중에서도 아이디가 tit인 경우에 대해서 테두리 스타일링이 적용되었음을 확인해볼 수 있다!

인접 관계 선택자

인접 관계 선택자의 종류

a. 부모 요소 선택자

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function () {
            //부모 요소 선택자
            $("#list_1").parent().css("background-color", "orange");
        })
    </script>
</head>

<body>
    <h1>인접 관계 선택자</h1>
    <ul id="wrap">
        <li>
            리스트1
            <ul>
                <li id="list_1">리스트1-1</li>
                <li>리스트1-2</li>
            </ul>
        </li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
</body>

</html>

부모 요소 선택자

위의 경우에서

$(“#list_1”).parent()

를 보고, html 구조 골격을 살펴보자

지금 html 문서에서 아이디 list_1의 부모요소는 ul 태그이다!

즉, 리스트1-1과 리스트1-2를 둘러싸는 하나의 상자가 오렌지 색으로 물들여질 수 있다!

b. 하위 요소 선택자

후손 선택자로도 불릴 수 있다(CSS)!! 즉, 자식 요소 뿐 아니라, 자식의 자식 요소도 포함된다!

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
        integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function () {
          //하위 요소 선택자
          $("#wrap ul").css({
              "border" : "3px dashed blue",
              "background-color":"yellow"
          });
        })
    </script>
</head>

<body>
    <h1>인접 관계 선택자</h1>
    <ul id="wrap">
        <li>
            리스트1
            <ul>
                <li id="list_1">리스트1-1</li>
                <li>리스트1-2</li>
            </ul>
        </li>
        <li>리스트2</li>
        <li>리스트3</li>
    </ul>
</body>

</html>

하위 요소 선택자

지금 아이디 이름이 wrap인 요소를 기준으로 하위 요소 중 ul 요소인 경우는 리스트1-1과 리스트1-2를 감싸는 ul 태그이므로 해당 부분이 스타일링 된다!!

c. 자식 요소 선택자

자식 요소 선택자는 크게

(1) 선택한 요소를 기준으로 지정한 자식 요소만 선택하는 경우

$(“요소선택> 자식요소 선택”)

$(“요소선택”).children(“자식요소선택”)

(2) 선택한 요소를 기준으로 모든 자식 요소를 선택하는 경우

$(“요소선택”).children()

의 경우로 나눌 수 있다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        
        $(function(){
            //자식요소 선택자
            $("#wrap > h1").css("background-color","violet");
            $("#wrap").children().css("border","1px solid black");
            $("#wrap").children("p").css({
                "background-color":"yellowgreen"
            });
        })
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접관계선택자</h1>
        <p>내용1</p>
        <section>
            <h1>자식요소선택자</h1>
            <p>내용2</p>
        </section>
    </div>
</body>
</html>

자식 요소 선택자

위의 두 가지 케이스를 기반으로 생각했을 때,

wrap이라는 아이디 이름을 가진 요소를 기준으로, p 자식 요소인 경우는 “내용1”이라는 텍스트를 갖는 요소이므로, 해당 요소의 배경이 yellowgreen으로 스타일링된다

그리고! wrap 이라는 아이디 이름을 가진 요소의 모든 자식은 검은색 테두리로 스타일링된다

또한, wrap 의 자식 요소 중 h1 요소는 바이올렛 배경색을 갖게 되도록 스타일링된다!

d. 형/동생 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //형 동생 요소 선택자
            const style1 = {
                "background-color":"orange",
                "border":"2px dashed red"
            };
            const style2 = {
                "background-color":"yellowgreen",
                "border":"2px dashed violet"
            };

            //형 요소 선택자
            $(".txt").prev().css(style1);
             //인접 동생 요소 선택자
             $(".txt+p").css(style2);
            //동생 요소 선택자
            $(".txt").next().next().css(style1);
           
        })
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>

천천히 하나씩 접근해보자

$(“.txt”).prev()

는 txt 클래스명을 가진 요소인 “내용2”를 기준으로 바로 한 단계 형 요소인 “내용1”부분에 대해서는 style1이 적용될 것이다

$(“.txt+p”)

는 CSS의 인접형제요소 선택자를 의미하는데, 그렇기 때문에 “내용3” 요소 부분에 대해서 style2가 적용될 것이다

$(“.txt”).next().next()

는 txt 클래스인 요소의 동생요소의 동생요소를 선택하여 style1을 적용된다!

그러면 아래와 같이 스타일링되는 것을 확인해볼 수 있다!

형, 동생요소 선택자

e. 전체 형(이전)/동생(다음) 요소 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //형 동생 요소 선택자
            const style1 = {
                "background-color":"orange",
                "border":"2px dashed red"
            };
            const style2 = {
                "background-color":"yellowgreen",
                "border":"2px dashed violet"
            };
            //전체 형 요소 선택자
            $(".txt").prevAll().css(style1);
            //전체 동생 요소 선택자
            $(".txt").nextAll().css(style2);
           
        })
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>

전체 형 혹은 전체 동생 요소 선택자라는 것은, 특정 선택된 요소를 기준으로 형 요소 전부에 대해서 혹은 동생 요소 전부에 대해서 선택하는 것을 의미한다! 그리고 그 각각은 prevAll , nextAll로 선택할 수 있다!

그렇게 된다면, txt 클래스 요소의 형요소는 모두 style1으로, 동생요소는 모두 style2로 스타일링될 것이다!

전체 형/동생 요소 선택자

f. 전체 형제 요소 선택자

전체 형제 요소 선택자는 특정 요소를 기준으로 그 요소의 형, 동생 요소를 모두 선택하게 된다.

그렇기 때문에 아래의 예시를 실행해보면, 클래스명이 txt인 요소의 형제 요소 모두가 선택되고 style2로 스타일링되게 된다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //형 동생 요소 선택자
            const style1 = {
                "background-color":"orange",
                "border":"2px dashed red"
            };
            const style2 = {
                "background-color":"yellowgreen",
                "border":"2px dashed violet"
            };
            //전체 형제 요소 선택자
            $(".txt").siblings().css(style2);
           
        })
    </script>
</head>
<body>
    <div id="wrap">
        <h1>인접 관계 선택자</h1>
        <p>내용1</p>
        <p class="txt">내용2</p>
        <p>내용3</p>
        <p>내용4</p>
    </div>
</body>
</html>

전체 형제 요소 선택자

g. 범위 제한 전체 형/동생 요소 선택자

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //범위 제한 전체 형 요소 선택자
            $(".txt3").prevUntil(".title").css({
                "color":"red",
                "font-weight":"bold"
            });
            //범위 제한 전체 동생 요소 선택자
            $(".txt3").nextUntil(".txt6").css({
                "text-align":"center",
                "color":"indigo",
                "font-weight":"bold"
            });
        })
    </script>
</head>
<body>
    <div id="wrap">
        <h2 class="title">선택자</h2>
        <p>내용1</p>
        <p>내용2</p>
        <p class="txt3">내용3</p>
        <p>내용4</p>
        <p>내용5</p>
        <p class="txt6">내용6</p>
    </div>
</body>
</html>

범위 제한 전체 형동생 요소 선택자는 $기호로 선택한 요소를 기준 이후부터 필터링되는 prevUntil 혹은 nextUntil의 매개변수 요소 이전까지를 선택한다!

따라서 아래처럼 내용1과 내용2가 prevUntil로 선택되어 스타일링될 것이고,

내용4와 내용5가 nextUntil로 선택되어 스타일링될 것이다!

범위 제한 전체 형 동생 요소 선택자

h. 상위 요소 선택자

상위 요소 선택자는 크게 두 가지 형태로 분류된다

$(“요소선택”).parents() 와 같이 , 특정 요소의 부모요소 전체를 선택하는 경우
$(“요소선택”).parents(“요소선택”) 과 같이 특정 요소의 부모 요소들 중 특정 요소만을 선택하는 경우

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //상위 요소 전체 선택
            $(".txt1").parents().css("background-color","red");
            //상위 요소 중 parents로 지정한 요소만 선택
            $(".txt2").parents("section").css("background-color","orange");
        })
    </script>
</head>
<body>
    <h1 class="title">선택자</h1>
    <section>
        <div>
            <p class="txt1">내용1</p>
        </div>
    </section>
    <section>
        <div>
            <p class="txt2">내용2</p>
        </div>
    </section>
</body>
</html>

상위 요소 선택자

위의 경우, 클래스명이 txt1인 요소의 부모 요소 전체에 대해서 배경색을 빨간색으로 지정하여

body, section, div 요소에 대해서 배경색이 모두 빨갛게 되었다

그리고 클래스명이 txt2인 요소의 부모 중 section인 부분에 대해서 선택하였기 때문에, 해당 부모요소에 대해서만 주황색 배경으로 스타일링되었다

i. 가장 가까운 상위 요소 선택자

가장 가까운 상위 요소 선택자는 어떤 특정 요소에서 가장 인접한 부모요소를 선택한다!

어떻게 보면 위에서 다루어진

$(“~”).parents(“~”)

와 비슷해보이지만, 상황적으로 부모 요소가 여럿일 때에는, 다른 필터링할 next() 혹은 prev() 등을 붙여야할 필요가 있을 것으로 생각되는데, 이를 closest()로 한 번에 해결할 수 있다는 효율적인 장점이 있는 것 같다!

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"
    integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script>
        $(function(){
            //상위 요소 전체 선택
            $(".txt1").parents().css("background-color","red");
            //상위 요소 중 parents로 지정한 요소만 선택
            $(".txt2").parents("section").css("background-color","orange");
            //가장 가까운 상위 요소 선택자
            $(".txt2").closest("div").css({
                "background-color":"yellow",
                "width":"300px"
            });
        })
    </script>
</head>
<body>
    <h1 class="title">선택자</h1>
    <section>
        <div>
            <p class="txt1">내용1</p>
        </div>
    </section>
    <section>
        <div>
            <p class="txt2">내용2</p>
        </div>
    </section>
</body>
</html>

가장 가까운 상위 요소 선택자

위에서 사용했던 html 문서를 그대로 활용했다!

이때, closest의 매개변수로 div 를 지정해줌으로써, txt2 클래스인 요소의 부모 요소 중 가장 인접한 div 요소를 선택하고, 이에 대해서 스타일링됨을 확인해볼 수 있다!

$(“요소선택”).closest(“요소선택”)

Twitter Facebook LinkedIn

J. S. Jeong

33_[jquery]문서 객체(dom) 선택자

문서 객체(DOM) 선택자

기본 선택자

You May Also Enjoy

1_[spring]rest api 구축에 힘을 실어주는 hateoas

2_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하는 경우

1_[spring jpa]m to n 연관관계 중간 테이블을 엔티티로 관리하지 않는 경우

2_[spring]websockethandler를 이용한 웹소켓 서버 구현