DOM API
자바스크립트를 통해 DOM 조작 ,수정, 생성 할 수 있다.
DOM 요소 생성하기
createElement(태그이름)
태그이름으로 노드를 생성한다. return : HTMLElement 상속받은 객체
createTextNode(문자열)
텍스트 노드를 생성한다. return : text 객체
appendChild(Node)
인자로 전달한 노드를 자식노드로 추가한다. return : 추가한 노드
const div = document.createElement('div');
const text = document.createTextNode('자바스크립트');
div.appendChild(text);
document.body.appendChild(div);
div 노드를 생성하고 text객체를 div에 추가한 후 body에 div를 자식노드로 추가한다.
노드 제거하기
removeChild(Node)
인자로 전달된 자식노드를 제거한다.
const div = document.createElement('div');
const text = document.createTextNode('자바스크립트');
div.appendChild(text);
document.body.appendChild(div);
setTimeout(() => {
document.body.removeChild(div);
}, 1000);
1초 후 body에 추가한 div 자식노드를 제거한다.
DOM 요소에 접근하기
document.getElementById(id)
id 어트리뷰트로 요소를 한 개 선택한다. 여러개 있다면 첫번째 요소 반환한다.
const js = document.getElementById('js');
console.log(js.id); //js
반환된 객체 프로퍼티로 id에 접근하면 id인 js를 가져올 수 있다.
document.querySelector(cssSelector)
위 방법말고 css 선택자로 가져올 수 도 있다. byId 접근은 Id로만 접근이 가능한데 querySelector은 css선택자로 다 가능하다.
const jsId = document.querySelector("#js");
const jsClass = document.querySelector(".js");
const jsTag = document.querySelector("div");
console.log(jsId.id); //js
console.log(jsClass.id); //js
console.log(jsTag.id); //js
Last updated
Was this helpful?