객체야 어디 있니~ 객체 검색 방법

우선 JavaScript 에서는 <div> </div> → 객체(node , element)로 본다

 

⭐객체의 하위를 검색하는 selector 문법

<div class = "target">
            <h2 class = "java">Java</h2>
            <h2 class = "javascript ">JavaScript</h2>
        </div>

        <script>
            console.log(document.querySelector(".target . java"))
        </script>

⭐⭐하위에서 상위를 찾고자 하는 경우 < closest() >

실제로 코딩을 할때 정말 많이 사용된다고 한다

<ul>
    <li>1st</li>
    <li class = "two">2nd</li>
    <li>3rd</li>
</ul>

<script>
    
const target = document.querySelector(".two")
    
console.log(target.closest("ul"))       
    
</script>

querySelector 가 밖에서 안으로 찾아서 들어가는 문법이라면

closest는 안에서 밖으로 찾아가는 문법

 

⭐자신과 동일한 위치의 이전&다음을 찾는 문법 < siblings >

<ul>
    <li>1st</li>
    <li class = "two">2nd</li>
    <li>3rd</li>
</ul>

<script>
    
    const target = document.querySelector(".two")
    
    console.log(target.previousElementSibling) //이전을 찾는다
   
    console.log(target.nextElementSibling)    // 다음을 찾는다
    </script>