블로그 이미지

카테고리

데꾸벅 (194)
Publisher (39)
Scripter (97)
Programmer (1)
Designer (30)
Integrator (18)
Pattern Searcher (4)
News (2)
강좌 및 번역 (3)

최근에 달린 댓글

Extjs 기본 DomQuery

Scripter/EXTJS / 2008. 2. 18. 19:18

extjs.com에 번역했던 글을 다시 올린다.
번역을 션찮게 해서 늘 맘에 걸려 언제 다시 가다듬어야 할텐데
원문사이트 : http://extjs.com/learn/Tutorial:DomQuery_v1.1_Basics


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">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">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">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">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]

결론

본튜토리얼은 API문서를 이용하여 만들어졌다. 단순히 실제 웹페이지에 근거한 결과를 보여주길 원했다.

DomQuery문서를 읽어보셨던 분들은 이 장을 건너띄고 다음 DomQuery advanced tutorial 를 읽어보시기 바란다.!

참고적으로 영어가 미천한 관계로 태글은 정중히 사양한다.


'Scripter > EXTJS' 카테고리의 다른 글

Extjs Template 사용하기  (0) 2008.02.18
Extjs 단축키 지정  (0) 2008.02.18
Extjs 기본 DomQuery  (0) 2008.02.18
Extjs 초보자를 위한 애플리케이션 레이아웃(2.02)  (8) 2008.02.17
Extjs scope에 대한 고찰  (2) 2008.02.17
ExtJS Tutorial  (1) 2008.02.17
Post by 넥스트리소프트 데꾸벅(techbug)

댓글을 달아 주세요