[자바스크립트] document의 메소드로 DOM 요소에 접근하기

DOM 요소에 접근하는 5가지 document의 메소드

1. document.getElementsByTagName(태그이름)

• DOM 요소를 태그 이름으로 접근하는 함수
• id나 class 선택자가 없는 DOM 요소에 접근하는 함수
• getElementsByTagName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다

<p>this is paragaph</p>
<p>this is paragaph</p>
<p>this is paragaph</p>

<script>
  var elem = document.getElementsByTagName('p');
  console.log(elem);
  // HTMLCollection(3) [p, p, p]
  // 0: p
  // 1: p
  // 2: p
</script>

2. document.getElementsByName(name속성값)

• DOM 요소를 요소의 name 속성값으로 접근하는 함수
• getElementsByName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다

<input name="name" />
<input name="name" />
<input name="name" />
<script>
  var elem = document.getElementsByName('name');
  console.log(elem);
  // NodeList(3)
  // 0: input
  // 1: input
  // 2: input
</script>

3. document.getElementById(아이디)

• DOM 요소를 id 선택자로 접근하는 함수

<p id="para">Some text here</p>

<script>
  var elem = document.getElementById('para');
  console.log(elem);
  // <p id="para">Some text here</p>
</script>

4. document.getElementsByClassName(클래스)

• DOM 요소를 class 선택자로 접근하는 함수
• getElementsByClassName() 함수는 2개 이상의 웹 요소에 접근하기 때문에 s가 붙는다

<ul>
  <li class="list">this is list</li>
  <li class="list">this is list</li>
  <li class="list">this is list</li>
</ul>

<script>
  var elem = document.getElementsByClassName('list');
  console.log(elem);
  // HTMLCollection(3)
  // 0: li.list
  // 1: li.list
  // 2: li.list
</script>

5. document.querySelector(선택자)

• DOM 요소를 다양한 방법으로 찾아주는 함수
• id, class, 태그이름을 모두 사용가능
• 단 id로 접근할 경우에는 #을 class로 접근할 경우에는 .을 붙여서 사용해준다
• querySelector() 함수는 가장 먼저 위치한 1개의 웹 요소에만 접근한다

<div class="container"></div>
<div id="box"></div>
<script>
  var container = document.querySelector('.container');
  console.log(container);
  // <div class="container"></div>
  var box = document.querySelector('#box');
  console.log(box);
  // <div id="box"></div>
</script>

6. document.querySelectorAll(선택자)

• DOM 요소를 다양한 방법으로 찾아주는 함수
• id, class, 태그이름을 모두 사용가능
• querySelectorAll() 함수는 2개 이상의 웹 요소에 접근한다
• 단 id로 접근할 경우에는 #을 class로 접근할 경우에는 .을 붙여서 사용해준다

<ul>
  <li class="list"></li>
  <li class="list"></li>
  <li class="list"></li>
</ul>
<script>
  var list = document.querySelectorAll('.list');
  console.log(list);
  // NodeList(3) [li.list, li.list, li.list]
</script>

 

document 객체의 메서드 반환값 타입 정리

위에서 알아본 DOM 요소에 접근하는 5가지 document의 메소드는 각각 반환값 타입이 모두 다르다

메서드	반환값
document.getElementsByTagName(태그이름)	HTMLCollection
document.getElementsByName(name속성값)	Node list
document.getElementById(아이디)	Element
document.getElementsByClassName(클래스)	HTMLCollection
document.querySelector(선택자)	First Element
document.querySelectorAll(선택자)	Node list