✊ 필오의 개발일지
Back to Posts
2017년 12월 26일

8/ DOM(1) - 노드의 계층 구조(1)

8/ DOM(1) - 노드의 계층 구조(1)

‘프론트엔드 개발자를 위한 자바스크립트 프로그래밍’ 책을 참고하여 정리합니다. 오류가 있다면 언제든지 댓글 남겨주세요. 넘나 많은 프로퍼티와 메서드들 @_@

브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM(문서 객체 모델: Document Object Model)을 생성한다.

DOM은 HTML, JavaScript에서 정의한 표준이 아닌 별개의 W3C의 공식 표준이며 플랫폼/프로그래밍 언어 중립적이다. DOM은 다음 두 가지 기능을 담당한다.

목차

  1. Node 타입
  1. Document 타입
  1. Element 타입
  1. Text 타입
  2. Comment 타입
  3. CDATASection 타입
  4. DocumentType 타입
  5. DocumentFragment 타입
  6. Attr 타입

노드의 계층 구조

<html>
  <head>
    <title>Sample Pate</title>
  </head>
  <body>
    <p>Hello world!</p>
  </body>
</html>

1. Node 타입

모든 노드에는 타입을 나타내는 nodeType 프로퍼티가 있다.

Node.ELEMENT_NODE(1);
Node.ATTRIBUTE_NODE(2);
Node.TEXT_NODE(3);
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9);
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);
if (someNode.nodeType == Node.ELEMENT_NODE) {
  alert('Node is an element.');
} // IE에서는 오류
 
if (someNode.nodeType == 1) {
  alert('Node is an element.');
} // 모든 브라우저에서 동작

1-1. nodeName, nodeValue

1-2. 노드 사이의 관계

1-2-1. ChildNodes 프로퍼티

NodeList가 저장된다.
const firstChild = someNode.childNodes[0];
const secondChild = someNode.childNodes.item(1);
const count = someNode.childNodes.length;

1-2-2. parentNode 프로퍼티

1-2-3. firstChild 프로퍼티

childNodes 목록에서 첫번째 노드를 가리킨다. someNode.firstChild = someNode.childNodes[0]

1-2-4. lastChild 프로퍼티

childNodes 목록에서 마지막 노드를 가리킨다. someNode.lastChild = someNode.childNodes[someNode.childNodes.length-1]

1-2-5. hasChildNodes() 메서드

노드에 자식 노드가 있으면 true를 반환. length로 자식 노드 확인하는 것보다 효과적.

1-2-6. ownerDocument 프로퍼티

전체 문서를 표현하는 문서 노드에 대한 포인터 노드 계층 구조를 따라 위로 거슬러 올라갈 필요 없이 문서 노드에 빠르게 접근 가능하다.

1-3. 노드 조작

1-3-1. appendChild()

1-3-2. insertBefore(삽입할 노드, 기준 노드)

1-3-3. replaceChild(삽입할 노드, 교체할 노드)

1-3-4. removeChild()

1-4. 기타 메서드

1-4-1. cloneNode(boolean)

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
const deepList = myList.cloneNode(true); // myList에 ul요소에 대한 참조를 저장했다고 가정
console.log(deepList.childNodes.length); // 3 or 7(공백포함)
 
const shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

1-4-2. nomalize()

2. Document 타입

Document 노드의 특징

2-1. Document 자식 노드

Document 자식으로

2-1-1. documentElement 프로퍼티

const html = document.documentElement;
console.log((html === document.childNodes[0]) === document.firstChild);

document 객체

2-1-2. DocumentType

<!DOCTYPE> 태그는 문서의 다른 부분과는 별도의 엔티티로 간주하며 포함된 정보는 다음과 같이 doctype 프로퍼티를 통해 접근할 수 있다.

const doctype = document.doctype;

2-2. 문서 정보

2-2-1. document.title

2-2-2. 웹페이지 요청과 관련한 프로퍼티

HTTP 헤더에 들어있다.

2-3. 요소 위치

특정 요소나 요소 그룹에 대한 참조를 얻는 일을 자주한다. 대표적인 2가지 메서드. getElementById(), getElementByTagName()

2-3-1. getElementById()

2-3-2. getElementByTagName()

- NodeList 객체와 마찬가지로 HTMLCollection 객체의 데이터 역시 대괄호기법과 item() 메서드로 접근 가능하다. - HTMLCollection의 namedItem() 메서드 - name 속성을 통해 컬렉션 데이터에 대한 참조를 얻는다.

<img src="myimage.jpg" name="myImage" />
const images = document.getElementByTagName('img');
const myImage = images.namedItem('myImage');
const myImage = images['myImage'];
const allElements = document.getElementByTagName('*');

2-3-4. getElementByName()

name 속성 값이 주어진 문자열에 일치하는 요소를 반환한다.

<fieldset>
  <legend>Which color do you prefer?</legend>
  <ul>
    <li>
      <input type="radio" value="red" name="color" id="colorRed" />
      <label for="colorRed">Red</label>
    </li>
    <li>
      <input type="radio" value="green" name="color" id="colorGreen" />
      <label for="colorGreen">Green</label>
    </li>
    <li>
      <input type="radio" value="white" name="color" id="colorBlue" />
      <label for="colorBlue">Blue</label>
    </li>
  </ul>
</fieldset>

2-4. 특별한 컬렉션

document객체에는 특별하 컬렉션이 몇가지 있다. 각 컬렉션은 모두 HTML Collection 객체이고, 문서에 공통된 요소들에 빠르게 접근할 수 있도록 만들어졌다.

2-5. DOM 준수 탐지

hasFeature()

2-6. 문서에 쓰기

write() : 넘겨 받은 텍스트를 그대로 추가하고 writeIn() : 줄바꿈을 문자(\n)를 문자열 마지막에 추가한다. open() : 페이지 스트림을 열고 close() : 페이지 스트림을 닫습니다.

3. Element 타입

Element 요소의 특징

3-1. HTML 요소

HTMLElement 타입을 통해 표현된다. HTMLElement는 Element를 직접적으로 상속한다.

id : 요소의 고유한 식별자 title : 요소에 대한 추가 정보, 일반적으로 툴팁으로 표현됨 lang : 요소 콘텐츠의 언어 코드. 거의 사용되지 않는다. dir : 언어의 표기 반향. ltr은 왼쪽 => 오른쪽, rtl은 오른쪽 => 왼쪽. 거의 사용되지 않는다. className : CSS 클래스인 class 속성을 나타낸다. class가 ECMAScript의 예약어이기 때문에 className이라고 사용한다.

<div id="myDiv" class="bd" title="Body text" lang="en" dir="ltr"></div>

3-2. 속성 얻기 (getAttribute())

getAttribute(속성이름) : 공식 속성 이외에 커스텀 속성을 가져오는데도 쓸 수 있다. setAttribute(속성이름, 속성이름의 값) removeAttribute(속성이름)

var four = document.getElementById('four');
 
// class 어트리뷰트가 존재하지 않으면
if (!four.hasAttribute('class')) {
  // four에 class 어트리뷰트를 추가하고 값으로 'white'를 설정
  four.setAttribute('class', 'white');
} else {
  // four에 class 어트리뷰트가 존재하면
  four.className = 'white';
}
 
// class 어트리뷰트의 값을 취득
console.log(four.getAttribute('class')); // white
 
// class 어트리뷰트를 제거
four.removeAttribute('class');
 
// class 어트리뷰트의 존재를 확인
console.log(four.hasAttribute('class')); // false

3-3. 속성 설정 (setAttribute())

3-4. 속성 제거 (removeAttribute())

3-5. attributes 프로퍼티

NamedNodeMap 객체의 메서드들

attributes 메서드들이 유용한 경우는 요소의 속성을 대상으로 루프가 필요할 때. 각 속성의 이름과 값을 문자열에 추가한다.

function outputAttributes(element) {
  const pairs = new Array(),
    attrName,
    attrValue,
    i,
    len;
 
  for (i = 0, len = element.attributes.length.length; i < len; i++) {
    attrName = element.attributes[i].nodeName;
    attrValue = element.attributes[i].nodeValue;
    pairs.push(attrName + '="' + attrValue + '"');
  }
  return pairs.join(' ');
}

3-6. 요소 생성 (document.createElement())

- createElement() 메서드는 새 요소를 생성하고 ownerDocument 프로퍼티를 설정한다. - 생성 이후에는 문서 트리의 일부가 아니므로 appendChild(), insertBefore(), replaceChild() 메서드를 통해 요소를 문서 트리에 추가해야한다. - IE7이전 버전에는 HTML을 통으로 인자로 넘길 수 있다.

3-7. 요소의 자식

<ul id="myList">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

참고링크

  1. http://poiemaweb.com/js-dom 
  2. http://webclub.tistory.com/339 

생소했던 단어

  1. MIME타입
  2. Gecko
Previous8/ DOM(1) - 노드의 계층 구조(2)
Next7/ BOM (브라우저 객체 모델)

Related

01_Web > zz. Workshop
코드스피츠85 2회-(2) 동시성 모델을 직접 구현하며 이해하기.
javaScript, codeSpitz
2019년 11월 11일
01_Web > zz. Workshop
코드스피츠85 2회-(1) 자바스크립트의 동시성
javaScript, codeSpitz, concurrency, Parallelism
2019년 11월 10일
01_Web > zz. Workshop
코드스피츠85 1회-(2) Runtime때 일어나는 일들
javaScript, codeSpitz
2019년 11월 1일
01_Web > zz. Workshop
코드스피츠85 1회-(1) JavaScript Now
javaScript, codeSpitz
2019년 10월 27일
01_Web > zz. Workshop
코드스피츠80_OOP design with game (2)- 2. 모델 (베이스 레이어)
javaScript, OOP
2019년 3월 17일
HomePostsRSSLinkedinGitHub
© 2025 Felix
CTRL K