[JavaScript] window.document.getElement~, querySelector

window.document.getElementById
window.document.getElementClassName

 - window는 화면에 필요한 객체나 메소드들을 가지고 있는 최상위 객체
 - window라는 객체는 보통 생략이 가능하다
 - document는 화면의 html 전체문서를 뜻한다

 - 태그들도 모두 객체이다

 - getElementById는 id 속성값을 기준으로 단일 태그를 가져온다

    <ul>
        <!-- class 속성값은 페이지에서 여러번 사용해도 된다 -->
        <li class="my-li"></li>
        <li class="my-li"></li>
        <li class="my-li"></li>
    </ul>

    <script>
        // window는 화면에 필요한 객체나 메소드들을 가지고 있는 최상위 객체
        // window라는 객체는 보통 생략이 가능하다
        // document는 화면의 html 전체문서를 뜻한다
        // 태그들도 모두 객체이다
        // getElementById는 id 속성값을 기준으로 단일 태그를 가져온다
        const firstTag = window.document.getElementById("first")
        firstTag.innerText = '첫번째입니다';

        const myLiTagList = window.document.getElementsByClassName("my-li");

        for (let i = 0; i < myLiTagList.length; i++) {
            myLiTagList[i].innerText = `${1}. 상품${i}`;
        }

    </script>

 

 

 

        // getElementsByClassName은 class 속성값을 기준으로 태그 리스트를 가져온다
        const myLiTagList = window.document.getElementsByClassName("my-li");

        for (let i = 0; i < myLiTagList.length; i++) {
            myLiTagList[i].innerText = `${1}. 상품${i}`;
        }

 

 

second태그 가져와서값 넣기

    	<h1 class="second"></h1>

    <script>
    	// second태그 가져와서 값 넣기
        // 두번째입니다
        const secondTagList = document.getElementsByClassName("second"); 
        // 값 넣을 때 둘중 하나
        // 1. 반복문 이용해서 넣기
        for (let i = 0; i < secondTagList.length; i++) {
        secondTagList[i].innerText = '두번째입니다';
        }
        // 2. if문으로 요소가 있는지 확인하고 넣기 
        if (secondTagList.length > 0) {
            secondTagList[0].innerText = '두번째입니다';
        }
    </script>

 

---

querySelector

- querySelector는 css 선택자를 이용해서 단일 태그를 가져온다

    <h1 id="first"></h1>

    <ul>
        <li class="my-li"></li>
        <li class="my-li"></li>
        <li class="my-li"></li>
    </ul>

    <h1 class="second"></h1>

    <script>
        // querySelector는 css 선택자를 이용해서 단일 태그를 가져온다
        const firstTag = document.querySelector("#first");
        firstTag.innerHTML = "첫번째입니다";

    </script>

 - querySelector가 단일 태그를 가져오는 점을 이용해서

 - 클래스 선택자로도 태그 하나만을 가져와서 사용할 수 있다

    <script> 
        // querySelector가 단일 태그를 가져오는 점을 이용해서
        // 클래스 선택자로도 태그 하나만을 가져와서 사용할 수 있다
        const secondTag = document.querySelector(".second");
        secondTag.innerText = '두번째입니다'
    </script>

 

 

querySelectorAll

 - querySelectorAll는 css 선택자를 이용해서 태그 리스트를 가져온다

    <script>
        // querySelectorAll는 css 선택자를 이용해서 태그 리스트를 가져온다
        const myLiTagList = document.querySelectorAll(".my-li");

        for (let i = 0; i < myLiTagList.length; i++) {
            myLiTagList[i].innerText = `${1}. 상품${i}`;
        }
    </script>