개발자로 살아남자!!!

문서에서 특정 태그 이름을 지닌 노드 찾기

- Document 객체의 getElementsByTagName()을 이용하면 전체 문서에서 매개변수 값의 엘리먼트를 찾을 수 

  있습니다.

var divs = window.document.getElementsByTagName("div");

alert("문서내의 div 엘리먼트 개수 : " + divs.length);

for (var i = 0; i < divs.length; i++) {

var div = divs.item(i);

div.style.border = "1px solid #ff0000";

}

특정노드의 자식노드에서 특정태그 이름을 지닌 노드 찾기  

- 문서 전체가 아닌 특정 노드의 자식 가운데 특정 태그 이름을 가진 엘리먼트를 찾고 싶은 경우 Document 객체의 

  메서드인 getElementsByTagName() 대신 Element 객체의 메서드인 getElementsByTagName()을 사용합니다.

var divs = window.document.getElementsByTagName("div");

var div2 = divs[2];

var div2Child = div2.getElementsByTagName("div");

for (var i = 0; i < div2Child.length; i++) {

div2Child[i].style.border = "4px solid #ff0000";

}

문서에서 특정클래스가 적용된 노드 찾기

- 태그 이름이 아닌 클래스 이름을 알고 있거나 이 클래스가 적용된 엘리먼트를 문서 전체에서 찾고 싶을 때 

   Document 객체의  getElementsByClassName

var contentData = window.document.getElementsByClassName("content_data");

for(var i = 0; i < contentData.length; i++) {

contentData[i].style.border = "4px solid #ff0000";

}

문서에서 특정 ID를 지닌 노드 찾기

- Document 객체에는 문서 전체에서 아이디(id) 값으로  특정 엘리먼트를 찾는 getElementById() 메서드를 

   제공합니다.

var header = window.document.getElementById("header");

header.style.border ="4px solid #ff0000";

자식 노드 찾기

- 자식 노드를 모두 구하고 싶을 때

- 특정 엘리먼트의 하위 노드인 자식 노드에 접근하고 싶을 때는 Node 객체의 프로퍼티인 childNodes를 

   사용하면 됩니다.

- 자식노드중 N번쨰 노드에 접근하고 싶을 때

- 하위 노드 가운데 N번째 요소에 접근하고 싶을 때는 var node = page.childNodes[N] 또는 

   node = page.childNodes.item(N) 과 같은 식으로 하면 됩니다.

- 첫번쨰 자식 노드에 바로 접근

- Node에는 firstChild 라는 프로퍼티가 있어서 이를 이용하면 자식 노드중 첫번째 자식 노드에 바로 접근할 수 있

  습니다.

-마지막 자식 노드에 바로 접근하고 싶을 때

- 마지막 자식 노드에도 lastChild 라는 프로퍼티가 있어서 이를 이용하면 바로 마지막 노드에 접근 할 수 있

   습니다.

var page = window.document.getElementById("sample_page");

var nodes = page.childNodes;

alert("#sample_page의 자식 노드 개수는? " + nodes.length);

for (var i = 0; i < nodes.length; i++) {

var node = nodes.item(i);

if (node.nodeType == 1)

node.style.border = "1px solid #ff0000";

}

var firstChild = page.firstChild;

firstChild.style.color = "#ff0000";

var lastChild = page.lastChild;

lastChild.stlye.color = "#ff0000";

부모 노드 찾기

- 특정 엘리먼트의 부모노드에 접근하고 싶을 때는 Node  객체의 기본 프로퍼티인 parentNode를 사용합니다.

var header = document.getElementById("header");

header.parentNode.style.border = "4px solid #ff0000";

형제 노드 찾기

- DOM에서는 이런 형제노드를 쉽게 찾을 수 있게 몇가지 유용한 프로퍼티를 제공합니다.

- Node 객체의 프로퍼티인 previousSibling와 nextSibling을  이용하면 앞뒤로 인접한 형제노드에 각각 접근

  할 수 있습니다.

var content = document.getElementById("content");

content.previousSibling.previousSibling.style.border = "4px solid #ff0000";

content.nextSibling.nextSibling.style.border = "4px solid #ff0000";

노드 생성 및 추가하기

- 노드를 생성하고 추가하는 방법은 세가지가 있습니다.

- Document.createElement() 메서드 사용

- HTMLElement.innerHTML 프로퍼티 사용

- Node.cloneNode() 메서드 사용

- 위 세가지 방법을 경우에 따라 적절하게 독립적으로 또는 서로 조합해서 사용하면 됩니다.

- Document.createElement() 메서드를 사용하는 경우

- 첫번째 영역에 추가하기

1. 새로 생성할 노드를 추가할 위치의 기준이 되는 엘리먼트의 첫번째 자식노드를 찾습니다.

2. createElement() 메서드를 이용해 새로운 노드를 생성합니다.

3. 새롭게 생성한 텍스트를 추가하기 위해 createTextNode() 메서드를 이용해 텍스트 노드를  생성합니다.

4. 생성한 텍스트노드를 2번에서 생성한 자식 노드로 appendChild() 메서드를 이용해 추가합니다.

5. 끝으로 page.insertBefore(추가노드, 기준노드) 함수를 이용해 #sample_page 노드의 형제노드로 

    새로 생성된 노드를 추가합니다.

- 두번쨰 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 다만 새로 생성되는 노드가 많을 경우 자식노드를 모두 만들어 준 후 새로

생성되는 노드에 추가하는 구문이 들어갑니다.

- 세번째 영역에 추가하기

첫번째와 같은 순서로 진행됩니다. 새로 생성된 노드의 위치가 #sample_page 노드의 자식 노드로 추가되고

이를 위해 insertBefore() 메서드 대신 appendChild() 메서드를 사용합니다.

- HTMLElement.innerHTML 프로퍼티를 사용하는 경우

- Element의 내부에 들어있는 모든 자식을 문자열로 담은 프로퍼티입니다.

- innerHTML 프로퍼티 기능을 사용하면 새로 추가할 노드를 DOM 메서드를 이용해 일일이 생성하지 않고 문자

  열을 만들어 대입해주기만 하면 됩니다.

- Node.cloneNode() 메서드를 사용하는 경우

- 생성하고 싶은 내용이 이미 생성되 있는 요소와 똑같거나 다소 비슷하다면 Node객체에서 제공하는 

   cloneNode() 메서드를 이용해 똑같은 노드를 복사해서 생성할 수 있습니다.

노드 삭제 하기

- 지우려는 노드를 찾은 다음 Node 객체의 메서드인 removeChild()를 호출하여 사용합니다.

노드 이동시키기

- 이미 생성된 노드를 특정 위치로 이동 시키려면 노드 생성 및 추가시 사용한 appendChild(), insertBefore()를 

   그대로 사용하면 됩니다.(이미 존재하는 경우 기존의 위치에서 삭제한 후 추가 )

텍스트 노드 생성 및 추가하기 

- 텍스트 노드는 일반 엘리먼트 노드와 성격이 달라서 생성하는 방법이 조금 다릅니다.

- 택스트 노드를 생성하려면 생성하는 기능인 팩토리 메서드로 가득찬 Document 객체의 createTextNode() 메서드

   드를 이용하면 됩니다.

텍스트 노드 내용 변경하기 

- 바꾸려는 텍스트 노드를 찾아 Node 객체의 프로퍼티인 nodeValue에 원하는 값을 대입하면 변경할 수 있습니다.

출처 : jQuery를 이용한 인터렉티브 웹콘텐츠 제작

DOM 이란?

- 웹 페이지 자체를 손수 편집하지 않고 웹 브라우저에 표시된 상태에서 웹 페이지의 특정부분을 동적으로 지우거나 

   다른 내용으로 변경하거나, 또는 글자 색과 글자크기를 바꾸고 싶을때 DOM 기능을 활용하게 됩니다.

핵심 DOM 객체소개

Node 객체

- DOM 객체 가운데 가장 최상위 객체이자 노드를 조작하기 위한 가장 기본적인 프로퍼티와 메소드가 정의돼 있

  는 Node 인터페이스를 구현한 객체입니다.

- Node 객체에서 제공하는 기능을 이용하면 노드타입을 파악하거나 부모, 형제, 그리고 자식노드를 알아내서 접

  근하거나, 자식노드를 추가, 삭제, 교체할 수 있습니다.

Element 객체

- Node 객체의 자식이므로 Node 객체가 가지고 있는 기능을 모두 사용할 수 있고, HTML과XML의 태그 노드를 

  조작하기 위한 기본적인 프로퍼티와 메서드가 포함돼 있습니다.

- 태그 기능이 담긴 프로퍼티와 속성을 알아내고 설정하는 기능과 이벤트를 추가하거나 삭제하거나 발생시키는

  기능을 합니다.

HTMLElement 객체

- Element 객체의 기능 외에도 오직 HTML 페이지의 p, div 태그와 같은 HTML 태그에서만 쓸 수있는  속성과 기

  기능이 포함돼 있습니다.

- HTMLDivElement, HTMLImageElement, HTMLBodyElement와 같은 객체의 부모객체이기도 합니다.

Document 객체

- HTML문서와 XML문서의 루트 객체로서 앨리먼트 노드와 이벤트. 속성노드, 텍스트 노드, 주석 노드까지 생성

  하는 팩토리 기능 

- id, className, tagName으로 특정노드를 찾는 기능

- 이벤트를 발생시키고 등록시키는 이벤트 등록 모델 기능

HTMLDocument 객체

- HTML 문서 전용 Document 객체입니다. 이에 따라 body와 같은 HTML 문서전용 프로퍼티와 메서드가 

   포함돼 있습니다.

- HTML 페이지 로딩 후 파싱단계에서 만들어진 html, head, body 객체를 비롯해  페이지에 작성된 태그와

   일대일로 매칭되는 모든  Node 객체를 가지고 있는 객체입니다.

Text 객체

- Node 객체의 하위 객체이며 텍스트 노드를 조작하는 기능이 포함돼 있습니다.

- 텍스트노드는 일반적으로 엘리먼트 노드의 자식노드로 존재하므로 Text 객체 역시 Element 객체의 자식 객체

   로 존재합니다.

Attribute 객체

- Node 객체의 하위 객체이며  태그의 속성 정보를 조작하는 기본 프로퍼티와 메서드가 포함돼 있습니다.

- Attribute 객체에 접근하려면 먼저 Element 객체의 프로퍼티 가운데 attribute가 어떤 객체의 인스턴스인지

   알아야 합니다.

- attributes 의 프로퍼티 객체타입은 NamedNodeMap 객체의 인스턴스로서  일종의 NodeList와 같은 

   컬렉션 객체입니다.

- 태그에 설정돼 있는 속성과 일대일 매칭되는 Attribute 객체의 인스턴스를 요소로 가지고 있습니다.

<c:forTokens>

- for문과 java.util.StringTokennizer클래스의 기능을 합친 것과 같은 기능을 제공하는 커스텀액션

- 문자열에 포함된 토큰을 분리해서 각각의 토큰에 대해 반복처리를 수행하도록 합니다.

<c:forTokens var="pet"  items ="햄스터 이구아나" delims =" " >

${pet} <BR>

</c:forTokens>

- var : 토큰을 대입할 변수 ,  items : 토큰을 포함한 문자열 , delims : 구획문자

<c:catch>

- try문과 비슷한 역할을 하는 커스텀액션

- <c:catch> 커스텀액션은 try에만 해당되므로 catch 블록은 별도록 구현해야합니다.

<c:catch var="e">

<% int result = num / num2>

나눗셈의 결과는? <% = result %>

</c:catch>

<c:if test="${e != null}" >

에러메세지 : ${e.message} 

</c:if>

<c:redirect>

- sendRedirect 메서드와 동일한 방법으로 작동하는 커스텀액션

- jsp 페이지가 아닌 웹자원과 다른 웹서버에 있는 웹자원도 호출 할 수 있습니다.

- <c:redirect>의 시작과 끝 태그사이에 <c:param>을 이용해 데이터를 넘겨줄 수 있습니다.

<c:redirect url ="www.test.com/test.jsp" >

<c:param name="test1"  value="5" />

<c:param name="test2"  value="6" />

</c:redirect>

<c:import>

- 현재의 jsp페이지에서 다른 jsp 페이지의 결과를 포함시키는 커스텀액션

- <c:redirect>와 사용법은 유사합니다.

<c:url>

- <c:set> 커스텀액션과 마찬가지로 변수의 선언에 사용되는 액션

- URL을 저장하기 위한 변수의 선언에 사용됩니다.

- <c;redirect>와 사용법은 유사합니다.

<c:out>

- 데이터를 출력할 때 사용하는 커스텀액션

- 웹브라우저에 의해 특수문자로 해석될 가능성이 있는 <,  >,  &, ', " 문자를 포함한 데이터는 이 액션을 

   이용하는 것이 좋습니다.

- 특수문자를 자동으로 이스케이프 시퀀스로 바꿔주는 기능이 있습니다.

- 이스케이프 시퀀스로 변환하기를 원치 않을 경우 escapeXml 애트리뷰트를 추가하고 값을 true로 저장하면 됩니다.

- 출력할 데이터의 디폴트값을 지정할 수 도 있습니다.

<c:set>

- 변수를 선언하고 그 변수에 초기값을 대응하는 기능 

- 선언한 변수는 익스프레션 언어의 EL식 안에서 사용이 가능합니다.(스크립팅 요소안에서는 사용불가)

- <c:set> 액션을 이용해서 선언한 변수의 값을 또 다른 변수의 초기값으로 사용가능

<c:set var = "num1"  value = "${num1+num2} />

- <c:set> 태그에 scope라는 애트리뷰트에 저장할 영역을 지정하면 저장할 데이터영역 명시 가능

<c:set var ="PRICE" value ="15000" scope="request">

<c:remove>

- <c:set>액션을 이용한 변수는 데이터영역에 저장되기 때문에 인위적으로 삭제해야 합니다.

- <c:remove> 액션은 다음과 같이 사용이 가능합니다.

1. 데이터 영역에 저장되어 있는 해당 이름의 모든 변수를 삭제하는 경우

    <c:remove var ="code" />

2. 특정영역에 저장되어 있는 해당 이름의 변수를 삭제하는 경우(scope 테그에 명시)

    <c:remove var ="code"  scope="request" />

<c:if> 

- 자바의 if문과 비슷한 역할을 하는 커스텀 액션

- 조건식은 변수 이름의 애트리뷰트값으로 지정하해야 합니다.

  <c:if test="${num1 > num2}" >

num1 이 더 크다 

 </c:if>

<c:choose>

- 자바문법의 switch문과 동일한 기능을 하는 커스텀 액션

- <c:when> 과 <c:otherwise> 라는 커스텀액션을 함께 사용합니다.

 <c:choose>

     <c:when test ="${num == 0}">

num = 0; <BR>

    <c:when test ="${num == 1}">

num = 1; <BR>

    <c:otherwise>

</c:choose>

<c:forEach>

- for문에 해당하는 기능을 제공하는 커스텀액션

<c:forEach begin ="1" end ="10">

야호 <BR>

</c:forEach>

- 반복문에 카운트 변수를 사용해야 하는 경우 (var에 카운트 변수의 이름을 지정)

<c:forEach var ="cnt" begin = "1" end = "10">

${cnt} <BR>

</c:forEach>

- 반복문에 증가치를 변경 해야 경우 (step에 증가치를 지정)

<c:forEach var ="cnt" begin = "1" end = "10" step ="2">

${cnt} <BR>

</c:forEach>

- 배열의 항목을 순서대로 출력하는 경우 (item에 배열이름을 지정하고 var에 배열의 항목을 담는 변수이름 지정)

<c:forEach var="str"  items="${arr}">

${str} <BR>

</c:forEach>

- 참고 자료 : 뇌를 자극하는 JSP & Servlet