JS로 요소를 선택하는 방법

참고 문서

https://nowonbun.tistory.com/346
→ 요소를 가져오는 메소드의 종류

https://velog.io/@chloeee/getElementById-그리고-querySelector-차이점
→ querySelector 와 getElementBy... 의 차이점

두 블로그 정말 정리가 머리에 쏙쏙 들어오게 잘 되어있다.
한 번쯤 보시는 것을 추천!

• 둘의 차이점은 요소를 가져오는 방식의 차이이다
• querySelector → NodeList
  getElementBy... → HTMLCollection
• 둘다 배열과 유사한 데이터이지만, NodeList의 경우 for문을 사용할 수 있지만, HTMLCollection 에서는 사용하지 못한다는 차이점이 있다고한다.

.getElementById()

• getElementById('id') 로 사용한다.
• Id 이외에도 ClassName, TagName, Name 으로 사용 할 수 있으며, 각각 id 선택자, class 선택자, tag 선택자, name 속성 값(input 태그의 name 등)을 찾아 가져온다.
• Id 는 하나의 요소만을 가져오고, 이외의 것들은 복수의 요소를 가져온다.

document.getElementById('id_name')
// 단수의 요소

document.getElementByClassName('class_name')
document.getElementByTagName('tag_name')
document.getElementByName('name_value')
// 복수의 요소

.querySelector()

• querySelector('선택자') 로 사용하며, 가장 처음 발견되는 하나의 요소만 가져온다.
• querySelectorAll('선택자') 로 일치하는 다수의 요소를 불러 올 수 있다.
• getElementBy... 와는 다르게 이름만 작성하는 것이 아니라 CSS에서 사용하는 선택자처럼 작성한다.

document.querySelector('.class #id') // 단수
document.querySelectorAll('.class') // 복수

.textContent

• 요소.textContent = "변경하고자 하는 내용" 으로 내부의 내용을 변경 할 수 있다.
• 선택한 요소 내부의 텍스트 컨텐츠를 변경 할 수 있는 프로퍼티.
  -> 만약 .textContent 만 사용하는 경우 내부의 텍스트를 읽어 올 수 있다.
• 요소 내부의 컨텐츠를 바꿀 수 있는 방법으로는 innerText, innerHTML 도 있다.
• 차이점
  innerText → 내부의 텍스트를 가져오되, HTML의 영향을 받은 텍스트를 가져온다.
  display : none 으로 지정된 텍스트가 숨겨진다는 등.
  InnerHTML → 해당 요소가 가진 내부의 html 을 전부 가져온다.
  display : none 으로 지정된 텍스트를 html을 포함해서 전부 가져오게 된다.
  textContent → 요소에 속한 텍스트를 전부 가져온다.
  그게 none 으로 설정되건 말건, text 라면 모두 가져온다!

  참고 블로그 : https://hianna.tistory.com/483