Jascript를 이용하여 HTML 요소를 찾고 변경하고 추가/삭제 할 수 있다.
HTML 요소
HTML 요소를 찾거나 변경하거나 추가 / 삭제할 때 어떤 메소드 / 속성을 이용하는지 알아보자.
HTML 요소 찾기
document.getElementById(‘아이디’)
HTML 문서에서 id가 ‘아이디’인 요소를 찾는다.
document.getElementsByTagName(‘태그 이름’)
HTML 문서에서 태그 이름이 ‘태그 이름’인 요소를 찾는다.
document.getElementsByClassName(‘클래스 이름’)
HTML 문서에서 class 이름이 ‘클래스 이름’인 요소를 찾는다.
querySelector(‘선택자’)
문서에서 ‘선택자’가 들어간 요소를 찾는다.
여기서 선택자는 CSS 선택자와 동일한 방법으로 입력한다.
예를 들어, <p>의 경우 p, class=”class”의 경우 .class, id=”id”의 경우 #id
HTML 요소 변경
요소.innerHTML = 추가할 컨텐츠
요소에 ‘추가할 컨텐츠’를 추가한다.
추가할 컨텐츠에는 텍스트를 입력해도되고 Date()와 같은 Javascript 기본 객체나 HTML 태그를 입력해도된다.
<p>지금은 몇시 입니까?</p> <button type="button" onclick="document.getElementById('time').innerHTML = Date()">시간 확인</button> <p id="time"></p>
지금은 몇시 입니까?
요소.속성 = 새로운 속성값
요소의 속성에 대한 속성값을 변경한다.
예를 들어, title, type과 같은 속성의 속성 값을 변경할 수 있다.
<p>버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.</p> <button type="button" onclick="document.getElementById('atts').type = 'radio'">클릭</button> <input id="atts" type="checkbox" style="width: 30px; height: 30px;">
버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.
요소.setAttribute(속성, 속성값)
요소의 속성에 대한 속성값을 변경하는 메소드.
위의 ‘요소.속성 = 새로운 속성값’으로 사용하는 특성과 같은 동작을 한다.
<p>버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.</p> <button type="button" onclick="document.getElementById('atts').setAttribute('type', 'radio')">클릭</button> <input id="atts" type="checkbox" style="width: 30px; height: 30px;">
버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.
요소.style.속성 = 새로운 속성값
요소의 CSS 속성을 변경한다.
자세한 내용은 Javascript - DOM CSS - Javascript로 CSS 변경을 참고하자.
요소 추가 및 삭제
document.createElement(요소)
HTML 요소를 만든다.
<div id="createElement">저는 밍구 입니다.</div>
document.body.onload = addElement; function addElement () { var newDiv = document.createElement("div"); var newContent = document.createTextNode("안녕하세요!"); newDiv.appendChild(newContent); var currentDiv = document.getElementById("createElement"); document.body.insertBefore(newDiv, currentDiv); }
document.removeChild(요소)
HTML 요소를 삭제한다.
<div id="par"> <div id="child1">안녕하세요!</div> <div id="child2">저는 밍구 입니다.</div> <div id="child3">잘부탁드립니다.</div> </div>
document.body.onload = rmElement; function rmElement () { var parent = document.getElementById("par"); var child = document.getElementById("child3"); parent.removeChild(child); }
document.appendChild(요소)
자식 요소를 추가한다.
<div id="par"> <p>안녕하세요!</p> <p>저는 밍구 입니다.</p> </div>
document.body.onload = append; function append() { var p = document.createElement("p"); var text = document.createTextNode("잘부탁드립니다."); p.appendChild(text); document.getElementById("par").appendChild(p); }
document.replaceChild(new, old)
부모 요소내의 자식 요소를 대체한다.
<div> <span id="child">안녕하세요?</span> </div>
var replace = document.createElement("span"); replace.id = "newSpan"; var replace_content = document.createTextNode("반갑습니다."); replace.appendChild(replace_content); var old = document.getElementById("child"); var par = old.parentNode; par.replaceChild(replace, old);
document.write(text)
자바스크립트로 html 태그 / 텍스트를 출력한다.
✔️ 거의 사용되지 않는다.
document.body.onload = write; function write() { document.write("안녕하세요?
"); document.write("저는 밍구 입니다."); }