Javascript (자바스크립트) - 요소(Element) 찾기

자바스크립트에서 특정 아이디(id), 클래스(class), 태그(tag)의 dom 요소를 찾기 위해서

사용되는 메소드가 있다.

 

1. 아이디(Id)값 찾기

- getElementById()

<div id="content">
   <p class="txt_red">안녕하세요</p>
   <p>반갑습니다.</p>
   <span class="txt_red">Hello world</span>
</div>

<script>
   var Content = document.getElementById('content');
   // id가 content인 요소를 가져온다.
</script>

 

2. 클래스(Class)값 찾기

- getElementsByClassName()

 : 가져온 값은 HTML Collection 객체(유사배열) 로 가져온다.

<div id="content">
   <p class="txt_red">안녕하세요</p>
   <p>반갑습니다.</p>
   <span class="txt_red">Hello world</span>
</div>

<script>
   var textRed = document.getElementsByClassName('txt_red');
   // class가 txt_red인 요소를 HTMLCollection 배열로 가져온다.
   
   console.log(textRed[0]);
   // <p class="txt_red">안녕하세요</p>
</script>

 

3. 태그(Tag) 값 찾기

- getElementsByTagName()

 : 가져온 값은 HTML Collection 객체(유사배열) 로 가져온다.

<div id="content">
   <p class="txt_red">안녕하세요</p>
   <p>반갑습니다.</p>
   <span class="txt_red">Hello world</span>
</div>

<script>
   var tag_P = document.getElementsByTagName('p');
   // document에서 p태그 요소를 HTMLCollection 배열로 가져온다.
   
   console.log(tag_P[1]);
   // <p>반갑습니다.</p>
</script>

 

 

위의 3가지 방법 외에도

querySelector, querySelectorAll과 같은 방법이 있다.

 

2020.10.12 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소 찾기 (querySelector, querySelectorAll)