DOM과 주요 제어 메소스 > 자바스크립트 관련 : 노트

Note > 자바스크립트 관련DOM과 주요 제어 메소스By a3040, Published on Invalid Date

DOM(Document Object Model)은 HTML, XML 등의 문서를 객체로 표현하는 모델입니다.

우리가 작성한 HTML 문서를 브라우저가 사용하기 위해 해석하고 사용자가 javascript를 이용해서 추가, 수정등을 할수있게 해석한 객체들의 요소에 대한 이야기 입니다. 주요 요소는 Document, Element, Node, Event, NodeList, Window 등이 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <title>Document 객체 예시</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>This is an example of Document object.</p>
  </body>
</html>

위 예시의 HTML문서 전체가 Document 객체를 나타냅니다. 문서의 모든 요소는 document객체의 하위요소로 포함됩니다.

> console.log( document.title )
Document 객체 예시
> console.log( document.head )
  <head>
    <title>Document 객체 예시</title>
  </head>

HTML 문서에서 element와 tag는 종종 혼용되어 사용됩니다. 위 예시에서 h1, p등이 Dom 객체중 Element가 됩니다. Node는 Elment들을 표현합니다.

document 객체는 Node들이 모여서 만들어 지고 Node는 Element들이 모여서 만들어집니다.

// `document` 객체를 사용하여 `h1` 요소를 선택합니다.
const h1 = document.querySelector('h1');

// `h1` 요소의 `text` 노드를 선택합니다.
const textNode = h1.firstChild;

// `text` 노드의 내용을 변경합니다.
textNode.textContent = 'Hello DOM!';

// `text` 노드의 스타일을 변경합니다.
textNode.style.color = 'red';

document.getElementById(): HTML 요소의 ID를 사용하여 해당 요소를 가져옵니다.

document.getElementsByClassName(): 지정된 클래스 이름과 일치하는 모든 요소를 가져옵니다.

document.getElementsByTagName(): 지정된 태그 이름과 일치하는 모든 요소를 가져옵니다.

document.querySelector(): selctor를 이용한 요소를 가져옵니다.

element.appendChild(): 지정된 요소를 다른 요소의 자식으로 추가합니다.

element.removeChild(): 지정된 요소를 삭제합니다.

element.setAttribute(): 요소의 속성을 설정합니다.

element.getAttribute(): 요소의 속성 값을 가져옵니다.

element.style.propertyName: 요소의 스타일 속성을 설정하거나 가져옵니다.

element.classList.add(): 요소에 클래스를 추가합니다.

element.classList.remove(): 요소에서 클래스를 제거합니다.