[자바스크립트] 선택자 별 DOM 요소 접근하기(Class, Id, Tag, QuerySelector)

merryna 2021. 5. 25. 11:05

2021. 5. 25. 11:05

1. id 선택자 : getElementById()

<body>
<div id="container">
	<h1 id="tittle>id로 선택하기</h1>    
</div>
    
 <script>
 // id로 받아서 클릭하면 폰트 사이즈 조절하는 함수
 document.getElementById("tittle").onclick = function () {
 	this.style.fontsize = "2em"
  }
 </script>
 </body>

2. Class 선택자 : getElementsByClassName()

*class는 id와 다르게 웹 문서 안에서 여러 번 사용 가능하기 때문에 Elements

<body>
  <div id="container">
      <span class="content">1</span>    
      <span class="content">2</span>  
  </div>
 </body>

HTMLCollection : 여러 개의 HTML 요소를 담고 있는 자료 형식으로 배열과 비슷함

document.getElementsByClassName("content")

▶ HTMLCollection(2) [span.content, span.content]

*클래스 요소 중 1개의 요소에만 접근하고 싶을 때

//클래스로 접근하여 첫번째 클래스의 스타일 변경 (밑줄)
document.getElementsByClassName("content")[0].style.textDecoration = "underline"

3. TAG : getElementsByTagName()

// h2 태그의 배경 색상을 #eee로 바꾸기
document.getElementsByTagName("h2").style.backgroundcolor = "#eee"

*class와 동일하게 특정 요소에만 접근할 수 있음

 document.getElementsByTagName("h2")[0].style.backgroundcolor = "#eee"

4. QuerySelector(), QuerySelectorAll()

: id, class, tag 모두 가능

// id
document.QuerySelector("#tittle")
// class (한 문서에 여러 번 사용 가능하여 QuerySelectorAll() 함수 사용
document.QuerySelectorAll(".content")

반환된 값은 NodeList로 표기 : 여러 개의 노드를 모아 놓은 것으로 배열과 비슷함

// NodeList의 인덱스 사용
document.QuerySelectorAll(".content")[1].style.backgroundColor = "yellow"

*getElementById() vs QuerySelector()****

Element : 요소 노드까지만 접근 (웹 요소만 변경할 시 사용)

QuerySelector(), QuerySelectorAll()

: 요소노드, 텍스트 노드, 속성노드까지 접근 (웹 요소뿐 아니라 요소의 텍스트나 속성 변경, 새로운 노드 추가할 시 사용)

'Front-End > JavaScript' 카테고리의 다른 글

[Javascript] 전역변수와 지역변수 (0)	2022.09.19
[JavaScript/jQuery] 상위 및 하위 요소 접근하기 closest/find() (0)	2022.08.25
[카카오 지도 API] 좌표 값 2차원 배열에 추가하는 법 (0)	2021.07.06
[자바스크립트] 이벤트 처리 onclick/addEventListener() (0)	2021.05.25

merry