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

<div id='js'>자바스크립트</div>

반환된 객체 프로퍼티로 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

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="js" class="js">자바스크립트</div>

    <script src="src/index.js"></script>
  </body>
</html>

PreviousDocument Object Model Next이벤트 (Event)

Last updated 2 years ago

Was this helpful?

const div = document.createElement('div'); const text = document.createTextNode('자바스크립트'); div.appendChild(text); document.body.appendChild(div); setTimeout(() => { document.body.removeChild(div); }, 1000);

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

<!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8" /> </head> <body> <div id="js" class="js">자바스크립트</div> <script src="src/index.js"></script> </body> </html>