DOM

Creating the dots·2021년 7월 5일
0

Javascript

목록 보기
16/24

DOM(Document Object Model)

DOM은 문서를 노드의 계층구조 트리로 표현한다. 자바스크립트로 DOM을 사용해 HTML을 조작할 수 있다.

Node

앞서 DOM은 문서를 노드의 계층 구조 트리로 표현한다고 설명했는데, 그렇다면 노드는 무엇일까?

결론부터 말하자면, 우리가 말하는 element도 노드이고(Node.ELEMENT_NODE), 텍스트도 노드이고 (Node.TEXT_NODE), 주석도 노드(Node.COMMENT_NODE)이다. 결국, 문서에 작성된 것들이 모두 노드라고 할 수 있다.

노드 타입에는 여러가지가 있고, 각 타입은 서로 다른 특징과 데이터, 메소드를 가진다. 또한 노드 간 관계가 있을 수 있는데, 이러한 관계가 계층구조를 만든다.

  • 노드타입
    모든 노드에는 타입을 나타내는 nodeType 프로퍼티가 있고, 노드타입은 12가지 숫자형 상수 중 하나이다. 문서의 루트는 문서노드이다.
  //nodeType 예시
  Node.ELEMENT_NODE (1)
  Node.ATRRIBUTE_NODE (2)
  Node.TEXT_NODE (3)
  Node.COMMENT_NODE (8)
  Node.DOCUMENT_NODE (9) 
  • 노드 간 관계
    모든 노드는 다른 노드와 관계가 있다. 각 노드에는 childNodes 프로퍼티가 있다. 이 프로퍼티에는 NodeList가 저장된다. NodeList는 arguments처럼 유사배열 객체이고,length 속성과 인덱스를 통해 데이터에 접근할 수 있다. 하지만 배열이 아니므로 (Array.isArray(NodeList)===false) 배열 메소드를 사용할 수 없다. 유사배열 객체 arguments를 Array.prototype.slice()를 사용해 배열로 바꾸었던 것처럼 NodeList 객체 역시 배열로 바꿀 수 있다.

  • 노드와 엘리먼트
    다음 두 이미지를 통해 node와 element를 비교해볼 수 있다. children 프로퍼티에는 html 엘리먼트들만 포함되어 있고, childNodes 프로퍼티는 NodeList 객체에 html 엘리먼트 뿐만 아니라 주석, 텍스트까지 모두 포함되어있다.

Javascript로 HTML 조작하기

앞에서는 DOM과 노드에 대해서 정리를 해보았다. DOM은 문서를 노드의 계층구조로 표현한 것이라고 했는데, 자바스크립트와는 무슨 관련이 있는걸까?

자바스크립트는 정적인 html 문서를 동적으로 기능하게 만들 수 있다. 그렇게 하기 위해서 자바스크립트로 html을 조작할 수 있어야 하는데, 이때 DOM을 활용하는 것이다.

  • 태그로 선택하기
    document.getElementsByTagName('태그 이름')

  • 아이디로 선택하기
    document.getElementById('아이디 이름')

  • 클래스로 선택하기
    document.getElementsByClassName

  • css selector로 선택하기
    document.querySelector(); //첫번째 자손요소 반환
    document.querySelectorAll(); //일치하는 노드 전체를 노드리스트로 반환

<form id="register">
  	<label>아이디</lable>
	<input type="text" id="username">  
</form>
const el-input = document.querySelector('#username');
el-input.value = "input에 들어갈 내용을 바꿀 수 있다";

profile
어제보다 나은 오늘을 만드는 중

0개의 댓글