공부했던 자료 정리하는 용도입니다.

재배포, 수정하지 마세요.

 

 

 

 

DOM (문서 객체 모델, Document Object Model)

  : 웹 문서의 모든 요소(텍스트 · 이미지 · 표 등)를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법.

 

  •  document  : 웹 문서 자체를 가리키는 DOM 요소중 하나

 

 

 

DOM Tree

  DOM은 웹 문서의 요소를 부모와 자식 요소로 구분하여 구조화하는데 이를 DOM Tree라고 부른다. DOM Tree는 가지와 노드로 구성되어 있으며 웹 문서의 HTML 요소뿐만 아니라 HTML의 요소가 품고 있는 텍스트, 이미지 등도 자식으로 간주하여 DOM트리에 표현한다.

 

DOM Tree를 실시간으로 확인할 수 있는 사이트 : http://software.hixie.ch/utilities/js/live-dom-viewer/

 

<!DOCTYPE html>
<html lang="ko">
    <head>
        <title>DOM TREE알아보기</title>
    </head>
    <body>
        <h1>DOM</h1>
        <p>DOM을 공부합니다.</p>
    </body>
</html>

만약 위와 같은 소스가 있다면 아래와 같은 DOM Tree가 만들어진다.

 

DOM Tree

 

   DOM Tree 구성요소 

  •  노드(node)   : 웹 문서에 있는 요소나 속성 등을 나타냄
    루트 노드(Root Node) : 가장 위에 있으면서 다른 요소 노드가 뻗어 나가기 시작하는 노드
    부모 노드 : 특정 노드를 기준으로 위에 붙어있는 노드
    자식 노드 : 특정 노드를 기준으로 아래에 있는 노드
  •  가지  : 노드와 노드 사이의 연결관계를 나타냄

 

   DOM Tree의 웹 문서 표현 

  • 웹 문서의 태그는 요소(Element) 노드로 표현
  • 태그가 품고 있는 텍스트는 해당 요소 노드(태그)의 자식 노드인 텍스트(Text) 노드로 표현
  • 태그의 속성은 모두 해당 요소 노드(태그)의 자식 노드인 속성(Attribute) 노드로 표현
  • 주석은 주석(Comment) 노드로 표현

 

 

 

DOM 요소 접근방법

  •  요소 노드까지만 접근 가능 
    1. id 선택자로 접근 : getElementById( )
    2. class 값으로 접근 : getElementsByClassName( )
    3. tag 이름으로 접근 : getElementsByTagName( )

  •  요소 노드 외에 텍스트 노드와 속성 노드까지 접근 가능(새로운 노드 추가도 가능) 
    1. querySelector( )
    2. querySelectorAll( )

 

 

  ■ id 선택자로 접근 - getElementById( )

document.getElementById("heading")	//id값이 heading인 요소에 접근


//이벤트 처리도 가능(id값으로 DOM요소에 접근해서 이벤트가 발생했을 때 함수가 실행됨)
document.getElementById("heading").onclick = function(){	
	this.style.fontSize = "5em";
}

 id 속성 값은 한 문서 안에서 유일하기 때문에 자주 사용한다. 

 

 

  ■ class값으로 접근 - getElementsByClassName( )

document.getElementsByClassName("accent")

//인덱스를 이용해 원하는 값에 접근가능
document.getElementsByClassName("accent")[0].style.textDecoration = "underline"

CSS에서  class 선택자는  id 선택자와 다르게 웹 문서 안에서 여러 번 사용 가능하다.

그래서  getElementsByClassName( ) 함수는 2개 이상의 웹 요소에 접근하며 결과 값도  HTML Collection 값을 출력한다.

 

  •  HTMLCollection  : 여러 개의 HTML 요소를 담고 있는(Collection) 자료 형식, 
                                   배열과 비슷해서 인덱스를 이용하면 원하는 값에 접근할 수 있다.

 

HTMLCollection 예시

 

 

  ■ tag 이름으로 접근 - getElementsByTagName( )

document.getElementsByTagName("h2")

//인덱스를 이용해 원하는 값에 접근가능
document.getElementsByTagName("h2")[0].style.background = "#eee"

   id 나  class 선택자가 없는 DOM요소에 접근할 때  tag 를 이용해서 접근한다.  class 값으로 접근할 때와 마찬가지로 여러 요소를 모두 찾아 접근하기 때문에 결과 값으로  HTML Collection 값을 출력한다. 인덱스를 사용하여 원하는 값에 접근하면 된다.

 

 

  ■ 다양한 방법으로 접근 - querySelector( ), querySelectorAll( )

// 1. class 값으로 접근하는 경우(앞에 .을붙여 사용)
document.querySelectorAll(".accent")

// 2. id 값으로 접근하는 경우(앞에 #을 붙여 사용)
document.querySelector("#heading")

// 3. tag 이름으로 접근하는 경우(기호 X 이름만 사용)
document.querySelector("p")

   querySelector( ) ,  querySelectorAll( ) 은 사용방법과 기능이 같지만 접근하는 DOM요소 개수만 다르다.  class 값 앞에는 점( . )을,  id 값 앞에는  # , 태그 이름은 기호 없이 태그 이름만 사용하면 된다.  querySelector( )로  class 선택자나 태그 이름을 사용할 경우 여러 요소 중 첫 번째 요소에만 접근할 수 있으므로 주의한다.

 

  •  NodeList  : 여러 개의 노드를 모아 놓은 것.
                       배열과 비슷해서 인덱스를 이용하면 원하는 값에 접근할 수 있다.

.

NodeList 예시

 

 

 

웹 요소의 태그 속성 가져와서 수정

//getAttribute 사용 예시
// 자식선택자(>)를 사용하면 태그를 더 세밀하게 지정할 수 있다.
document.querySelector("#prod-img > img").getAttribute("src")

//setAttribute 사용 예시
document.querySelector("#prod-img > img").setAttribute("src", "[이미지경로].jpg")

   getAttribute( ) 함수를 이용해서 HTML 태그의 속성을 가져온 뒤,  setAttribute( ) 함수를 사용해서 접근한 속성의 값을 바꾸면 된다.(지정한 속성이 없으면 새로 속성과 속성 값을 추가하고, 지정한 속성이 있다면 해당 속성 값으로 수정된다.  setAttribute( ) 를 사용하지 않고 속성을 사용하는 방법도 있다.)

 

 

 

DOM에서 이벤트 처리하기

  1. HTML 태그 안에서 이벤트 처리기 연결

<img id="pic" src="images/girl.png" alt="" onclick="changePic()">	//누르면 changePic()함수 실행

  이벤트가 발생하는 HTML 태그 안에 직접 이벤트 처리기를 추가하는 방법이다. 함수를 미리 선언했다면 태그 안에 이벤트 발생 시 실행할 함수를 연결해 줄 수 있다. 하나의 요소에 하나의 이벤트 처리기만 사용할 수 있고, HTML 태그와 자바스크립트가 섞여있는 형태라서 수정이 불편하다는 단점이 있다. HTML 소스가 길지 않아서 쉽게 확인이 가능할 때 사용할 수 있다.

 

 

  [참고] 버튼 기능 비활성화

<button onclick = "newRegister()";return false;>신청</button>

 button 태그에  return false 를 추가하면 원래 버튼의 기능(입력 내용을 서버로 전송하는 기능)을 사용하지 않겠다는 의미이다.

 

 

 

  2. DOM요소에 이벤트 처리기 연결

<div id="container">
    <img id="pic" src="images/girl.png" alt="">
</div>
<script>		
    var pic = document.querySelector('#pic');
    pic.onclick = changePic;
    
    function changePic() {			
        pic.src = "images/boy.png";
    }
</script>

  이벤트가 발생한 웹 요소를 가져온 후 이벤트 처리기를 연결하는 방법이다. 1번 방법과 같이 이벤트 발생 시 함수를 실행하지만 이벤트 처리기를 자바스크립트에서 실행한다는 점이 다르다. 마찬가지로 하나의 요소에 하나의 이벤트 처리기만 사용할 수 있다. HTML 태그와 뒤섞이지 않고 자바스크립트를 사용할 수 있다는 장점이 있다.

 

 

  3. addEventListener( ) 함수 사용

addEventListener([이벤트 유형], [함수], [캡처 여부]);

//사용 예시
var pic = document.querySelector('#pic');
pic.addEventListener("moseover", changePic, false);

  한 요소에 여러 이벤트가 발생했을 때 이를 동시에 처리하려면 DOM의  addEventListener( ) 함수를 사용하면 된다. 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수로, 웹 문서에서 이미지나 텍스트 등 특정 요소뿐만 아니라  Document 객체나  Window 객체 어디서든 사용할 수 있다.

 

  •  이벤트 유형  : 처리할 이벤트 유형을 지정한다.  on 을 붙이지 않고 이벤트 이름만 사용한다.
                           ex) click, mouseover ...
  •  함수  : 이벤트가 발생했을 때 실행할 명령을 나열하거나 함수 이름을 지정한다.
  •  캡처 여부  (선택) : 이벤트를 캡처링 여부를 지정할 수 있다.
    true : 캡처링
    false : 버블링(기본값)

    이벤트 캡처링 : DOM의 부모 노드에서 자식 노드로 이벤트가 전달되는 것
    이벤트 버블링 : DOM의 자식 노드에서 부모 노드로 이벤트가 전달되는 것

 

 

 

웹 요소의 스타일 가져와서 수정

document.querySelector("#heading").style.color = "white"	//글자색 변경
document.querySelector("#heading").style.backgroundColor = "gray";	//배경색 변경

document.querySelector("#detail").style.display = "block";	//웹 요소 화면에 표시
document.querySelector("#detail").style.display = "none";	//웹 요소 사라짐

  자바스크립트로 특정 웹 요소에 접근하는 방법을 응용하면 웹 요소에서 사용한 CSS 속성에 접근하거나 수정하는 것이 가능하다.
css속성 중  - 으로 연결된 것들은  - 를 빼고 이어지는 첫 번째 단어들을 대문자로 수정(Camel Case)해서 사용한다.
ex) background-color →  backgroundColor , text-decoration →  textDecoration 

 

   [참고] display 속성과 visibility 속성 차이 

  •  display: none  : 요소가 차지하던 공간도 사라짐
  •  visibility: hidden  : 요소가 있던 공간은 빈 상태로 남음

 

 

 

DOM과 요소

1. DOM에 새로운 노드를 추가

  웹 문서에 있는 요소는 단순히 태그만 있는 게 아니라 태그 속성과 내용을 함께 사용한다. 그래서 노드를 추가할 때 요소 노드뿐만 아니라 태그 안에 있는 텍스트 내용과 속성 노드도 함께 추가해야 한다.

함  수 설  명
createElement( ) 새 요소 노드 생성
createTextNode( ) 텍스트 내용이 있을 경우 텍스트 노드를 생성
appendChild( ) - 텍스트 노드를 요소 노드에 자식 노드로 추가
- 요소 노드를 다른 요소 노드의 자식 노드로 연결
자식 노드가 여럿일 경우  appendChild( ) 를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가됨
createAttribute( ) 요소에 속성이 있을 경우 속성 노드를 생성
setAttributeNode( ) 속성 노드를 요소 노드에 연결
속성 노드를 요소 노드에 연결하면  null 을 반환

 

 

노트 추가 과정 (예시)

//1. 요소 노드 만들기 - createElement() 함수
var newP = document.createElement("p");


//2. 텍스트 노드 만들기 - createTextNode() 함수
var newText = document.createTextNode("주문이 완료되었습니다.");


//3. 자식 노드로 추가 - appendChild() 함수
//[3-1] 텍스트 노드를 요소 노드의 자식노드로 연결
newP.appendChild(newText);

//[3-2] 요소 노드를 body노드의 자식노드로 추가
document.body.appendChild(newp);


//4. 속성 노드 만들기 - createAttribute() 함수
var attr = document.createAttribute("class");
attr.value = "accent";


//5. 속성 노드 연결(2가지 방법)
//[1] setAttributeNode()를 사용하는 경우
newP.setAttributeNode(attr);

//[2] setAttribute()를 사용하는 경우
newP.setAttribute("class", "accent");

 body 태그에  <p class="accent">주문이 완료되었습니다.</p> 라는 요소를 추가하는 예시이다. 

 setAttribute("[속성이름]", "[속성 값]") 함수를 사용해서  setAttributeNode( ) 보다 더 간단히 속성을 추가할 수도 있다.

 

 

  2. 추가한 노드 순서 바꾸기, 삭제

  ■ 노드 리스트

document.querySelectorAll("p")[0]

   querySelectorAll( ) 함수를 이용해 여러 개의 노드를 한꺼번에 가져오면 노드들이 한꺼번에 저장되는데 이것을 노드 리스트라고 한다. 배열은 아니지만 배열과 비슷한 형태로 인덱스를 사용하면 특정 위치에 노드에 접근할 수 있다.

 

 

  ■ DOM Tree를 활용한 노드 다루기

  DOM Tree의 관계를 이용해서 원하는 노드에 접근하거나 내용을 수정 · 삭제하는 방법이다. 아래 함수들은 이와 관련된 함수이며 주황색으로 표시된 속성들은 함수와 관련된 속성들이다.

함수 또는 속성 설  명 사용예시
hasChildNodes( ) 특정 노드에 자식 노드가 있는지 확인하는 함수
자식 노드가 있으면  true  , 없으면  false 를 반환		 document.querySelectorAll("p")[0].hasChildNodes()
childNodes 사용하면 현재 노드의 자식노드에 접근. 요소 노드뿐만 아니라 텍스트 노드나 주석 노드까지 모두 접근가능하다.
이때 요소 노드뿐만 아니라 태그와 태그 사이의 줄바꿈도 빈 텍스트 노드인 자식노드로 인식		 document.querySelector("#nameList").childNodes
▶ NodeList(7) [text, p, text, p, text, p, text]
children 자식 노드 중에서 요소 노드에만 접근할 경우 사용 document.querySelector("#nameList").children
▶ HTMLCollection(3) [p, p, p]
insertBefore( ) (부모 노드에 자식 노드를 추가할 때) 기준이 되는 노드를 지정하고 그 앞에 자식 노드를 추가하는 함수. 특정 위치에 노드를 삽입할 때 사용한다.

첫 번째 인수 : 추가하는 노드
두 번째 인수 : 기준이 되는 노드		 nameList.insertBefore(nameList.children[2], nameList.children[0]) 
//세번째 노드를 맨 앞으로 옮김
removeChild( ) 부모 노드에서 자식 노드를 삭제하는 함수. ( )안에 삭제하려는 자식 노드가 들어간다.
노드는 스스로 자신을 삭제할 수 없기 때문에 부모 노드에 접근해서 삭제해야 한다. 
삭제시 자식의 자식까지 삭제됨		 var firstDel = document.querySelectorAll(".del")[0]
var firstP = document.querySelectorAll("p")[0]
firstP.removeChild(firstDel)
삭제된 노드가 반환됨
parentNode 현재 노드의 부모 요소 노드를 반환 document.querySelectorAll(".del")[0].parentNode

 

 

 

저작자표시 비영리 변경금지

'Front end > Javascript' 카테고리의 다른 글

[Javascript] BOM (브라우저 객체 모델)  (0) 2020.01.17
[Javascript] 폼(form)  (0) 2020.01.15
[Javascript] Array 객체  (0) 2020.01.07
[Javascript] 객체(object)  (0) 2020.01.05
[Javascript] 이벤트(event)  (0) 2020.01.02

+ Recent posts

티스토리툴바