JavaScript Document querySelector

querySelector를 사용하면 javascript의 document 객체를 활용하여 html의 요소를 선택할 수 있다.

 

querySelector(선택자)

해당 선택자로 요소를 선택함

HTML의 요소를 선택할 때 사용 Id, name, class, html 태그 등 다양한 요소를 선택 가능하다.
이름이 같으면 최상단 요소를 선택한다.
요소를 선택하여 value를 변경하거나 style을 변경하는 등 다양한 동작들을 수행할 때 사용한다.

 

1. h1요소의 innerText 를 특정 버튼을 눌렀을때 바꾸고 싶은 경우

    <h1>document object 사용해 보기</h1>

 

<script> 영역

    <script>

        let change = function(){

            document.querySelector("h1").innerText = "수정수정"

        };

    </script>

 

사용 예시)

기본 화면

바꾸기 버튼을 클릭한 경우

- h1의 텍스트가 수정수정으로 바뀌는 모습을 볼 수 있다.

 

2. p 요소의 innerText를 마우스가 텍스트에 도착했을 때 innerText를 변경하고 싶은 경우

    <p id="one" onmouseover="change1()">p1</p>

 

<script> 영역

        let change1 = function(){

            document.querySelector("p").innerText = "마우스가 올라왔습니다."

        };

 

사용 예시)

기본 화면

- 마우스 포인터가 p1에 도착하지 않았을 때는 변경하지 않다가

마우스가 p1에 도착 후

- 마우스가 도착 후 p1의 텍스트가 "마우스가 올라왔습니다."로 변경되는 모습.

 

3. 왼쪽 텍스트 입력창에 입력한 결과를 오른쪽에 있는 텍스트 박스로 이동시키는 경우

    <input type="text" id="two">

    <button onclick="send()">전송&rarr;</button>

    <input type="text" id="three">

 

<script> 영역

        let send = function() {

            let a1 = document.querySelector("#two").value

            document.querySelector("#three").value = a1

            document.querySelector("#two").value = null

        };

 

사용 예시)

text move 입력 한 기본 화면

전송 버튼을 누른 후

- 왼쪽에 있던 "text move" 텍스트가 오른쪽으로 이동하고 왼쪽의 텍스트 값이 사라진 모습

 

4. div를 누를때 오른쪽으로 100px 이동시키는 동작

    <div class="box" onclick="move()">눌러보세요</div>

 

<script> 영역

        let move = function() {

            document.querySelector("div").style.marginLeft = "100px";

        };

 

사용 예시)

기본 화면

눌러보세요를 클릭 한 상태

- 눌러보세요를 클릭 할 경우 위와 같이 왼쪽 공백이 100px이 생겨 이동하는 모습을 볼 수 있다.

하지만 한번 이동 후 다시 눌러도 위치는 변하지 않는다.

 

5. div를 누를 때마다 오른쪽으로 100px 이동시키고 이동한 거리에 맞춰 텍스트를 변경시키는 동작

    <div class="box" onclick="move()">0px</div>

    <button onclick="reset()">초기화</button>

 

<script> 영역

 

    <script>

        // 함수 안에서 사용할 변수를 페이지 로딩 시점에 미리 초기값을 대입해서 만들어 둔다.

        let mLeft =0;

        // 위의 box div 를 클릭할때마다 우측으로 100px 이동하도록 프로그래밍 해보세요.

        let move = function() {

            // global 영역에 선언된 변수 사용 가능

            mLeft = mLeft+100;

            console.log(mLeft)

            document.querySelector("div").style.marginLeft = mLeft+"px";

            document.querySelector("div").innerText = mLeft+"px";

        };

        let reset = function() {

            mLeft=0;

            document.querySelector("div").style.marginLeft = mLeft+"px";

        }

    </script>  

- mLeft라는 변수를 global 영역에 선언한 뒤 move 함수 값 안에서 사용한다.

- move 함수 안에서 mLeft의 값을 move 함수가 호출될 때마다 100씩 증가시킨다.

 

사용 예시)

기본 화면

- 해당 화면에서 노란색 영역을 클릭하면 

한 번 눌렀을 경우

두 번 눌렀을 경우

- 누르는 횟수에 맞춰 100px씩 증가하며 안에 텍스트도 같이 변경된다.