jQuery css 선택자에 접근

jQuery/DOM&jQuery 2009.10.15 16:36

jQuery에서 css 선택자 접근하기

앞선 포스트에서 $()이방법으로 선택자에 접근한다고 설명했다.괄호안은 그대상을 넣어주면된다. css파일에서 선택했을때와 차이를 비교해보자.

선택자CSSjquery
엘리먼트p$('p')
ID(아이디)#name$('#name')
class(클래스).name$('.name')
되돌아보기 :: getElementByTagName,getElementById.....
jQuery를 사용하지않을떄 그 전에는 자바스크립트에서 getElementByTagName,getElementById로 선택자에 접근했어야 했다.또클래스에 접근할 getElementByClass는 만들어 줘야했다.게다가for(var i=0; i<elementLi.length; i++)처럼 문서 전체에서 원하는것을 찾기위해 for 구문도 사용해야했다.하지만 jquery에서는 $( )으로 엘리먼트, 아이디 클래스 모두 쉽게 접근가능하다.

간단한 예제보기

$('p').addClass('nanan');
$('#happy').addClass('nanan');
$('.unhappy').addClass('nanan');

위예제는 $()로 엘리먼트p, 아이디happy, 클래스unhappy에 접근하고 addClass란 메소드드를 통해 nanan이라는 클래스를 추가하는예제이다.

또다른 jQuery의 더 좋은 점은 브라우저를 넘나들 수 있다는 점이다.

크로스 브라우징(cross browsing)

최근 css3까지 개발중인 css로 접근할때 문제점은 브라우저에 따라 지원하고 안하고 차이가 엄청나다는 점이다. 지원여부는 아래 포스팅참조

이같은 지원문제를 jquery에서는 버전 종류를 떠나 모두 가능하게 해준다.특히 문제되는 IE버전 해결에 도움이 크다.앞에서 jQuery에서는 $()로 접근한다고 설명했다. 이방법으로 IE6~7에서 지원하지 않는 것도 접근가능하게 된다.대표적으로 유사,자식선택자 등이 있겠다. CSS3를 복습할겹 예제를 보자

크로스 브라우징

인접이요

  • 자식
  • 나도 자식
  • 막내

위의 html코드에서 인접, 자식선택자로 접근해보자

$('h1 + p').메소드();/*인접선택자*/
$('#parents > li').메소드();/*자식선택자*/

위의 예제에서 첫번째는 h1엘리먼트 다음바로오는 인접한 p엘리먼트를 선택하게될것이고, 두번째는 parents란 아이디의 자식 li를 선택할것이다.

인접,자식선택자가 떠오르지않으면 아래 포스팅 참조

요약하면 jQuery를 이용하여 접근하는 방식의 장점은 두가지이다.

  • 일반적으로 자바스크립트에서 사용했던 getElementByTagName,getElementById 없이 단순하게 $()로 쉽게 접근가능하다
  • 브라우저 버전 종류를 무시하고 css의 대부분의 선택자로 접근가능하다.

마지막으로 예제 페이지http://sianasiatiger.cafe24.com/study.html


설정

트랙백

댓글

jQuery 사용한 예제

jQuery/DOM&jQuery 2009.10.13 23:21

간단한 jQuery 예졔 문서

간단한 jQuery 예졔 문서를 보자.그전에 먼저준비할 일은 다음과 같다

1.jQuery 다운
http://jquery.com/에서 다운받는다.버전별로 보려면 여기가보면 된다.http://docs.jquery.com/Downloading_jQuery
2.문서에 링크 시키기
헤더에 <script src="jquery-1.3.2.min.js"></script> 삽입.경로는 알아서

html예제 보기

목적은 내용에 border를 줄것이다. 먼저 코드를 보자

jQuery 예제

jQuery를 이용border를 준예제

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타
  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

위와 같은 코드에서 ul엘리먼트 부분에 보더를 1px줄것이다.css는 다음과 같다.

.boxing{ border:solid 1px #000;}

클래스 boxing에 보더를 주도록되어있다.하지만 html코드에 클래스가 지정되어있지않다. 이제 jquery로 클래스를 지정해주어보자

jQuery 이용하기

<script type="text/javascript"></script>에 다음을 삽입하면된다

$(document).ready(function(){
	$('ul').addClass('boxing');					   
	});

위코드는 다음과 같은 의미이다.하나하나 보자

1.$( ) :선택자 변수 광호 안에 필요한 것을 선택한다, 엘리먼트,아이디,클래스 등이되겠다. 위 예제에서는 $('ul ')으로 되어있다.이것은 엘리먼트 ul에 접근한다는 뜻이다.

2..addClass() :jquery메소드의 일종이다. 영어번역그대로 클래스를 더한다는 역할을한다.위예제에서는addClass(boxing)으로 boxing이라는 클래스를 추가가하게된다.

3. boxing이라는 클래스를 추가 했으므로 워래 html코드의 엘리먼트 ul의 클래스명이boxing이되고 css가 적용된다.

결과는 다음과 같다.

  • 뭐시기저시기
  • 어쩌고 저쩌고
  • 이렇고 저렇고
  • 기타

예제가 적용된 페이지는 여기에서보자 http://sianasiatiger.cafe24.com/study/J_document.html

이예제는 jQuery를 이용한 간단한 예제일 뿐이다.소스를 보면 알 수 있듯이 그저 boxing을 추가 해주었을 뿐이다. 이런방식으로 다른 여러가지 좋은 기능을 사용할 수 있게 된다.


설정

트랙백

댓글

jQuery 알아보는 간단한 예제

jQuery/DOM&jQuery 2009.09.03 13:55

jQuery 맛보기

일반적인 자바스크립트 방법,그리고 분리된 모습,jQuery소스를 보면서 비교해보자

일반적으로 내부에 포함된 스크립트


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

이와같은 방법은 초창기 자바스크립트가 사용되고 마구남발되었을떄 사용되던것이며(물론지금도 어쩔수 없이 사용되기도하지만) 스크립트와 html의 뒤섞여 많이 사용이반복되고 다른 코드들이있다면 혼란스러워진다 이제 분리한예제를보자

스크립트와 html분리


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

분리는되었으나 onload속성을 추가하여 바인딩되는시점을 지정했다.하지만 onload시점은 모든 소스들이 load되는 시점으로 이렇게 할경우 시간이 지연될 수 있다.

jQuery


  • 클릭하면 사라짐
  • 클릭하면 사라짐
  • 클릭하면 사라짐

무척단순함을 알수있다 코드도 짧고,사용도편리하다

jQuery를 배워야하지만 이미 자바스크립트를 조금이라도 안다면 배우기 쉽다.또한 필요한경우 반드시 소스의 내용자체를 알필요없이 pulg-in으로 이용할수 있다.(물론이전에도 소스를 복사 붙임으로 사용해왔지만 표준화되지않은 점과 간결성 등에 문제가많다)

이상 jQuery에 대한 간단한 소개였고 다음엔 사용법을 알아보자


설정

트랙백

댓글

jquery란 무엇인가?

jQuery/DOM&jQuery 2009.09.03 13:23

jquery

jQuery는 자바스크립트와 HTML 사이의 상호작용을 강조하는 경량화된 웹 애플리케이션 프레임워크이다. 존 레시그에 의해, 2006년 뉴욕 시 바캠프(Barcamp NYC)에서 릴리즈되었다.

http://jquery.com/

jQuery는 MIT 라이선스와 GNU 일반 공중 사용 허가서의 듀얼 라이선스 하의 자유 오픈 소프트웨어이다.

웹 애플리케이션 프레임워크?

웹 애플리케이션 프레임워크(framework)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스를 개발하기 쉽게 해주는 구성요소 모음이다.

주로 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이기 위해 만들어졌다. 따라서 수많은 웹 애플리케이션 프레임워크는 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드의 재사용 등을 지원하고 있다.

대표적인 프레임워크 예로 Prototype이 있다

편의성

이와같은 웹 애플리케이션 프레임워크의 개발은 편의성에있다. 일반 자바스크립트의 사용시 지정하고 함수를만들며 또 반복해서 작업하는것은 상당한 시간이소요된다. 이 자바스크립트를 일정규칙하에 패키지처럼 정해놓고 새로운 언어처럼 대신 좀더쉽게사용할 수있게하는 것이목적이다.


설정

트랙백

댓글

DOM 라운드박스 심플

jQuery/DOM&jQuery 2009.07.02 15:00
먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다.
그런데 굳이 가로가 일정치라면  그방법대로 할필요가 없다.
이번엔 가로 사이즈가 정해진경우

목적은
태그
<div id="cb>내용물</div> 여기에 앞뒤로 라운딩그림을 추가해주는것이다.
dom으로 생성할 코드는
<div id="cbbt"></div> //위 라운드박스
<div id="cb>내용물</div>
<div id="cddd"></div> //아래 라운드박스

//먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 
//두함수의 기능은
insertBefore(A, B); :B 엘레먼트앞에 A를 삽입
insertAfter(A, B);   :B 엘레먼트뒤에 A를 삽입

//먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다.
function insertAfter(newElement,targetElement) {
  var parent = targetElement.parentNode;
  if (parent.lastChild == targetElement) {
    parent.appendChild(newElement);
  } else {
    parent.insertBefore(newElement,targetElement.nextSibling);
  }
}

function displaydivision(){
     if (!document.getElementsByTagName || !document.createElement || !document.createTextNode) return false;
    // 모든 div를 검색
 var cb = document.getElementById("cb"); //cb라는id를 얻는다.
 var bottom = document.createElement("div"); //div태그생성 변수명은 bottom
 bottom.id="cbbb"; // 생성된 태그의 아이디를 cbbb로지정
 insertAfter(bottom, cb); //insertAfter을 이용해서 cb 아래에 만들어준다.

 var header = document.createElement("div");//역시 div태그 생성 변수명은 header
 header.id="cbbt"; //생성된 태그 아이디를 cbbt
 cb.parentNode.insertBefore( header, cb); // nsertBefore를 이용해서 cb위에 만들어준다.
}

설정

트랙백

댓글

dom 라운드 박스

jQuery/DOM&jQuery 2009.07.02 14:58
원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다.

의도하고자하는 기본 html는 다음과 같고
 <div class="box">
 
  <div class="bt"><div></div>
  </div>
   <div class="i1">
     <div class="i2">
       <div class="i3">sdsasd</div></div></div>

  <div class="bb"><div></div>
  </div>
</div>

사용될 html은
<div class="box">
<div class="cbb">
</div>
</div>
준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란  라운드 박스) borders.gif(양쪽 라인)이둘.

css는
.box {
margin: 15px 0 0 0;
padding: 5px 0 5px 0;
}
/* cbb 자바스크립트가 지원 안될때 */
.cbb {
margin: 0 10px 0 10px;
background: #FFF;
padding: 5px 0 5px 0;
line-height: 170%;
}

/* 메인박스 */
.cbb p, .cb p {
margin: 0;
padding: 0 5px 5px 50px;
color: #333;
}

/* Insert the custom corners and borders for browsers with sufficient JavaScript support */

.cb {
margin: 0.5em 0;
line-height: 170%;
    }

/* 상단 코너*/
.bt {
    background:url(box.png) no-repeat 100% 0 !important;
    background:url(box.gif) no-repeat 100% 0;
    margin:0 0 0 18px;
    height:27px;
    }
.bt div {
    height:27px;
    width:18px;
    position:relative;
    left:-18px;
    background:url(box.png) no-repeat 0 0 !important;
    background:url(box.gif) no-repeat 0 0;
    }

/* 하단코너*/
.bb {
    background:url(box.png) no-repeat 100% 100% !important;
    background:url(box.gif) no-repeat 100% 100%;
    margin:0 0 0 12px;
    height:14px;
    }
.bb div {
    height:14px;
    width:12px;
    position:relative;
    left:-12px;
    background:url(box.png) no-repeat 0 100% !important;
    background:url(box.gif) no-repeat 0 100%;
    }

/* 왼쪽 라인 */
.i1 {
    padding: 0 0 0 12px;
    background:url(borders.png) repeat-y 0 0 !important;
    background:url(borders.gif) repeat-y 0 0;
    }
/*오른쪽라인 */
.i2 {
    padding: 0 12px 0 0;
    background:url(borders.png) repeat-y 100% 0 !important;
    background:url(borders.gif) repeat-y 100% 0;
    }
/*내용*/
.i3 {
    background:#FFF;
border: 1px solid #FFF;
    border-width:1px 0;
    padding:0 5px;
    }

설정

트랙백

댓글

DOM 함수 addLoadEvent

jQuery/DOM&jQuery 2009.07.02 14:55

함수를 여러번 사용할때 쓰는 addLoadEvent

function A(){ }
 function B(){ }
 function C(){ }
 .
 .
 .
 function D(){ }

여러합수를 사용할때 전역 함수가 아닌 경우, 그리고 각함수에 귀찮게 이벤트핸들러를 줄필요없게 쓰는함수이다.
addLoadEvent ( 함수명);

그리고 순차적으로 실행된다.
addLoadEvent(A) ;
addLoadEvent(B) ;

코드는 다음과 같다

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}

설정

트랙백

댓글

DOM 요약

jQuery/DOM&jQuery 2008.10.22 17:40

다룰 내용

  • 노드의 개념
  • 간편한 DOM 사용법
    • getElementById, getElementsByTagName, getAttribute, setAttribute

 

1. DOM

  • D는 문서입니다.
    • 문서 객체 모델(Document Object Model)은 문서(document)가 없으면 움직이지 않음
    • 웹 문서를 만들어 웹 브라우저에 띄우는 순간 DOM이 살아 움직이기 시작합니다. 작성된 문서가 객체로 변경되기 때문임
  • O는 객체입니다.
    • 자바스크립트에는 세 종류의 객체가 있음
      • 사용자 정의 객체
      • 배열, 수학, 날짜와 같이 자바스크립트에서 이미 만들어진 객체
      • 웹 브라우저가 제공하는 주요 객체
    • 자바스크립트 초기에는 중요한 몇 가지 주요 객체들이 스크립트 제작에 사용돼었음. 그 중 가장 기본적인 것이 윈도우 객체(window object)임
    • 이러한 객체는 웹 브라우저 창 내부의 속성을 표현한 것으로 브라우저 객체 모델(BOM, Browser Object Model)이라고 부르기도 함
    • 브라우저 객체 모델은 주로 window.open이나 window.blur 같은 것을 말한다.
    • 이러한 내용은 DOM의 내용에서 벗어난 주제임. DOM은 브라우저 창 안의 웹 문서 내용을 다루는 문서(document) 객체가 대상임
  • M은 모델입니다.
    • DOM에서 사용하는 가장 중요한 규칙은 문서를 나뭇가지(tree)형 구조로 표시한다는 것임
    • 이러한 구조도는 (X)HTML에서 문서를 가장 잘 표현해주는 방법임
      1. //쇼핑 목록
      2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      3. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
      4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
        1. <head>
          1. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
          2. <title>쇼핑목록</title>
        2. </head>
        3. <body>
          1. <h1>쇼핑 목록</h1>
          2. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
          3. <ul id="purchase">
            1. <li>땅콩</li>
            2. <li>치즈</li>
            3. <li>우유</li>
          4. </ul>
        4. </body>
      5. <html>
    • [그림]기본 웹페이지의 문서 구조
    • 웹페이지 구조 표현 방식
      • doctype을 선언해 주고 난 후 문서는 <html>을 여는 것으로 시작. 웹 페이지 내의 모든 요소들이 <html>안에 있음. 즉 <html>은 모든 요소들의 부모라고 할 수 있음
      • <html> 바로 아래로 <head>와 <body>가 존재함. 이 둘은 형제 관계
      • 이런 식으로 부모/자식 관계를 맺어가는 것이 기본적인 document 구조임
      • 이러한 형태를 노드 트리라고 부른다.

2. 노드

  • 노드(node) : 어떤 연결망에서 특정 지점과 지점을 연결하는 데 표시하는 것을 말함. 네트웍은 노드의 집합을 말한다.
  • 현실 세계에서 모든 것은 원자로 구성되어 있다. 원자는 세상의 노드라고 할 수 있으며 원자보다 작은 양성자나 전자 등도 노드라고 부를수 있음
  • DOM도 마찬가지임. 문서는 노드의 집합으로, 문서라는 나무 위에 가지나 잎같은 노드를 갖고 있는 것이라 할 수 있음
  1. 요소 노드
    • DOM에서 원자와 같은것이 요소(element) 노드임
    • 앞서 쇼핑 목록 문서의 구조를 이야기 할 때<body>, <p>,  같은 요소로 표현을 했음. 요소는 웹상에서 제공되는 문서의 가장 기본적인 조각을 의미하며, 문서의 구조라 하면 이런 요소가 배열된 것을 의미함
    • 태그는 요소의 이름을 붙인 것이라고 보면 됨.
    • 요소는 다른 요소를 포함할 수 있음. 모든 <li> 요소는 <ul>요소 안에 포함되어 있음. 다른 요소에 포함되지 않는 유일한 요소는 <html>뿐이다. 이것이 문서 노드 트리의 시작이기 때문임
  2. 텍스트 노드
    • 문서가 순수하게 요소로만 구성되어 있다면 구조는 갖겠지만 내용이 없게 됨. 웹 문서에는 내용이 들어 있어야 하며, 대부분 내용은 텍스트로 제공할 수 있다.
    • 예를 들어 <p> 요소에는 "이 물건을 사는 것을 잊지 마세요."라는 내용이 들어 있음. 이것이 바로 텍스트(text) 노드
    • XHTML에서 텍스트 노드는 항상 요소 노드안에 포함됨. 하지만 모든 요소가 텍스트 노드를 포함하는 것은 아니다.
    • 예를 들어 <ul> 요소는 텍스트를 직접적으로 포함하고 있지 않고, 단지 <li> 요소만을 포함하고 있다.
  3. 속성 노드
    • 속성(attribute)이라는 것은 요소에 대한 좀더 정확한 정보를 표현할 때 사용한다. 예를 들어 title 속성을 보자면 요소가 포함하고 있는 것을 좀더 정확히 표현하는 수단으로 사용하고 있음
      1. <p title="a gentle reminder">이 물건 사는 것을 잊지 마세요.</p>
      2. // 노드 구성
      3. 요소 노드 : p
      4. 속성 노드 : title = "a gentle reminder"
      5. 텍스트 노드 : 이 물건 사는 것을 잊지 마세요
    • 모든 요소는 속성을 포함하지 않지만 모든 속성은 요소 안에 포함된다.
  4. CSS 와의 관계
    • DOM은 웹 문서의 구조와 상호 작용하는 기술 중 하나임. 그러한 기술 중에 캐스케이딩 스타일 시트(Cascading Style Sheets), 간단히 CSS는 문서의 내용을 어떻게 표시할 것인가를 나타내는 데 사용하는 방법임
    • 자바스크립트처럼 스타일은 문서의 <head>안에 <style> 태그로 선언하거나 외부 스타일 시트 파일을 포함할 수 있음. CSS를 표시하는 문법은 자바스크립트 함수와 매우 유사함
      1. // CSS 문법
      2. 선택자 {
        1. 속성 : 값;
      3. }
      4. //예를 들면 특정 색상이나 글꼴과 크기를 표현할 수 있다
      5. p {
        1. color : yellow;
        2. font-family : "arial",sans-serif;
        3. font-size : 1.2em;
      6. }
    • 상속(Inheritance)은 CSS의 가장 강력한 기능이다. DOM처럼 CSS도 역시 노드 트리로 문서 내용을 볼 수 있다. 노드 트리 안에 요소들은 그들 부모의 스타일 속성을 그대로 전달 받습니다.
      1. // 예를 들어 body 요소의 글꼴과 색상을 선언하면 body가 포함하고 있는 모든 요소에 자동 적용됨
      2. body {
        1. color : white;
        2. background-color : black;
      3. }
    • 이런식으로 전체에 동일한 스타일을 적용하지 않고 하나의 단락에만 스타일을 적용하기 위해서 클래스(class)와 아이디(id)를 지정하게 된다.
      • 클래스
        1. // class 속성은 원하는 요소에 여러 번 사용 할 수 있다
        2. <p class="special">이 단락은 특별한 내용이 있습니다.</p>
        3. <p class="special">특별한 내용을 담은 제목</p>
        4. // 스타일시트 내용은 아래와 같다
        5. .special {
          1. font-style : italic;
        6. }
        7. // 특정한 요소의 클래스를 지정해서 사용하고 싶은 경우
        8. h2.special {
          1. text-transform : uppercase;
        9. }
      • 아이디
        1. // id 속성은 웹 페이지에서 유일하게 한 번 특정 요소를 지정해서 사용할 수 있다
        2. <ul id="purchase">
        3. // 스타일 시트 내용
        4. #purchase {
          1. border : 1px solid white;
          2. background-color : #333;
          3. color : #ccc;
          4. padding : 1em;
        5. }
        6. // 특정 요소에 표함된 다른 요소들에 대한 스타일 지정
        7. #purchase li {
          1. font-weight : bold;
        8. }

 

3. getElementById

  • DOM은 이름만 봐도 역할을 알 수 있는 getElementById라는 메소드가 있음(대소문자 구별 주의)
  • 이 메소드는 문서 객체와 함께 사용할 수 있는 함수임. 함수는 항상 인수(argument)를 표시하기 위한 괄호를 써서 표헌한다. getElementById는 id, 딱 하나의 인
    수를 가짐
    1. document.getElementById(id)
    2. //id = purchase
    3. document.getElementById("purchase")
  • 이 메소드를 사용하면 HTML 문서에서 purchase라고 지정된 아이디 속성을 포함하는 단 하나의 HTML 요소를 참조하며, 이 요소는 하나의 객체가 된다.
  • 문서내의 모든 요소는 객체이며, DOM을 사용해서 이런 요소들 중 필요한 하나를 얻어낼 수 있다.

 

4. getElementsByTagName

  • getElementById 메소드를 이용해서 특정 id를 가진 문서내 요소를 찾을 수 있지만 id가 없는 요소에 전부 id를 붙일 수는 없다.
  • getElementsByTagName 메소드를 사용하면 특정 태그를 사용하는 요소들을 배열로서 얻어낼수 있다.
  • 이 함수도 역시 하나의 인수를 갖게 되는데, 인수는 바로 태그의 이름이 된다.
    1. // 기본 문법
    2. element.getElementsByTagName(tag) // element라는 사실을 이해해야 함
    3. // 예제
    4. document.getElementsByTagName("li")
    5. alert(document.getElementsByTagName("li").length);
    6. // 이렇게 하면 목록 항목의 개수를 볼수 있게 된다.
  • 불필요한 코드를 줄여보면서 반환되는 type을 확인
    1. var items = document.getElementsByTagName("li");
    2. for (var i=0: i < items.length; i++) {
      1. alert(typeof items[i]);
    3. }
    4. // 세번 object라고 경고창이 뜨게 될 것임
    5. // 특정한 요소 노드를 지정하지 않을 경우 인수에 별(*)을 넣어줄 수 있다
    6. alert(document.getElementsByTagName("*").length);
    7.  
  • 기본 문법에서 doucment가 아닌 element를 이용한 이유
    1. //document 로 문서객체를 사용하지 않고 특정 요소에 포함된 요소를 알아낼 수도 있음
    2. var shopping = document.getElementById("purchase");
    3. var items = shopping.getElementsByTagName("*");
    4. alert(items.length);
    5. for (var i=0; i < items.length; i++) {
      1. alert(typeof itmes[i]);
    6. }

 

중간 정리

  • 문서 내에 모든 요소 노드는 개체임
  • 또한 이러한 객체 하나 하나 모두 DOM이라는 마당에 세워지 저장 창고 속에 있는 메소드임
  • 재정리
    1. 문서는 트리 구조를 지닌 객체들의 모음임
    2. 요소, 속성, 텍스트 등 다양한 형식의 노드가 있다
    3. getElementById를 사용하면 특정 아이디를 가진 요소에 바로 접근할 수 있다.
    4. getElementsByTagName을 사용하면 특정 태그를 가진 요소에 바로 접근할 수 있다.
    5. 이러한 노드들은 모두 객체다.

 

5. getAttribute

  • 요소 노드에 접근하기 위해서 getElementById나 getElementsByTagName이라는 두 가지 방법을 사용함
  • 일단 원하는 요소에 접근하게 되면 각 속성 값들을 알 수 있어야 하는데, 이때 사용하는 것이 getAttribute
  • getAttribute 역시 함수로, 속성명을 인수로 갖게 된다.
    1. // 기본 문법
    2. object.getAttribute(attribute)
    3. // 예제 : <p> 요소의 title 속성을 얻는 방법
    4. var paras = document.getElementsByTagName("p");
    5. for (var i=0; i < paras.length; i++) {
      1. alert(para[i].getAttribute("title"));
    6. }
  • 위의 예제 코드를 실행하면 "a gentle reminder" 경고창이 나타남
  • 이때는 <p> 요소가 하나 있기 때문에 그러한데, 속성이 없을 경우 null이 반환된다.
    1. // null 반환의 경우를 감안해서 코드 정리
    2. var paras = document.getElementsByTagname("p");
    3. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text != null) {
        1. alert(title_text);
      3. }
    4. }
    5. // null 체크 간단하게
    6. var paras = document.getElementsByTagname("p");
    7. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text) alert(title_text); // 변수에 값이 있으면 참이고 없으면 거짓임
    8. }

 

7. setAttribute

  • 지금까지의 메소드들은 정보를 뽑아 내는 용도였음
  • setAttribute는 성격이 조금 다른데. 이것은 특정 속성 노드의 값을 바꿀 수 있다.
  • 이 메소드도 당연히 함수이므로 인수를 갖게 되고, 다른점은 인수가 두개인데, 하나는 바꾸고 싶은 속성이고, 나머지 하나는 바꿀 값이 된다.
    1. // 기본 문법
    2. object.setAttribute(attribute,value)
    3. // 예제
    4. var shopping = document.getElementById("purchases");
    5. alert(shopping.getAttribute("title"); // 빈창이나 null 
    6. shopping.setAttribute("title","a list of goods");
    7. alert(shopping.getAttribute("title"); // a list of goods
    8. // <p> 요소의 title 수정 코드
    9. var paras = document.getElementsByTagName("p");
    10. for (var i=0; i < paras.length; i++) {
      1. var title_text = paras[i].getAttribute("title");
      2. if (title_text) {
        1. paras[i].setAttribute("title", "brand new title text");
        2. alert(paras[i].getAttribute("title");
      3. }
    11. }
  •  setAttribute를 써서 값을 바꿨더라도 이런 변화를 웹브라우저의 HTML 소스보기로는 알수 없음. DOM을 통해서 이미 표시된 웹 페이지 내용을 동적으로 바꾼것이기 때문임(FF의 firebug나 IE의 IE DOM explorer를 사용하면 DOM 내용의 변화를 확인 할 수 있음)
dom

설정

트랙백

댓글

티스토리 카테고리 메뉴...

jQuery/DOM&jQuery 2008.10.01 13:36
메뉴를 보면 답답함이 느껴 질떄가 있는데...

카테고리를 보면 줄줄이 이어져있는모습..떄론 좋기도 하지만 답답하기도 하다.

이걸 자바스크립트로  대체 시켜서 바꿀순없을까 하는 생각도..

아직 내게 그정도 능력은 없지만..ㅎㅎ

설정

트랙백

댓글