여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - DOM HTML - Javascript로 HTML 요소 선택, 추가, 삭제, 변경
Javascript – DOM HTML – Javascript로 HTML 요소 선택, 추가, 삭제, 변경
3년전 작성
2년전 수정

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 태그를 입력해도된다.

HTML
<p>지금은 몇시 입니까?</p>

<button type="button" onclick="document.getElementById('time').innerHTML = Date()">시간 확인</button>

<p id="time"></p>
기본 예시

지금은 몇시 입니까?

요소.속성 = 새로운 속성값

요소의 속성에 대한 속성값을 변경한다.
예를 들어, title, type과 같은 속성의 속성 값을 변경할 수 있다.

HTML
<p>버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.</p>
<button type="button" onclick="document.getElementById('atts').type = 'radio'">클릭</button>

<input id="atts" type="checkbox" style="width: 30px; height: 30px;">
기본 예시

버튼을 클릭하면 체크 박스가 라디오 버튼으로 변경됨.

요소.setAttribute(속성, 속성값)

요소의 속성에 대한 속성값을 변경하는 메소드.
위의 ‘요소.속성 = 새로운 속성값’으로 사용하는 특성과 같은 동작을 한다.

HTML
<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 요소를 만든다.

HTML
<div id="createElement">저는 밍구 입니다.</div>
Javascript
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 요소를 삭제한다.

HTML
<div id="par">
<div id="child1">안녕하세요!</div>
<div id="child2">저는 밍구 입니다.</div>
<div id="child3">잘부탁드립니다.</div>
</div>
Javascript
document.body.onload = rmElement;

function rmElement () {
var parent = document.getElementById("par");
var child = document.getElementById("child3");
parent.removeChild(child);
}
기본 예시

document.appendChild(요소)

자식 요소를 추가한다.

HTML
<div id="par">
<p>안녕하세요!</p>
<p>저는 밍구 입니다.</p>
</div>
Javascript
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)

부모 요소내의 자식 요소를 대체한다.

HTML
<div>
<span id="child">안녕하세요?</span>
</div>
Javascript
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 태그 / 텍스트를 출력한다.
✔️ 거의 사용되지 않는다.

Javascript
document.body.onload = write;

function write() {
document.write("

안녕하세요?

"); document.write("저는 밍구 입니다."); }
기본 예시

HTML 객체 찾기

참고