이번엔 JS를 함에 있어 가장 핵심적인 요소인 Element에 대해 공부해 보도록 하겠습니다.

엘리먼트는 HTML DOM을 이루고 있는 각각의 원소입니다.

HTML도 엘리먼트이고 DIV, P, H1, A, INPUT 같은 모든 구성 요소가 엘리먼트입니다.

Element 사용 예제 ———————————————————————————–

[code]<div id=”message” class=””></div>[/code]
[code]// message라는 id를 가진 엘리먼트에 read라는 클래스명을 추가
$(‘message’).addClassName(‘read’);
// -> div#message

// 다음과 같은 방법으로 read 클래스명을 토글(이미 존재할경우 제거, 없을 경우 추가)할 수 있음
Element.toggleClassName(‘message’, ‘read’);
// -> div#message[/code]

거의 대부분의 Element 내부의 메서드들은 해당 Element를 반환합니다. 그러므로 다음과 같이 메서드를 연달아 사용할 수 있습니다.

[code]$(‘message’).addClassName(‘read’).update(‘I read this message!’).setStyle({opacity: 0.5});[/code]

Element 생성자 사용하기 ——————————————————————————————-

[code]new Element(tagName[, attributes])[/code]

위의 명령어를 통해 좀더 친숙하게 엘리먼트를 생성할 수 있습니다. 손쉽게 속성을 부여할 수 있으며 확장된 엘리먼트가 반환되기 때문에 다른 메서드를 추가적으로 연달아 사용할 수 있습니다.

내부에서는 Element의 writeAttribute 메서드를 사용하여 속성을 추가합니다.

기존의 엘리먼트를 생성하기 위한 방법은 다음과 같았습니다.

[code]var a = document.createElement(‘a’);
a.setAttribute(‘class’, ‘foo’);
a.setAttribute(‘href’, ‘/foo.html’);
a.appendChild(document.createTextNode(“Next page”));[/code]
하지만 다음과 같은 1.6에서 제공하는 새로운 방법으로 편리하게 생성 할 수 있습니다.

[code]var a = new Element(‘a’, { ‘class’: ‘foo’, href: ‘/foo.html’ }).update(“Next page”);[/code]

new Element를 하면 어떤일이 일어나는 것일까요? 너무 궁금한 나머지 소스를 봤습니다.

[code]// 함수를 만들어 window를 인자로 call함. 함수내의 this는 window가 됨. 즉시 실행
(function() {
  // 지금까지 만들어진 Element 요소를 백업
  var element = this.Element;
  // Element에 함수를 정의
  this.Element = function(tagName, attributes) {
    // attribute 가 존재하면 대입, 없으면 빈 객체 대입
    attributes = attributes || { };
    // tagName을 소문자로 변경
    tagName = tagName.toLowerCase();
    // Element.cache안의 내용을 cache에 대입
    var cache = Element.cache;
    // 브라우저가 IE이고 속성값에 name이 있을경우
    if (Prototype.Browser.IE && attributes.name) {
      // tagName을 <태그 name=name속성> 같이 변경함
      tagName = ‘<‘ + tagName + ‘ name=”‘ + attributes.name + ‘”>’;
      // name 속성은 제거
      delete attributes.name;
      // 엘리먼트 객체 생성, 속성을 추가하여 반환
      return Element.writeAttribute(document.createElement(tagName), attributes);
    }
    // cache[tagName]이 존재하지 않는다면 엘리먼트를 생성하여 cache[tagName]에 담음
    if (!cache[tagName]) cache[tagName] = Element.extend(document.createElement(tagName));
    // cache[tagName]안의 엘리먼트 객체를 복사하여 속성을 추가하여 반환함
    return Element.writeAttribute(cache[tagName].cloneNode(false), attributes);
  };
  // 기존에 백업해 놨던 element를 상속 없으면 빈 객체
  Object.extend(this.Element, element || { });
}).call(window);

// 캐시 초기화
Element.cache = { };[/code]

여기서 알 수 있는것은 IE를 제외한 브라우저에서는 앨리먼트를 최초 생성할때 cache에 저장해 두었다가 똑같은 tagName을 생성할때는 cache에 저장된 객체에서 복사해서 사용한다는 것입니다.

이는 document.createElement가 cloneNode보다 느리기 때문이라 생각됩니다. 그렇기에 최초 생성될때에 cache에 담아놨다가 계속 재사용 할려는 것이겠지요.

그나저나 IE에서는 엘리먼트 추가후에 name속성을 부여하는것에 문제라도 있는것일까요? 왜 저런 희안한 방법을 쓰는것일까요?

아무튼 IE에서는 캐시를 하지 않는군요.

Element Methods ————————————————————————————————–

absolutize : 페이지 레이아웃을 바꾸지 않으며 CSS position을 absolute로 바꾸어 줍니다.
[code]absolutize(element) -> HTMLElement[/code]

addClassName : 엘리먼트에 CSS 클래스를 추가합니다.
[code]addClassName(element, className) -> HTMLElement[/code]
예제)
[code]<div id=”mutsu” class=”apple fruit”></div>[/code]
[code]$(‘mutsu’).addClassName(‘food’)
$(‘mutsu’).className
// -> ‘apple fruit food’
$(‘mutsu’).classNames()
// -> [‘apple’, ‘fruit’, ‘food’][/code]

addMethods : 현재의 Element 클래스에 메서드를 추가합니다.
[code]addMethods([methods])
addMethods(tagName, methods)[/code]
$() 함수를 사용하여 엘리먼트의 메서드를 수행할 경우에는 다음과 실행 하게 됩니다.
[code]$(element).myOwnMethod([args…])[/code]
이는 기본적으로 다음과 동일하게 작동합니다.
[code]Element.myOwnMethod(element|id[, args…]);[/code]
$()함수를 사용하면 첫번째 인자로 엘리먼트가 들어가는것을 알 수 있습니다.
[code]var myVeryOwnElementMethods = {
  myFirstMethod: function(element[, args…]){
    element = $(element);
    // 특정한 작업
  },
  mySecondMethod: function(element[, args…]){
    element = $(element);
    // 또다른 작업
  }
};

Element.addMethods(myVeryOwnElementMethods);[/code]
다음과 같이 특정 태그에만 메서드를 추가할 수도 있습니다. 2개 이상일 경우에는 Array형태로 태그리스트를 입력합니다.
[code]Element.addMethods(‘DIV’, my_div_methods);
Element.addMethods([‘DIV’, ‘SPAN’], my_div_methods);[/code]
같은 이름의 메서드를 두번 정의할 경우 자동으로 오버라이딩 됩니다.
예제)
[code]Element.addMethods({
  wrap: function(element, tagName) {
    element = $(element);
    var wrapper = document.createElement(‘tagName’);
    element.parentNode.replaceChild(wrapper, element);
    wrapper.appendChild(element);
    return Element.extend(wrapper);
  }
});[/code]
[code]// 이전 HTML
<p id=”first”>Some content…</p>[/code]
[code]$(element).wrap(‘div’);
// -> HTMLElement (div)[/code]
[code]// 이후 HTML
<div><p id=”first”>Some content…</p></div>[/code]
위에서 알 수 있듯이 Element.extend를 사용하면 다른 Element 메서드를 추가적으로 연쇄적으로 사용할 수 있게 됩니다.
[code]$(element).wrap(‘div’).setStyle({backgroundImage: ‘url(images/rounded-corner.png) top left’});[/code]

adjacent : 셀렉터를 이용해 같은 뎁스, 형제(Siblings)에서 매칭되는 엘리먼트를 반환합니다.
[code]Element.adjacent(element[, selectors…]) -> [HTMLElement…]
someElement.adjacent([selectors…]) -> [HTMLElement…][/code]
예제)
[code]<ul id=”cities”>
<li class=”us” id=”nyc”>New York</li>
<li class=”uk” id=”lon”>London</li>
<li class=”us” id=”chi”>Chicago</li>
<li class=”jp” id=”tok”>Tokyo</li>
<li class=”us” id=”la”>Los Angeles</li>
<li class=”us” id=”aus”>Austin</li>
</ul>[/code]
[code]$(‘nyc’).adjacent(‘li.us’);
//-> [<li#chi, li#la, li#aus>][/code]
셀렉터 “li.us”는 태그명이 li면서 클래스명에 us가 있는 엘리먼트를 찾으라는 뜻입니다.

ancestors : 인자로 입력한 엘리먼트의 부모, 그리고 그의 부모.. 재귀함수를 돌며 최상위까지의 리스트를 반환합니다.
[code]ancestors(element) -> [HTMLElement…][/code]
예제)
[code]<html>
  […]
  <body>
    <div id=”father”>
      <div id=”kid”>
      </div>
    </div>
  </body>
</html>[/code]
[code]$(‘kid’).ancestors();
// -> [div#father, body, html]
// body와 html도 엘리먼트임으로 결과물에 포함됨

document.getElementsByTagName(‘html’)[0].ancestors();
// -> []
// 최상위 엘리먼트이므로 빈 배열 반환[/code]

childElements : 엘리먼트의 확장된(Element.extend) 자식 엘리먼트들을 반환합니다.
[code]childElements(element) -> [HTMLElement…][/code]
예제)
[code]<div id=”australopithecus”>
  <div id=”homo-erectus”>
    <div id=”homo-neanderthalensis”></div>
    <div id=”homo-sapiens”></div>
  </div>
</div>[/code]
[code]$(‘australopithecus’).childElements();
// -> [div#homo-erectus]
$(‘homo-erectus’).childElements();
// -> [div#homo-neanderthalensis, div#homo-sapiens]
$(‘homo-sapiens’).childElements();
// -> [][/code]

cleanWhitespace : 모든 공백만을 가지고 있는 텍스트 노드를 제거합니다.
[code]cleanWhitespace(element) -> HTMLElement[/code]
이 메서드는 생각보다 꽤 중요합니다. 하지만 많은 분들이 간과하고 있습니다. Element.up, Element.down, Element.next, Element.previous 등의 메서드를 사용하여 엘리먼트 노드에 접근할때 중간에 원치 않는 공백 텍스트 노드가 반환될 수 있습니다.
이를 효과적으로 보완할 수 있습니다.
예제)
[code]<ul id=”apples”>
  <li>Mutsu</li>
  <li>McIntosh</li>
  <li>Ida Red</li>
</ul>[/code]
[code]var element = $(‘apples’);
element.firstChild.innerHTML;
// -> undefined[/code]
왜 undefined가 나왔을까요? 이는 ‘apples’ 엘리먼트의 첫번째 자식노드를 <li>Mutsu</li>가 되지 못하고 줄바꿈 및 앞의 공백인 텍스트 노드가 된것입니다.
[code]element.cleanWhitespace();[/code]
위의 메서드를 실행하면 실제 DOM의 모습은 다음과 같이 변하게 됩니다.
[code]<UL id=”apples”><LI>Mutsu</LI><LI>McIntosh</LI><LI>Ida Red</LI></UL>[/code]
모든 공백이 제거된 후 다시 실행해 보면 원하는 결과를 보여주게 됩니다.
[code]element.firstChild.innerHTML;
// -> ‘Mutsu'[/code]

clonePosition : 소스 엘리먼트의 포지션 및 크기 정보(Left, Top, Width, Height)를 복제 합니다.
[code]clonePosition(element, source[, options]) -> HTMLElement[/code]
CSS position 정보에 상관없이 모든 위치 및 크기 정보를 정확하게 복제합니다.
각각의 정보별로 복제 여부를 결정 할 수 있으며 해당 옵션은 다음과 같습니다.

옵션)
[code]setLeft(true), setTop(true), setWidth(true), setHeight(true), offsetLeft(0), offsetTop(0)[/code]

cumulativeOffset : 문서의 top left 에서의 거리를 반환합니다.
[code]cumulativeOffset(element) -> [Number, Number] 혹은 { left: Number, top: Number }[/code]
모든 부모들의 Offset을 누적 계산하여 결과를 반환합니다. Safari 브라우저의 경우 absolute인 엘리먼트의 마진 계산이 제대로 되지 않는 문제가 있습니다. 속도를 위해 KHTML/WebKit에서만 사용하길 권장합니다.

cumulativeScrollOffset : 모든 부모 엘리먼트로부터의 스크롤된 위치를 계산한 결과를 반환합니다.
[code]cumulativeScrollOffset(element) -> [Number, Number] 혹은 { left: Number, top: Number }[/code]
소스)
[code]cumulativeScrollOffset: function(element) {
  // Top, Left 값 0으로 초기화
  var valueT = 0, valueL = 0;
  do {
    // 엘리먼트의 스크롤된 위치값 더함
    valueT += element.scrollTop  || 0;
    valueL += element.scrollLeft || 0;
    // 부모 엘리먼트 노드로 이동
    element = element.parentNode;
  // 부모 엘리먼트가 존재할 경우 do 순환
  } while (element);
  // 배열 및 Object형태의 결과 반환
  return Element._returnOffset(valueL, valueT);
}[/code]
[code]Element._returnOffset = function(l, t) {
  var result = [l, t];
  result.left = l;
  result.top = t;
  return result;
};[/code]
아름답게 결과를 반환하는 모습입니다. 저런 사용자를 위한 모습 보기 좋습니다^^

descendantOf : 인자로 입력된 id를 가진 엘리먼트가 부모중에 있는지 확인하려 참/거짓으로 결과를 반환합니다.
[code]descendantOf(element, ancestor) -> Boolean[/code]
예제)
[code]<div id=”australopithecus”>
  <div id=”homo-herectus”>
    <div id=”homo-sapiens”></div>
  </div>
</div>[/code]
[code]$(‘homo-sapiens’).descendantOf(‘australopithecus’);
// -> true
$(‘homo-herectus’).descendantOf(‘homo-sapiens’);
// -> false[/code]

descendants : 텍스트 노드를 무시한 모든 자식 엘리먼트를 반환합니다.
[code]descendants(element) -> [HTMLElement…][/code]
예제)
[code]<div id=”australopithecus”>
  <div id=”homo-herectus”>
    <div id=”homo-neanderthalensis”></div>
    <div id=”homo-sapiens”></div>
  </div>
</div>[/code]
[code]$(‘australopithecus’).descendants();
// -> [div#homo-herectus, div#homo-neanderthalensis, div#homo-sapiens]
$(‘homo-sapiens’).descendants();
// -> [][/code]

down : 텍스트 노드를 무시하고 하위 엘리먼트 노드를 반환합니다.
[code]down(element[, cssRule][, index = 0]) -> HTMLElement | undefined[/code]
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <ul>
      <li id=”golden-delicious”>Golden Delicious</li>
      <li id=”mutsu” class=”yummy”>Mutsu</li>
      <li id=”mcintosh” class=”yummy”>McIntosh</li>
      <li id=”ida-red”>Ida Red</li>
    </ul>
  </li>
</ul>[/code]
[code]$(‘fruits’).down();
// 아래와 동일
$(‘fruits’).down(0);
// -> li#apple
$(‘fruits’).down(3);
// -> li#golden-delicious
$(‘apples’).down(‘li’);
// -> li#golden-delicious
$(‘apples’).down(‘li.yummy’);
// -> li#mutsu
$(‘fruits’).down(‘.yummy’, 1);
// -> li#mcintosh
$(‘fruits’).down(99);
// -> undefined[/code]

empty : 공백의 텍스트 노드를 포함한 엘리먼트의 자식 노드가 없을 경우 참, 있을 경우 거짓을 반환합니다.
[code]empty(element) -> Boolean[/code]
예제)
[code]<div id=”wallet”> </div>
<div id=”cart”>full!</div>[/code]
[code]$(‘wallet’).empty();
// -> true
$(‘cart’).empty();
// -> false[/code]

extend : 엘리먼트를 확장합니다. Element.Methods, Element.Methods.Simulated를 상속받으며 엘리먼트가 input이나 textarea, select 태그일 경우 그에 맞는 Form.Element.Methods를 상속합니다. 엘리먼트가 form 태그라면 이는 마찬가지로 Form.Methods를 상속합니다.
[code]extend(element)[/code]
이 메서드는 마법과 같습니다. 모든 엘리먼트에 Prototype의 확장된 기능을 부여합니다. 하지만 실제로 잘 쓰이지 않죠. 이 메서드는 $()와 $$()같은 유틸리티 메서드에서부터 모든 Element 클래스의 메서드 내부에서 활용됩니다. Prototype을 사용하고 있다면 빈번하게 엘리먼트의 상속이 일어나고 있는것이죠.

상속을 받은 엘리먼트는 다음과 같이 바로 추가된 메서드를 사용할 수 있습니다.
[code]element.update(‘hello world’);[/code]

fire : 이녀석은 정말 멋진 녀석입니다. 미리 생성해둔 이벤트를 내가 원하는 시점에 수행할 수 있습니다.
[code]fire(eventName[, memo]) -> Event[/code]
예제)
[code]document.observe(“widget:frobbed”, function(event) {
  console.log(“Element with ID (” + event.target.id +    “) frobbed widget #” + event.memo.widgetNumber + “.”);
});

var someNode = $(‘foo’);
someNode.fire(“widget:frobbed”, { widgetNumber: 19 });
//-> “Element with ID (foo) frobbed widget #19.”[/code]
위의 코드는 다음과 같은 순서로 실행됩니다.

1. ‘widget:frobbed’이라는 이름의 이벤트가 정의됨
2. ‘foo’라는 id를 가진 엘리먼트를 가져옴
3. fire 메서드를 이용해 ‘widget:frobbed’ 이벤트를 실행함. 이때 widgetNumber라는 메모를 담아 실행
4. 기존에 정의해둔 이벤트가 수행됨
5. event인자를 사용해 target뿐만 아니라 memo에 이벤트 호출시에 지정한 widgetNumber까지 사용 가능

주의 사항으로 Native DOM Event 네이밍 때문에 충돌을 피하기 위해 콜론(:)을 사용하여 이벤트명을 작명할것을 권고하고 있습니다.

firstDescendant : 첫번째 자식 엘리먼트를 반환합니다. 공백 텍스트 노드를 제외한 모든 엘리먼트가 해당됩니다.
[code]firstDescendant(element) -> HTMLElement[/code]
예제)
[code]<div id=”australopithecus”>
  <div id=”homo-herectus”><!– Latin is super –>
    <div id=”homo-neanderthalensis”></div>
    <div id=”homo-sapiens”></div>
  </div>
</div>[/code]
[code]$(‘australopithecus’).firstDescendant();
// -> div#homo-herectus
$(‘homo-herectus’).firstChild;
// -> 주석 노드 “Latin is super”
$(‘homo-herectus’).firstDescendant();
// -> div#homo-neanderthalensis[/code]

getDimensions : 엘리먼트의 가로, 세로 크기를 반환합니다.
[code]getDimensions(element) -> {height: Number, width: Number}[/code]
예제)
[code]<div id=”rectangle” style=”font-size: 10px; width: 20em; height: 10em”></div>[/code]
[code]var dimensions = $(‘rectangle’).getDimensions();
// -> {width: 200, height: 100}
dimensions.width; // -> 200
dimensions.height; // -> 100[/code]
가로나 세로의 값만 알고 싶을경우에는 getWidth, getHeight 메서드를 사용하시면 더 간단합니다.

getHeight : 엘리먼트의 세로 크기를 반환합니다.
[code]getHeight(element) -> Number[/code]
예제)
[code]<div id=”rectangle” style=”font-size: 10px; width: 20em; height: 10em”></div>[/code]
[code]$(‘rectangle’).getHeight();
// -> 100[/code]

getOffsetParent : 가장 가까운 위치상의 부모 엘리먼트를 반환합니다.
[code]getOffsetParent(element) -> HTMLElement[/code]
가장 가까운 부모 엘리먼트가 존재하지 않을 경우 body 엘리먼트가 반환됩니다.

getStyle : 엘리먼트의 CSS 프로퍼티를 반환합니다. 하이픈(-)은 낙타등 표기법으로 변경하여 사용합니다.
[code]getStyle(element, property) -> String | null[/code]
IE의 경우 설정값 그대로를 반환하지만 그 외의 브라우저들은 계산된 값을 반환합니다. float와 opacity값은 0에서 1까지의 소수점의 값으로 표시됩니다. width, height와 같은 값은 auto로 지정되어있더라도 계산할 수 있는 값이라면 계산된 결과값이 반환됩니다.
[code]$(element).getStyle(‘font-size’);
// 다음과 동일
$(element).getStyle(‘fontSize’);
// -> ’12px'[/code]
예제)
[code]<style>
  #test {
    font-size: 12px;
    margin-left: 1em;
  }
</style>
<div id=”test”></div>[/code]
[code]$(‘test’).getStyle(‘margin-left’);
// -> IE 에서는 ‘1em’,
// -> 다른 브라우저들은 ’12px'[/code]

getWidth : 엘리먼트의 가로 크기를 반환합니다.
[code]getWidth(element) -> Number[/code]
예제)
[code]<div id=”rectangle” style=”font-size: 10px; width: 20em; height: 10em”></div>[/code]
[code]$(‘rectangle’).getWidth();
// -> 200[/code]

hasClassName : 엘리먼트가 CSS 클래스명을 가지고 있는지 확인합니다.
[code]hasClassName(element, className) -> Boolean[/code]
예제)
[code]<div id=”mutsu” class=”apple fruit food”></div>[/code]
[code]$(‘mutsu’).hasClassName(‘fruit’);
// -> true

$(‘mutsu’).hasClassName(‘vegetable’);
// -> false[/code]

hide : 엘리먼트를 숨깁니다.
[code]hide(element) -> HTMLElement[/code]
예제)
[code]<div id=”error-message”></div>[/code]
[code]$(‘error-message’).hide();
// -> HTMLElement (and hides div#error-message)[/code]

다음과 같은 방법으로 한번에 여러 엘리먼트를 감출 수 있습니다.
[code][‘content’, ‘navigation’, ‘footer’].each(Element.hide);
// -> [‘content’, ‘navigation’, ‘footer’]
// #content, #navigation, #footer 가 숨겨짐[/code]
혹은 다음과 같은 더 좋은 방법이 있습니다.
[code]$(‘content’, ‘navigation’, ‘footer’).invoke(‘hide’);
// -> [HTMLElement, HTMLElement, HTMLElement] (#content, #navigation and #footer)
// #content, #navigation, #footer가 숨겨짐[/code]

identify : 엘리먼트의 id가 존재할경우에는 그 id를 반환하며 없을 경우에는 자동으로 id를 생성합니다.
[code]identify(element) -> id[/code]
예제)
기존 HTML
[code]<ul>
  <li id=”apple”>apple</li>
  <li>orange</li>
</ul>[/code]
자바스크립트
[code]$(‘apple’).identify();
// -> ‘apple’
$(‘apple’).next().identify();
// -> ‘anonymous_element_1′[/code]
이후 HTML
[code]<ul>
  <li id=”apple”>apple</li>
  <li id=”anonymous_element_1″>orange</li>
</ul>[/code]

insert : 엘리먼트에 다른 엘리먼트를 추가로 삽입합니다. position(before, after, top, bottom) 값을 인자로 추가할 수 있습니다.
[code]insert(element, { position: content }) -> HTMLElement
insert(element, content) -> HTMLElement[/code]
position이 지정되지 않는다면 기본적으로 bottom으로 삽입 됩니다.

inspect : 엘리먼트를 문자열로 다시 보여줍니다. 디버깅에 사용 될 수 있습니다.
[code]inspect(element) -> String[/code]
예제)
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mutsu” class=”yummy apple”>Mutsu</li>
  <li id=”mcintosh” class=”yummy”>McIntosh</li>
  <li</li>
</ul>[/code]
[code]$(‘golden-delicious’).inspect();
// -> ‘<li id=”golden-delicious”>’
$(‘mutsu’).inspect();
// -> ‘<li id=”mutsu” class=”yummy apple”>’
$(‘mutsu’).next().inspect();
// -> ‘<li>’ [/code]
예제에서 알 수 있듯이 태그에 있는 오타로 인해 DOM이 제대로 생성되지 못한것을 확인할 수 있습니다.

makeClipping : 보이는 영역을 엘리먼트의 가로, 세로 크기에 한정 시킵니다.
[code]makeClipping(element) -> HTMLElement[/code]
예제)
[code]<div id=”framer”>
  <img src=”/assets/2007/1/14/chairs.jpg” alt=”example” />
</div>[/code]
[code]$(‘framer’).makeClipping().setStyle({width: ‘100px’, height: ‘100px’});
// -> HTMLElement[/code]
결과 확인은 여기에서

makePositioned : 엘리먼트의 position이 static이거나 지정이 안되어있는 경우 relative로 바꿔 존재감을 부여합니다.
[code]makePositioned(element) -> HTMLElement[/code]
예제)
[code]<p>lorem […]</p>
<div id=”container”>
  <div id=”element” style=”position: absolute; top: 20px; left: 20px;”></div>
</div>[/code]

[code]$(‘container’).makePositioned();
// -> HTMLElement[/code]

match : CSS 셀렉터를 사용하여 해당 엘리먼트가 조건에 맞는지 확인합니다.
[code]match(element, selector) -> Boolean[/code]
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <ul>
      <li id=”golden-delicious”>Golden Delicious</li>
      <li id=”mutsu” class=”yummy”>Mutsu</li>
      <li id=”mcintosh” class=”yummy”>McIntosh</li>
      <li id=”ida-red”>Ida Red</li>
    </ul>
  </li>
</ul>[/code]
[code]$(‘fruits’).match(‘ul’);
// -> true
$(‘mcintosh’).match(‘li#mcintosh.yummy’);
// -> true
$(‘fruits’).match(‘p’);
// -> false[/code]

next : 같은 뎁스에 존재하는 다음 형제 엘리먼트를 반환합니다.
[code]next(element[, cssRule][, index = 0]) -> HTMLElement | undefined[/code]
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <h3 id=”title”>Apples</h3>
    <ul id=”list-of-apples”>
      <li id=”golden-delicious”>Golden Delicious</li>
      <li id=”mutsu”>Mutsu</li>
      <li id=”mcintosh” class=”yummy”>McIntosh</li>
      <li id=”ida-red” class=”yummy”>Ida Red</li>
    </ul>
    <p id=”saying”>An apple a day keeps the doctor away.</p>
  </li>
</ul>[/code]
[code]$(‘list-of-apples’).next();
// 다음과 동일
$(‘list-of-apples’).next(0);
// -> p#sayings
$(‘title’).next(1);
// -> ul#list-of-apples
$(‘title’).next(‘p’);
// -> p#sayings
$(‘golden-delicious’).next(‘.yummy’);
// -> li#mcintosh
$(‘golden-delicious’).next(‘.yummy’, 1);
// -> li#ida-red
$(‘ida-red’).next();
// -> undefined[/code]

nextSiblings : 현재 엘리먼트의 모든 다음 형제 노드의 엘리먼트를 반환합니다.
[code]nextSiblings(element) -> [HTMLElement…][/code]
예제)
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mutsu”>Mutsu</li>
  <li id=”mcintosh”>McIntosh</li>
  <li id=”ida-red”>Ida Red</li>
</ul>[/code]
[code]$(‘mutsu’).nextSiblings();
// -> [li#mcintosh, li#ida-red]
$(‘ida-red’).nextSiblings();
// -> [][/code]

observe : Event.observe와 동일합니다. 엘리먼트에 이벤트 핸들러를 등록합니다.
[code]observe(element, eventName, handler[, useCapture = false]) -> HTMLElement[/code]
예제)
[code]$(element).observe(‘click’, function(event){
alert(Event.element(event).innerHTML);
});
// -> HTMLElement.
// 엘리먼트를 클릭할때 innerHTML값을 Alert창으로 띄움[/code]

positionedOffset : 가장 가까운 위치상의 부모 엘리먼트와의 상대적인 거리를 반환합니다.
[code]positionedOffset(element) -> [Number, Number] 또는 { left: Number, top: Number }[/code]
이 메서드는 getOffsetParent 메서드와 매우 비슷합니다. 하지만 getOffsetParent는 위치상의 부모 엘리먼트를 가져오는 반면 이 메서드는 그 부모와의 거리를 계산하여 결과값을 반환합니다.

previous : 같은 뎁스에 존재하는 이전 형제 엘리먼트를 반환합니다.
[code]previous(element[, cssRule][, index = 0]) -> HTMLElement | undefined[/code]
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <h3>Apples</h3>
    <ul id=”list-of-apples”>
      <li id=”golden-delicious” class=”yummy”>Golden Delicious</li>
      <li id=”mutsu” class=”yummy”>Mutsu</li>
      <li id=”mcintosh”>McIntosh</li>
      <li id=”ida-red”>Ida Red</li>
    </ul>
    <p id=”saying”>An apple a day keeps the doctor away.</p>
  </li>
</ul>[/code]
[code]$(‘saying’).previous();
// 다음과 동일
$(‘saying’).previous(0);
// -> ul#list-of-apples
$(‘saying’).previous(1);
// -> h3
$(‘saying’).previous(‘h3’);
// -> h3
$(‘ida-red’).previous(‘.yummy’);
// -> li#mutsu
$(‘ida-red’).previous(‘.yummy’, 1);
// -> li#golden-delicious
$(‘ida-red’).previous(5);
// -> undefined[/code]

previousSiblings : 같은 뎁스의 모든 이전 형제 엘리먼트들을 반환합니다.
[code]previousSiblings(element) -> [HTMLElement…][/code]
예제)
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mutsu”>Mutsu</li>
  <li id=”mcintosh”>McIntosh</li>
  <li id=”ida-red”>Ida Red</li>
</ul>[/code]
[code]$(‘mcintosh’).previousSiblings();
// -> [li#mutsu, li#golden-delicious]
$(‘golden-delicious’).previousSiblings();
// -> [][/code]

readAttribute : 엘리먼트의 속성을 반환합니다. 속성이 없을 경우 null을 반환합니다.
[code]readAttribute(element, attribute) -> String | null[/code]
예제)
[code]<a id=”tag” href=”/tags/prototype” rel=”tag” title=”view related bookmarks.” my_widget=”some info.”>Prototype</a>[/code]
[code]$(‘tag’).readAttribute(‘href’);
// -> ‘/tags/prototype’
$(‘tag’).readAttribute(‘title’);
// -> ‘view related bookmarks.’
$(‘tag’).readAttribute(‘my_widget’);
// -> ‘some info.'[/code]

recursivelyCollect : 인자로 넣어준 프로퍼티를 따라 순환하며 모든 엘리먼트를 반환합니다.
[code]recursivelyCollect(element, property) -> [HTMLElement…][/code]
이 메서드는 Element.ancestors, Element.descendants, Element.nextSiblings, Element.previousSiblings, Element.siblings에서 내부적으로 사용되는 메서드입니다. DOM 노드간의 탐험과 동시에 수집을 하여 결과를 반환합니다.
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <ul id=”list-of-apples”>
      <li id=”golden-delicious”><p>Golden Delicious</p></li>
      <li id=”mutsu”>Mutsu</li>
      <li id=”mcintosh”>McIntosh</li>
      <li id=”ida-red”>Ida Red</li>
    </ul>
  </li>
</ul>[/code]
[code]$(‘fruits’).recursivelyCollect(‘firstChild’);
// -> [li#apples, ul#list-of-apples, li#golden-delicious, p][/code]

relativize : 엘리먼트의 위치를 유지하면서 position 프로퍼티를 relative로 변경합니다.
[code]relativize(element) -> HTMLElement[/code]

remove : 엘리먼트를 완벽하게 삭제합니다.
[code]remove(element) -> HTMLElement[/code]
여기서 신기한점은 remove를 하였는데 삭제된 엘리먼트가 반환된다는 점이고, 그것을 변수에 담는다면 실제로 메모리에서 소거되지 않고 계속 살아게 됩니다. 결국 그것을 insert나 appendChild로 다시 붙이게 된다면 죽지않고 살아나게 됩니다. 삭제의 개념이 조금 모호 한거 같습니다; 연결된 링크를 해제한다고 보는것이 맞겠네요.
예제)
이전 HTML
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mutsu”>Mutsu</li>
  <li id=”mcintosh”>McIntosh</li>
  <li id=”ida-red”>Ida Red</li>
</ul>[/code]

자바스크립트
[code]$(‘mutsu’).remove();
// -> HTMLElement (li#mutsu 삭제됨)[/code]

이후 HTML
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mcintosh”>McIntosh</li>
  <li id=”ida-red”>Ida Red</li>
</ul>[/code]

removeClassName : CSS 클래스중에 원하는것만 삭제합니다.
[code]removeClassName(element, className) -> HTMLElement[/code]
예제)
[code]<div id=”mutsu” class=”apple fruit food”></div>[/code]
[code]$(‘mutsu’).removeClassName(‘food’);
// -> HTMLElement
$(‘mutsu’).classNames();
// -> [‘apple’, ‘fruit’][/code]

replace : 엘리먼트를 원하는 HTML 코드로 통채로 바꿔치기 합니다. 이전 엘리먼트는 삭제됩니다.
[code]replace(element[, html]) -> HTMLElement[/code]
엘리먼트를 바꿀때 <script>태그가 존재한다면 내부의 JS는 실행됩니다.
예제)
[code]<div id=”food”>
  <div id=”fruits”>
    <p id=”first”>Kiwi, banana <em>and</em> apple.</p>
  </div>
</div>[/code]
[code]$(‘first’).replace(‘<ul id=”favorite”><li>kiwi</li><li>banana</li><li>apple</li></ul>’);
// -> HTMLElement (p#first)
$(‘fruits’).innerHTML;
// -> ‘<ul id=”favorite”><li>kiwi</li><li>banana</li><li>apple</li></ul>'[/code]
<script>태그가 존재할 경우
[code]$(‘favorite’).replace(‘<p id=”still-first”>Melon, oranges <em>and</em> grapes.</p><script>alert(“removed!”)</script>’);
// -> HTMLElement (ul#favorite) “removed!”라는 Alert창이 뜸
$(‘fruits’).innerHTML
// -> ‘<p id=”still-first”>Melon, oranges <em>and</em> grapes.</p>'[/code]
일반텍스트일 경우
[code]$(‘still-first’).replace(‘Melon, oranges and grapes.’);
// -> HTMLElement (p#still-first)
$(‘fruits’).innerHTML
// -> ‘Melon, oranges and grapes.'[/code]
마지막으로, toString() 메서드가 자동 호출되는 경우
[code]$(‘fruits’).replace(123);
// -> HTMLElement
$(‘food’).innerHTML;
// -> ‘123’[/code]

scrollTo : 해당 엘리먼트가 보여지는 위치의 top으로 스크롤이 이동합니다.
[code]scrollTo(element) -> HTMLElement[/code]
예제)
[code]$(element).scrollTo();
// -> HTMLElement[/code]

select : CSS 셀렉터를 사용하여 원하는 엘리먼트를 가져올 수 있습니다.
[code]select(element, selector…) -> [HTMLElement…][/code]
예제)
[code]<ul id=”fruits”>
  <li id=”apples”>
    <h3 title=”yummy!”>Apples</h3>
    <ul id=”list-of-apples”>
      <li id=”golden-delicious” title=”yummy!” >Golden Delicious</li>
      <li id=”mutsu” title=”yummy!”>Mutsu</li>
      <li id=”mcintosh”>McIntosh</li>
      <li id=”ida-red”>Ida Red</li>
    </ul>
    <p id=”saying”>An apple a day keeps the doctor away.</p>
  </li>
</ul>[/code]
[code]$(‘apples’).select(‘[title=”yummy!”]’);
// -> [h3, li#golden-delicious, li#mutsu]
$(‘apples’).select( ‘p#saying’, ‘li[title=”yummy!”]’);
// -> [li#golden-delicious, li#mutsu, p#saying]
$(‘apples’).select(‘[title=”disgusting!”]’);
// -> [][/code]
기존의 getElementByTagName을 통해 사용하던 복잡한 방법을 select을 통해 간소화 할 수 있습니다.
[code]var nodes = $A(someUL.getElementsByTagName(‘li’)).map(Element.extend);
var nodes2 = someUL.select(‘li’);[/code]

setOpacity : 엘리먼트의 투명도를 설정합니다. 다양한 브라우저에서 동일한 방법으로 사용될 수 있습니다.
[code]Element.setOpacity(element, opacity) -> [HTMLElement…]
someElement.setOpacity(opacity) -> [HTMLElement…][/code]
예제)
[code]var element = $(‘myelement’);
// 50% 투명도 설정
element.setOpacity(0.5);[/code]
[code]// 다음은 동일한 결과를 갖음
// 한개이상의 스타일을 설정할 경우 다음의 메서드를 사용하는것이 좋음
element.setStyle({ opacity: 0.5 });
element.setStyle(“opacity: 0.5”);[/code]

setStyle : 엘리먼트의 CSS 스타일 프로퍼티값을 지정합니다.
[code]setStyle(element, styles) -> HTMLElement[/code]
예제)
[code]$(element).setStyle({
  backgroundColor: ‘#900’,
  fontSize: ’12px’
});
// -> HTMLElement[/code]

show : 숨겨진 엘리먼트를 보이게끔 합니다.
[code]show(element) -> HTMLElement[/code]
예제)
[code]<div id=”error-message” style=”display:none;”></div>[/code]
[code]$(‘error-message’).show();
// -> HTMLElement (div#error-message가 보여짐)[/code]

하지만 show메서드에는 다음과 같은 문제가 있습니다.
[code]<style>
  #hidden-by-css {
  display: none;
}
</style>
<div id=”hidden-by-css”></div>[/code]
[code]$(‘hidden-by-css’).show();
// 작동하지 않음!
// -> HTMLElement (div#error-message는 아직도 숨김상태)[/code]
Prototype은 아직 CSS에서 지정된 display 프로퍼티에 대하여 제대로 접근하지 못하는 문제가 있습니다.

siblings : 자기 자신을 제외한 같은 뎁스에 있는 모든 형제 엘리먼트 노드를 가져옵니다.
[code]siblings(element) -> [HTMLElement…][/code]
예제)
[code]<ul>
  <li id=”golden-delicious”>Golden Delicious</li>
  <li id=”mutsu”>Mutsu</li>
  <li id=”mcintosh”>McIntosh</li>
  <li id=”ida-red”>Ida Red</li>
</ul>[/code]
[code]$(‘mutsu’).siblings();
// -> [li#golden-delicious, li#mcintosh, li#ida-red][/code]

stopObserving : 엘리먼트에 걸려있는 이벤트를 제거합니다.
[code]stopObserving(element, eventName, handler) -> HTMLElement[/code]
이 메서드는 Event.stopObserving과 같은 링크입니다.
예제)
[code]$(element).stopObserving(‘click’, coolAction);
// -> HTMLElement (and unregisters the ‘coolAction’ event handler).[/code]

toggle : 엘리먼트가 숨겨져 있으면 보이게 하고 보여질 경우 숨깁니다.
[code]toggle(element) -> HTMLElement[/code]
예제)
[code]<div id=”welcome-message”></div>
<div id=”error-message” style=”display:none;”></div>[/code]
[code]$(‘welcome-message’).toggle();
// -> HTMLElement (and hides div#welcome-message)
$(‘error-message’).toggle();
// -> HTMLElement (and displays div#error-message) [/code]
Element.show나 Element.hide와 마찬가지로 CSS에서 정의된 display속성에는 정상 작동하지 못합니다.

toggleClassName : CSS 클래스명을 추가하거나 이미 존재할 경우 제거합니다.
[code]toggleClassName(element, className) -> HTMLElement[/code]
예제)
[code]<div id=”mutsu” class=”apple”></div>[/code]
[code]$(‘mutsu’).hasClassName(‘fruit’);
// -> false
$(‘mutsu’).toggleClassName(‘fruit’);
// -> element
$(‘mutsu’).hasClassName(‘fruit’);
// -> true[/code]

undoClipping : Element.makeClipping()가 적용된 엘리먼트를 원상복귀 합니다.
[code]undoClipping(element) -> HTMLElement[/code]
예제)
[code]<div id=”framer”>
  <img src=”/assets/2007/1/14/chairs.jpg” alt=”example” />
</div>[/code]
[code]$(‘framer’).undoClipping();
// -> HTMLElement (CSS overflow 프로퍼티 속성은 원상복귀됨).[/code]
테스트는 여기에서

undoPositioned : Element.MakePositioned()가 적용된 엘리먼트를 원상복귀 합니다.
[code]undoPositioned(element) -> HTMLElement[/code]

up : CSS 룰을 사용하여 상위 엘리먼트를 반환합니다.
[code]up(element, [cssRule][, index = 0]) -> HTMLElement | undefined[/code]
예제)
[code]<html>
[…]
<body>
  <ul id=”fruits”>
    <li id=”apples” class=”keeps-the-doctor-away”>
      <ul>
        <li id=”golden-delicious”>Golden Delicious</li>
        <li id=”mutsu” class=”yummy”>Mutsu</li>
        <li id=”mcintosh” class=”yummy”>McIntosh</li>
        <li id=”ida-red”>Ida Red</li>
      </ul>
    </li>
  </ul>
</body>
</html>[/code]
[code]$(‘fruits’).up();
// 다음과 동일함
$(‘fruits’).up(0);
// -> body
$(‘mutsu’).up(2);
// -> ul#fruits
$(‘mutsu’).up(‘li’);
// -> li#apples
$(‘mutsu’).up(‘.keeps-the-doctor-away’);
// -> li#apples
$(‘mutsu’).up(‘ul’, 1);
// -> ul#fruits
$(‘mutsu’).up(‘div’);
// -> undefined[/code]

update : 엘리먼트 하위로 컨텐츠를 삽입합니다. toString()이 호출되며 내부적으로 evalScripts가 실행됩니다.
[code]update(element[, newContent]) -> HTMLElement[/code]
예제)
[code]<div id=”fruits”>carrot, eggplant and cucumber</div>[/code]
[code]$(‘fruits’).update(‘kiwi, banana and apple’);
// -> HTMLElement $(‘fruits’).innerHTML
// -> ‘kiwi, banana and apple'[/code]
문자열 제거
[code]$(‘fruits’).update();
// -> HTMLElement $(‘fruits’).innerHTML;
// -> ” (an empty string)[/code]
HTML 삽입
[code]$(‘fruits’).update(‘<p>Kiwi, banana <em>and</em> apple.</p>’);
// -> HTMLElement $(‘fruits’).innerHTML;
// -> ‘<p>Kiwi, banana <em>and</em> apple.</p>'[/code]
<script>태그 수행
[code]$(‘fruits’).update(‘<p>Kiwi, banana <em>and</em> apple.</p><script>alert(“updated!”)</script>’);
// -> HTMLElement (and prints “updated!” in an alert dialog).
$(‘fruits’).innerHTML;
// -> ‘<p>Kiwi, banana <em>and</em> apple.</p>'[/code]
toString() 연동 예제
[code]$(‘fruits’).update(123);
// -> HTMLElement
$(‘fruits’).innerHTML;
// -> ‘123’[/code]
[code]var Fruit = Class.create();
Fruit.prototype = {
  initialize: function(fruit){
    this.fruit = fruit;
  },
  toString: function(){
    return ‘I am a fruit and my name is “‘ + this.fruit + ‘”.’;
  }
}

var apple = new Fruit(‘apple’);
$(‘fruits’).update(apple);
$(‘fruits’).innerHTML;
// -> ‘I am a fruit and my name is “apple”.'[/code]

viewportOffset : 엘리먼트의 눈에 보이는 화면 영역의 X/Y 좌표를 반환합니다.
[code]viewportOffset(element) -> [Number, Number] 또는 { left: Number, top: Number }[/code]

visible : 엘리먼트가 보여지는지 아닌지를 알려줍니다.
[code]visible(element) -> Boolean[/code]
예제)
[code]<div id=”visible”></div>
<div id=”hidden” style=”display: none;”></div>[/code]
[code]$(‘visible’).visible();
// -> true
$(‘hidden’).visible();
// -> false[/code]
Element.show, Element.hide와 마찬가지로 CSS에서 지정한 display 프로퍼티는 정상적으로 처리하지 못합니다.

wrap : 엘리먼트와 부모 엘리먼트 사이에 새로운 엘리먼트를 삽입합니다.
[code]Element.wrap(element, wrapper[, attributes]) -> HTMLElement
someElement.wrap(wrapper[, attributes]) -> HTMLElement[/code]
예제)
기존 HTML
[code]<table id=”data”>
  <tr>
    <th>Foo</th>
    <th>Bar</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>[/code]
자바스크립트
[code]// 첫번째 방법
var div = new Element(‘div’, { ‘class’: ‘table-wrapper’ });
$(‘data’).wrap(div);

// 두번째 방법
$(‘data’).wrap(‘div’, { ‘class’: ‘table-wrapper’ });

// 결과는 동일함. 둘다 DIV 엘리먼트를 반환함[/code]
결과 HTML
[code]<div class=”table-wrapper”>
  <table id=”data”>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
    </tr>
  </table>
</div>[/code]

writeAttribute : 엘리먼트에 속성을 추가합니다. 이름/값을 짝으로 한 Hash타입도 넣을 수 있습니다.
[code]writeAttribute(element, attribute[, value = true]) -> HTMLElement
writeAttribute(element, attributes) -> HTMLElement[/code]