JS - DOM 요소를 선택 (또는 변경)하기

DOM API를 이용하면 HTML 문서의 특정 엘리먼트를 찾아 반환받을 수 있습니다. getElement... 로 시작하는 메서드는 단일 엘리먼트를 찾고, getElements... 로 시작하는 메서드는 여러 개를 찾을 수 있습니다. 찾는 요소가 없다면 null 을 반환합니다.

이러한 메서드는 전역 document 객체의 메서드로만 사용할 수 있습니다.

메서드	설 명
getElementById()	id 속성을 가진 단일 요소를 찾아 반환 대소문자를 구분
getElementsByClassName()	class 속성을 가진 모든 요소를 찾아 배열로 반환
getElementsByName()	name 속성을 가진 모든 요소를 찾아 배열로 반환 이름 속성은 주로 <input>태그에 사용됩니다.
getElementsByTagName()	해당 HTML 태그를 가진 모든 요소를 찾아 배열로 반환 태그 이름 대신 특수 문자 "*" 을 지정하면 모든 태그를 배열에 담습니다.
getAttribute()	요소의 지정된 속성의 값을 반환
getAttributeNode()	Attr 객체를 반환한다는 점을 제외하면 getAttribute() 와 동일합니다.

메서드	설 명
querySelector()	CSS 선택자로 단일 요소를 찾아 반환 CSS 문법과 동일하며 요소 한 개만 찾아 반환합니다. 만일 조건에 맞는 요소가 여러 개이면 첫 번째 요소를 반환.
querySelectorAll()	CSS 선택자로 조건에 맞는 모든 요소를 찾아 배열로 반환 CSS 문법과 동일하며 조건에 만족하는 모든 요소를 찾음 여러 개의 요소를 찾으려면 쉼표로 구분해서 지정 가능

메서드를 이용하면 다음의 형식으로 사용될 수 있습니다.

// 문서에 새로운 HTML을 삽입할 수 있습니다.
document.getElementById(id).innerHTML = "<div>새로운 HTML 추가</div>";

// 문서에 새로운 Text 을 삽입할 수 있습니다.
document.getElementById(id).innerText = "새로운 TEXT 추가";

// 이미지나 링크의 src를 수정할 때는 이렇게 하세요.
document.getElementById(id).src = "경로";

// 스타일을 변경하려면 이와 같은 형식으로 지정합니다.
document.getElementById(id).style.속성 = "속성 값";

// 이벤트 처리는 이렇게 접근합니다.
document.getElementById(id).이벤트 = function() { }

getElementById()

이 예제는 id 속성이 "inner"인 요소의 배경색을 변경합니다.

<script>
function setColor1() {
  document.getElementById("inner").style.background = "yellow";
}
function setColor2() {
  document.getElementById("inner").style.background = "blue";
}
</script>

<div id="inner">배경색</div>

<button onclick="setColor1()">노랑으로 바꾸기</button>
<button onclick="setColor2()">파랑으로 바꾸기</button>

getElementsByClassName()

메서드는 하위 엘리먼트에도 접근할 수 있습니다.

예를 들어 id 속성이 'user'인 엘리먼트 안의 'test'라는 모든 클래스 엘리먼트를 다른 HTML로 바꾸는 예제입니다.

<div id="user">
  <div class="test">하보니 php</div>
</div>

<!-- 이 요소는 일치하지 않으므로 바뀌지 않습니다. -->
<div class="test">하보니 php</div>

<script>
  var user = document.getElementById("user")
                  .getElementsByClassName("test");
  
  for(var i = 0; i < user.length; i++) {
    user[i].innerHTML = "<h4>제목입니다.</h4>";
  }
</script>

getElementsByName()

폼 요소에서 아이디와 비밀번호의 값을 변경하는 예제입니다.

<input type="text" name="id" value="하보니">
<input type="text" name="pw" value="12345">

<script>
// "하보니"를 "habony" 로 변경합니다.
document.getElementsByName("id")[0].value = "habony";

// "12345"를 "hello word" 로 변경합니다.
document.getElementsByName("pw")[0].value = "hello word";
</script>

getElementsByTagName()

모든 <p>태그를 빨간색으로 변경합니다.

<div class="user">하보니 php</div>
<p>본문1</p>
<p>본문2</p>

<script>
  var tag = document.getElementsByTagName("p");
  
  for(var i = 0; tag.length; i++){
    tag[i].style.color = "red";
  }
</script>

querySelector(), querySelectorAll()

CSS 선택자를 이용해서 엘리먼트를 선택할 수 있습니다. 예를 들어 id 속성의 엘리먼트를 찾으려면 getElementById() 를 이용하지만 CSS 선택자인 #id로 엘리먼트를 찾을 수 있습니다.

document.querySelector(#selectors);

class 속성의  엘리먼트를 찾으려면 .class로 찾을 수 있습니다.

document.querySelector(.selectors);

찾으려는 태그는 콤마를 이용해 여러 개 지정할 수 있습니다.

document.querySelectorAll("h1, h4");

input 의 type 이 text 인 요소의 값을 "habony"로 변경합니다.

<input type="text" name="youname" value="하보니">

<script>
  document.querySelector("input[type=text]").value = "habony";
</script>

getAttributeNode()

해당 요소의 속성 값을 변경합니다.

<a href="http://habonyphp.com">하보니 PHP</a>

<script>

  // 첫 번째 방법
  // a 태그에 href 속성을 구글로 변경합니다.
  document.getElementsByTagName("a")[0]
     .getAttributeNode("href").value = "http://google.com";

  
  
  // 두 번째 방법
  document.getElementsByTagName("a")[0]
     .getAttribute("href").value = "http://google.com";
</script>