문서 객체 모델 (BOM)

문서 객체 모델 정의

- Document Object Model을 줄여 DOM으로 표기 합니다.

- 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해서 해석 해주는 방법

 

 

DOM을 사용하지 않고 상세 설명 가리기

ex)

<h3 style="visibility:hidden"> 상세설명 </h3>

<p style="visibility:hidden">2차 세계대전 이후 설립된 개뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여

하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리

실험실을 갗추고 있어 철저한 관리를 통해 스페셜티 커피를 생산 합니다.</p>

= 상세 설명을 가릴 수 있다

 

DOM을 사용하여 상세 설명 가리기

ex)예시문

document.querySelecter("#detail h3").style.visibility = 'hidden'

=상세 설명 제목이 사라진다

 

ex)예시문

document.querySelecter("#detail p").style.visibility ='hidden'

= 상세 설명 내용도 사라집니다.

 

DOM트리

- 웹 문서 요소 간의 관계를 가지와 노드로 표현한 것입니다.

 

Element 노드 : 웹 문서의 태그는 요소 노드로 표현

Text 노드 : 태그가 품고 있는 텍스트는 요소 노드의 자식 노드인 Text노드로 표현

Attribute노드: 태그의 속성은 요소 노드의 자식 노드인 속성 노드로 표현

Comment 노드 : 주석 노드 표현

 

DOM 요소에 접근하기

 

- 자바스크립트로 DOM 요소에 접근 할때 선택자를 사용한다.

 

DOM 요소를 id 선택자로 접근하는 함수- getElementByld( )

 

- id선택자를 사용하여 DOM 요소에 접근 하는 함수

 

함수를 사용해 DOM 요소에 접근하고 이 요소를 누르면(onclick)함수

{function(){ 가 작동 합니다.

}}

ex)예시문

document.getElementByld("heading").onclick =function( ){
   this.style.fontSize = "5em"
}

 

DOM 요소를 class 값으로 찾아내는 함수 - getElementsByClassName( )

 

- By 단어 앞에 복수를 뜻하는 s가 붙어 있다

- 웹 문서에 여러 번 사용할 수 있으며, 2개 이상의 웹 요소에 접근이 가능 하다.

 

※ HTML Collection ※

-여러 개의 요소를 담고 있는 자료 형식으로 배열과 비슷 하다고 생각하면 됩니다.

get

 

배열의 인덱스를 사용하면 원하는 요소로 접근이 가능 하다.

 

ex) 예시문

document.getElementsByClassName("accent")[ 0 ]

<span class="accent">게뎁농장</span>

=첫 번째 요소에 접근 합니다.

 

DOM 요소를 태그 이름으로 찾아 내는 함수 -getElementsByTagName( )

 

- 태그를 찾아 DOM 요소에 접근 하면 됩니다.

 

h2 태그로 접근한 DOM 요소중 첫 번째 배경색을 바꾼 것 입니다.

ex)예시문

document.getElementsByTagName("h2")[ 0 ].style.backgroundColor ="#eee";

 

DOM 요소를 다양한 방법으로 찾아주는 함수 -querySelecter( ), querySelecterAll( )

- id, class, 태그 이름 사용이 가능하다.

 

class 속성은 한 문서에서 여러번 사용할 수 있다.

document.querySelecterAll(".accent")

 

NodeList

- 여러 개의 노드를 모아 놓은 것이다. 배열과 비슷하다.

 

노드 리스트 두 번째 요소에 접근한 다음 요소의 배경색을 노란색으로 바꾼다.

ex)예시문

document.querySelecterAll(".accent")[1].style.backgroundColor="yellow"

 

DOM에서 이벤트 처리하기

 

changePic( )함수

- 이미지를 눌렀을때 다른 이미지로 바꿔 주는 함수다.

 

DOM 요소에 이벤트 처리기 연결하기 :하나의 요소에 하나의 이벤트 처리기 사용 가능

 

- 이미지 요소를 가져와 pc변수에 저장후 click이벤트가 발생 했을 때 

- changePic( )함수를 실행합니다.

<script>

      var pic= document.querySlelcter("#pic");

      Pic.onclick =changePic; // pic 요소를 누르면 changePic( )함수 실행

      function changePic( ){

      pic,src ="images/boy.png";

}

</script>

 

 

addEventListener( )함수 

- 한 요소에 여러 이벤트가 발생했을 때 동시에 처리할 수 있는 함수

- 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수

- 웹 요소를 제어 하는 소스가 많거나 큰 프로그램일 경우 사용

pic.addEventListener("mouseover", changePic, false);

                                ①             ②           ③

① 이벤트 유형

- 처리할 이벤트 유형을 지정 합니다.

② 함수

- 따로 함수를 만들었다면 함수 이름을 지정 합니다.

③ 캡처 여부

- 이벤트를 캡처링하는지 여부를 지정하는데 생략할 수 있습니다.

  true이면 캡처링 false이며 버블링 기본값은 false이다.

 

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

텍스트 색상 바꾸기

 

 요소 다음에 .style 예약어를 사용하고 그다음에 CSS속성을 사용 합니다.

 글사 색상이 흰색으로 바뀝니다.

ex)

document.querySelecter("#heading").style.color = "white"

 

웹 요소를 화면에 표시하기/감추기

 

display : none;

 - 웹 요소를 화면에 감추면서 차지하던 공간도 사라집니다.

visibility : hidden;

 - 웹 요소를 감추고 요소가 있던 공간은 빈 상태로 남아있다.

 

DOM에 요소 추가하기

- 웹 문서에 <h1>이나 <P> 태그를 추가하고 싶다면 <h1>이나 <p>태그에 요소노드,

  태그 안에 있는 텍스트 내용과 속성 노드도 추가 합니다.

 

<p class ="accent"> 주문이 완료되었습니다</p>

 

- P요소 노드와 속성 값을 넣을 class속성 노드

- "주문이 완료되었습니다."라는 텍스트 노드가 필요하다.

<p class ="accent"> 주문이 완료되었습니다.

 

</p><p class ="accent"> 주문이 완료되었습니다</p>

            속성 노드             텍스트 노드

                         P요소 노드

 

함수

 creatElement( ) : 새 요소 노드를 만든다

 creatTextNode( ): 새 텍스트 노드를 만든다

appendChild( ) : 텍스트노드를 요소 노드인 자식 요소에 추가 한다.

creatAttribute( ) :  속성 노드를 만듭니다.

setAttributeNode( ): 속성 노드를 요소 노드에 연결

appendChild( ): 새로 만든 요소 노드를 부모 노드에 추가 합니다.

 

웹 문서에 새로운 노드 추가 하기

 

1. 추가할 소스 생각해 보기

  <p class="accent">주문이 완료되었습니다.</p>

2. 요소 노드 만들기 -creatElement( )함수

3. 텍스트 노드 만들기- creatTextNode( )함수

4. 자식 노드로 추가하기- appendChild( ) 함수

5. 속성 노드 만들기 - creatAttribute( )함수

6. 속성 노드 연결하기 - setAttributeNode( )함수

 

요소 노드 만들기 -creatElement( )함수

- var newP =document.creatElement("p")

 

텍스트 노드 만들기 -creatTextNode( )함수

- var newText =document.creatTextNode( "주문이 완료되었습니다.")

 

자식 노드로 추가하기- appendChild( ) 함수

- newP.appendChild(newText)

=주문이 완료되었습니다.

 

- class속성 노드를 만들어 변수에 저장

- attr.value를 사용해 "accent"로 지정합니다.

 

속성 노드 만들기 - creatAttribute( )함수

- var attr = document.creatAttribute("class")

attr.value ="accent"

 

속성 노드 연결하기 - setAttributeNode( )함수

선언해 놓은 속성노드를 P요소에 연결한다.

- newP.setAttributeNode(attr)

 

추가한 노드 순서 바꾸거나 삭제하기

- 노드 리스트를 이용해 노드의 위치를 수정 추가한 노드를 삭제 할 수 있다.

 

여러 노드를 한꺼번에 저장하는 노드 리스트

- 배열 형식에 여러값을 저장하듯 여러 노드가 하나의 변수에 저장한다.

 

자식 노드 확인하기 -hasChildNodes( )함수

- 특정 노드에 자식 노드가 있는지 확인

- 있다면 true 않다면 false 반환

 

ex)

document.querySelecterAll("p")[ 0 ].hasChildNodes( )

=true

 

자식 노드 접근하기-childNodes속성( )

- 자식 노드가 있다면 childNodes속성을 사용해 현재 노드에 자식 노드에 접근할 수 있다.

- 텍스트 노드, 주석 노드까지 접근할 수 있다.

 

- #nameList요소에 자식 노드 7개의 노드가 표시된다.

ex)

document.querySelecter("#nameList").childNodes

= NodeList[text, p, text, p, text, p, text]

 

※요소에만 접근 하려면  children 속성을 사용한다※

- 자식 노드 중에서 요소 노드에만 접근할 수 있다.

- 3개의 p요소만 가져와 저장된 자료형 HTMLcollection 이라고 한다.

 

원하는 위치에 노드 삽입하기 - insertBefore( )함수 

- 맨 앞에 자식 노드를 추가한다.

- 첫 번째 인수는 추가 하는 노드

- 두 번째 인수는 기준이 되는 노드(자식 노드를 삽입할 위치)

 

-즉 아래에 예시문을 보면 세 번째 자식 노드를 첫 번째 자식 노드 앞에 추가 한다.

ex) 예시문

var nameList=document.querySelecter("#nameList")

nameList.insertBefore(nameList.chidlren[ 2 ], nameList.children[ 0 ])

                               추가할 노드               기준 노드

 

특정 노드 삭제하기-removeChild( )함수 parentNode속성

 

removeChild( )함수

- 부모 노드에서 자식 노드를 삭제 하는 함수

- 괄호 안에는 삭제 하는 자식 노드가 들어 간다.

 

parentNode속성

- 현재 노드의 부모 요소 노드를 반환 한다.

 

- 홍길동 이라는 텍스트가 첫 번째 p요소의 부모 요소 인것을 확인할 수 있다.

ex)예시문

document.querySelecterAll(".del")[ 0 ].parentNode

=<p>

   "홍길동"

    <span class="del">x</span>

  </p>

 

var firstDel =document.querySelecterAll(".del")[ 0 ]

var firstP=document.querySelecterAll("p")[ 0 ]

firstP.removeChild(firstDel)//p요소에서 첫 번째 요소 삭제

<span class="del">x</span>//삭제된 노드 반환