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 초보자를 위한 애플리케이션 레이아웃(2.02) (8) | 2008.02.17 |
| Extjs scope에 대한 고찰 (2) | 2008.02.17 |
| ExtJS Tutorial (1) | 2008.02.17 |