Manipulating Elements(요소 조작하기)

3. Manipulating Elements

요소 조작하기

DOM을 이용하여 선택한 요소들을 필요에 따라 수정하거나 삭제할 수도 있다.

const $el  = document.getElementById("x-button");
$el.textContext = "This is X button";

자주 사용하는 속성들

Elemnet.children - 자식요소 가져오기

var foo = document.getElementById('foo');
for (var i = 0; i < foo.children.length; i++) {
    console.log(foo.children[i].tagName);
}

Elemnet.classList - 요소의 클래스 정보

const div = document.createElement('div');
div.className = 'foo';
div.classList.remove("foo"); // foo 클래스 제거
div.classList.add("anotherclass"); // anotherclass 클래스 추가

Element.innerHTML - 요소의 HTML

const $el  = document.getElementById("x-button");
$el.innerHTML = "This is X button";

Element.remove - 요소 삭제하기

var el = document.getElementById('div-02');
el.remove(); // id가 'div-02' 인 div를 제거합니다

Element.appendChild - 자식요소 추가하기

// 새로운 단락 요소를 생성하고 문서에 있는 바디 요소의 끝에 붙입니다.
var p = document.createElement("p");
document.body.appendChild(p);

위의 내용은 "MDN - Web API"를 참조 하였습니다.
MDN Web API