Tutorial:DomQuery Basics(Korean)

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: DomQuery기본

Author: Bernard Chhun (번역:넥스트리 데꾸벅:techbug)

Published: 2007-11-19

Ext Version: 1.1+ / 2.0+

Languages:

English

Chinese

Korean

본 튜토리얼은 Ext의 DomQuery객체로 원하는 어떠한 DOM객체라도 가져올수 오는것을 배울수 있는 시작점이 될것이다.

1 DomQuery 기본

DomQuery 기본

DomQuery의 select 함수는 2개의 파라미터값을 갖는다. 첫번째는 선택자의 문자열이고 두번째는 만들어질 요소(query)의 id값이다. 현 튜토리얼에서는 Ext.DomQuery.select()를 Ext.query()메쏘드 축약명으로 사용할것이다.

사용하게될 html:

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar"  class="foo">
   I'm a div ==> my id: bar, my class: foo
   <span class="bar">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank">An ExtJs link</a>
  </div>
  <div id="foo" class="bar">
   my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar">I'm a span within the div with a bar class</span>
   <a href="#">An internal link</a>
  </div>
 </body>
</html>

Part 1: Element selectors

문서안에 모든 span 태그를 가져온다고 가정하자

// 이 쿼리는 문서내의 전체 spane태그를 체크하여 2개의 엘리먼트 배열값을 리턴한다.
Ext.query("span"); // [span.bar, span.bar]
// 이 쿼리는 foo라는 id값을 가진 span태그의 배열값을 리턴한다.
Ext.query("span", "foo"); // [span.bar]

첫번째 파라미터로서 일반적인 문자열값이 어떻게 사용되는지 주목하자

아이디(id) 값으로 가져오기 위해서는 "#"을 붙인다.:

// foo값을 아이디값으로 하는 div 배열값을 리턴한다.
Ext.query("#foo"); // [div#foo.bar]

클래스로 가져오기 위해서는 "."을 붙인다.:

/* 두번째 div 를 반환한다. */
Ext.query(".foo"); // [div#bar.foo]

모든 요소값을 가져오기 위해서는 "*"를 사용해도 된다:

// 현재 문서의 모든 엘리먼트들을 리턴한다..
Ext.query("*"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, div#bar.foo, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]

자식 태그를 가져오기 위해서는 2개의 선택자 사이에 공백을 삽입하면 된다:

// div태그안에 p태크를 가진 엘리먼트를 리턴한다.
Ext.query("div p"); // [p]
// div태그안의 span태그를 가진 2개의 엘리먼트 배열값을 리턴한다.
Ext.query("div span"); // [span.bar, span.bar]

3개 이상의 엘리먼트 선택자를 가진것들은 다음 매뉴얼을 참고하기 바란다. DomQuery docs :)

Part 2: Attributes selectors

엘리먼트요소의 속성값으로 해당 객체를 가져오는 방법은 아래 같다. 속성은 HTML요소에서 href, id또는 class와 같은 것이다.

// class속성을 가지는 어떤 엘리먼트가 있는지 체크하자.
// 이 쿼리는 5개의 엘리먼트 배열을 리턴한다.. 
Ext.query("*[class]"); // [body#ext-gen2.ext-gecko, div#bar.foo, span.bar, div#foo.bar, span.bar]

특정 클래스 속성을 가진것들을 검색해 보자.

// 클래스값이 "bar"와 같은 엘리먼트를 리턴한다.
Ext.query("*[class=bar]"); // [span.bar, div#foo.bar, span.bar]
 
// 클래스값이 "bar"와 같지 않은 모든 엘리먼트를 리턴한다.
Ext.query("*[class!=bar]"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, div#bar.foo, a www.extjs.com, p, a test.html#]
 
// 클래스값이 "b"로 시작되는 엘리먼트를 리턴한다.
Ext.query("*[class^=b]"); // [span.bar, div#foo.bar, span.bar]
 
// 클래스 값이 "r"로 끝나는 엘리먼트를 리턴한다.
Ext.query("*[class$=r]"); // [span.bar, div#foo.bar, span.bar]
 
// this will give all elements that has a class with the "a" substring
Ext.query("*[class*=a]"); // [span.bar, div#foo.bar, span.bar]

Part 3: CSS Value selectors

이 선택자는 DOM 엘리먼트의 style속성과 같이 사용된다.

Let's add some color into that html:

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar" class="foo" style="color:red;">
   I'm a div ==> my id: bar, my class: foo
   <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
  </div>
  <div id="foo" class="bar" style="color:fushia;">
   my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
   <a href="#" style="color:green;">An internal link</a>
  </div>
 </body>
</html>

칼라를 만드는 CSS값을 쿼리해볼것이다. 이것이 전부가 아니다. 구조는 다음과 같다:

element{attribute operator value}

// get all red text element
Ext.query("*{color=red}"); // [div#bar.foo]
 
// get all pink colored element that is a child of a red colored element
Ext.query("*{color=red} *{color=pink}"); // [span.bar]
 
// get everything except for the red text element
Ext.query("*{color!=red}"); // [html, head, script firebug.js, link, body#ext-gen2.ext-gecko, script ext-base.js, script ext-core.js, span.bar, a www.extjs.com, div#foo.bar, p, span.bar, a test.html#]
 
// get all element that has a color property starting with "yel"
Ext.query("*{color^=yel}"); // [a www.extjs.com]
 
// get all element that has a color property ending with "ow"
Ext.query("*{color$=ow}"); // [a www.extjs.com]
 
// get all element that has the "ow" substring
Ext.query("*{color*=ow}"); // [a www.extjs.com, span.bar]

Part 4: 가상클래스 선택자

We are now going to fetch nodes using this improved web page based on what I did earlier. I merely added some styling in there plus an UL element, a TABLE element and a FORM element to make use of every pseudo classes selectors.

<html>
 <head>
  <script type="text/javascript" src="../js/firebug/firebug.js"></script>
 </head>
 <body>
  <script type="text/javascript" src="../ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-core.js"></script>
  <div id="bar" class="foo" style="color:red; border: 2px dotted red; margin:5px; padding:5px;">
   I'm a div ==> my id: bar, my class: foo
   <span class="bar" style="color:pink;">I'm a span within the div with a foo class</span>
   <a href="http://www.extjs.com" target="_blank" style="color:yellow;">An ExtJs link with a blank target!</a>
  </div>
  <div id="foo" class="bar" style="color:fushia; border: 2px dotted black; margin:5px; padding:5px;">
   my id: foo, my class: bar
   <p>I'm a P tag within the foo div</p>
   <span class="bar" style="color:brown;">I'm a span within the div with a bar class</span>
   <a href="#" style="color:green;">An internal link</a>
  </div>
  <div style="border:2px dotted pink; margin:5px; padding:5px;">
   <ul>
    <li>Some choice #1</li>
    <li>Some choice #2</li>
    <li>Some choice #3</li>
    <li>Some choice #4 with a <a href="#">link</a></li>
   </ul>
   <table style="border:1px dotted black;">
    <tr style="color:pink">
     <td>1st row, 1st column</td>
     <td>1st row, 2nd column</td>
    </tr>
    <tr style="color:brown">
        <td colspan="2">2nd row, colspanned! </td>
    </tr>
    <tr>
     <td>3rd row, 1st column</td>
     <td>3rd row, 2nd column</td>
    </tr> 
   </table>
  </div>
  <div style="border:2px dotted red; margin:5px; padding:5px;">
   <form>
    <input id="chked" type="checkbox" checked/><label for="chked">I'm checked</label>
    <br /><br />
    <input id="notChked" type="checkbox" /><label for="notChked">not me brotha!</label>
   </form>
  </div>
 </body>
</html>

off we go:

//span태그의 첫번째 자식노드를 가져온다.
Ext.query("span:first-child"); // [span.bar]
 
//A태그의 마지막 자식노드를 가져온다.
Ext.query("a:last-child") // [a www.extjs.com, a test.html#]
 
//Span태그의 두번째 자식노드를 가져온다.
Ext.query("span:nth-child(2)") // [span.bar]
 
//홀수번째 TR를 가져온다. (아주 유용한듯 ^^)
Ext.query("tr:nth-child(odd)") // [tr, tr]
 
//짝수번째 LI 를 가져온다.
Ext.query("li:nth-child(even)") // [li, li]
 
//자식노드를 가진 A태크만 가져온다.
 
Ext.query("a:only-child") // [a test.html#]
 
//체크된 INPUT 태그만 가져온다.
Ext.query("input:checked") // [input#chked on]
 
//첫번째 TR
Ext.query("tr:first") // [tr]
 
//마지막 INPUT
Ext.query("input:last") // [input#notChked on]
 
//2번째 TD
Ext.query("td:nth(2)") // [td]
 
 
// within이라는 문자열을 포함한 div태크
Ext.query("div:contains(within)") // [div#bar.foo, div#foo.bar]
 
//자식노드로 form을 포함하지 않은 div태크
Ext.query("div:not(form)") [div#bar.foo, div#foo.bar, div]
 
//A태그를 가진 div태크
Ext.query("div:has(a)") // [div#bar.foo, div#foo.bar, div]
 
//다음 TD값을 가져온다.(colspan은 무시)
Ext.query("td:next(td)") // [td, td]
 
//INPUT의 선행되는 label요소를 가져온다.
Ext.query("label:prev(input)") //[label, label]