[JAVASCRIPT] DOM Element(요소)

자바스크립트에서 HTML 요소에 대한 다양한 제어를 위해 가장 먼저 해야 할 것은 HTML 요소에 대한 접근이다.

HTML요소의 id로 HTML 요소 찾기

document 객체의 내장 함수인 getElementById를 사용하여 HTML 요소에 대한 접근이 가능하다. 만약 getElementById 함수를 통해서 HTML 요소를 발견하면 HTML 요소를 자바스크립트 객체로 반환한다. 반대로 HTML 요소를 발견하지 못하면 null을 반환하게 된다.

<input type="text" id="userid" />
<p>id로 HTML 요소 찾기 </p>
<script>
  let element=document.getElementById("userid");
</script>

HTML요소의 태그명을 이용해서 HTML 요소 찾기

document 객체의 내장 함수인 getElementsByTagName을 사용해서 HTML 요소에 대한 접근이 가능하다. 파라미터로 전달한 태그명에 해당하는 모든 HTML 요소를 반환하게 된다.

<p>HTML 요소에 대한 접근</p>
<p>태그명으로 HTML 요소 찾기</p>
<script>
  let elements=document.getElementsByTagName("p");
</script>

클래스명을 이용해서 HTML 요소 찾기

document 객체의 내장 함수인 getElementsByClassName을 사용하여 HTML 요소에 대한 접근이 가능하다. 파라미터로 전달한 클래스명과 동일한 class 속성값을 포함하고 있는 모든 HTML 요소를 반환한다.

<p class="para">HTML 요소에 대한 접근</p>
<p class="para">
  클래스명으로 HTML 요소 찾기
</p>
<script>
  let elements=document.getElementsByClassName("para");
</script>

CSS 선택자를 이용해서 HTML 요소 찾기

document 객체의 내장 함수인 querySelectorAll을 사용하여 HTML 요소에 대한 접근이 가능하다. 파라미터로 CSS의 선택자를 사용할 수 있다.

<p class="para">
  css 선택자로 HTML 요소 찾기
</p>
<script>
  const elements=document.querySelectorAll("p.para");
</script>