GElement ส่วนขยายของ DOM Element สำหรับจัดการกับ DOM โดยมี property เพิ่มเติมจาก DOM ปกติโดยคุณสมบัติที่เพิ่มเติมขึ้นมาเพื่อแก้ปัญหาในด้าน property ที่แตกต่างกันในแต่ละ Browser ได้แก่

• getDimensions
• viewportOffset
• getOffsetParent
• getTop
• getLeft
• getWidth
• getHeight
• hide
• show
• toggle
• visible
• center
• getStyle
• setStyle
• addEvent
• removeEvent
• insert
• copy
• remove
• get
• set
• Ready

การเรียกใช้งาน GElement มี 2 วิธีครับ คือ

var gelem = new GElement(element);

หรือ แบบย่อ คือ

var gelem = $G(element);

โดยที่ element คือ ID หรือ Name หรือ Object ก็ไดครับ เช่น

var gdoc = $G(document);
var div = $G('user');

ค่า return กลับจะเป็น Object GElement ซึ่งจะมีคุณสมบัติของ GElement ดังลิสต์ด้านบน รวมกับ property ต่างๆ ของ Element เดิม เช่น

var gdiv = $G('user');
var id = gdiv.id; // DOM Property
var display = gdiv.type; // DOM property
var w = gdiv.getWidth(); // GElement

สำหรับข้อจำกัดของ GElement คือ DOM Property ที่ได้ จะเป็นแบบ อ่านอย่างเดียวครับ ไม่สามารถกำหนดค่าได้ ถ้าต้องการกำหนดค่า ให้ใช้ ฟังก์ชั่น set() ในการกำหนดค่าครับ หรือ เราอาจใช้ฟังก์ชั่นนี้แทน

var element = $E(gdiv);

ซึ่งฟังก์ชั่น $E() จะมีความหมายเหมือนกับ document.getElementById ครับ แต่มีข้อพิเศษกว่า ตรงที่สามารถส่ง parameter เป็น ID Name Object หรือ GElement ให้กับมันก็ได้ โดยจะคืนค่าเป็น DOM Object ของ Element นั้นๆ เช่น

$E(gdiv).innerHTML = 'innerHTML';

getDimensions คืนค่าความกว้างและสูงของ Element ในรูป Array width และ height

Array[width, height] = GElement.getDimensions();

viewportOffset คืนค่าตำแหน่งของ Element บน document

Array[left, top] = GElement.viewportOffset ();

getOffsetParent คืนค่า Node(GElement) แรกสุดของ Element

GElement node = GElement.getOffsetParent();

getTop, getLeft, getWidth, getHeight คืนค่า ตำแหน่ง บน ซ้าย และ ขนาด กว้าง สูง ของ Element

hide, show ซ่อน และ แสดง Element

toggle สลับการซ่อนและแสดง Element

visible อ่านค่า Element ว่ากำลังแสดงหรือซ่อนอยู่

center ย้ายตำแหน่งของ Element ไปแสดงกลางจอภาพ

getStyle, setStyle อ่าน และ กำหนด style ของ Element

style = GElement.getStyle('float');
GElement.setStyle('float', 'none');

addEvent สำหรับกำหนด Event ให้กับ Element บน DOM ระดับ 2

GElement.addEvent('eventname', func);

removeEvent เมื่อกำหนด Event ให้กับ Element แล้วเมื่อจะเลิกใช้ หรือต้องการยกเลิก Event นั้น สามารถยกเลิกได้ด้วยฟังก์ชั่นนี้

GElement.removeEvent('eventname');

สำหรับ 2 ฟังก์ชั่นด้านบน eventname คือชื่อ Event ตามปกติ แต่ตัด on ออกครับ เช่น onload ให้ใช้แค่ load หรือ onmouseover ให้ใช้ mouseover เป็นต้น

$G(document).addEvent('load', function(event){
  alert('Load');
});
$G(document).removeEvent('load')

insert สำหรับสร้าง Element ไว้ภายใน Element นี้

remove สำหรับ ลบ Element ใดๆ ออก

copy สำหรับสำเนา Element จาก Element ต้นฉบับ โดยจะสำเนา ทั้ง Element และ Element ภายในมาด้วย

get อ่านค่า property ของ Element

set กำหนดค่า property ของ Element

Ready สำหรับใช้ทดสอบว่า Element นั้นๆโหลดเรียบร้อยแล้วหรือยัง

$G(element).Ready(function(){
  // เมื่อ Element โหลดเรียบร้อยแล้ว
});

ตัวอย่างการใช้งาน

<script type="text/javascript">
var gdiv = $G(document.createElement('div')); // สร้าง node ใหม่ (div)
$G(document.body).insert( gdiv ); // ใส่ node ลงใน body
gdiv.set('id', 'newid'); // กำหนด id
alert(gdiv.get('id')); // อ่านค่า id
var cdiv = gdiv.copy(); // สำเนา node ที่สร้าง
$G(document.body).insert( cdiv ); // ใส่ node ลงใน body
$E(cdiv).innerHTML = cdiv.id; // แสดง id 0ะเห็นว่า id จะเท่ากับอันที่เป็นต้นฉบับ
gdiv.remove(); // ลบ node ออก
</script>