콘솔
> document.querySelector("#songwriter"); // ➊ < <p id = "songwriter">작곡: 안익태</p> > document.querySelectorAll("#songwriter"); // ➋ < ▶NodeList [p#songwriter] > document.querySelectorAll("p"); // ➌ < ▶NodeList(4) [p#songwriter, p#lyricist, p.lyric, p.lyric] > document.querySelector("p"); // ➍ < <p id= "songwriter">작곡: 안익태</p> > document.querySelector(".lyric"); // ➎ < ▶<p class = "lyric">…</p>
1 querySelector() 메서드를 활용해서 id가 songwriter인 엘리먼트를 검사하면 p 태그가 한 개 반환됩니다.
2 querySelectorAll() 메서드를 활용해서 id가 songwriter인 엘리먼트를 검사하면 조건에 만족되는 태그들이 배열로 반환됩니다. 여기서는 조건을 만족하는 엘리먼트가 한 개뿐이므로 배열로 반환되는 엘리먼트도 한 개뿐입니다.
3 querySelectorAll() 메서드를 이용해서 p 태그를 모두 얻어 올 수도 있습니다.
4 querySelector() 메서드를 이용해서 p 태그를 검사하면 맨 앞에 있는 p 태그만 반환됩니다.
5 .lyric이라고 쓰면 클래스 이름이 lyric인 p 태그가 반환됩니다.