DOM Element properties

Property ต่างๆ ของ DOM ที่สามารถอ่านหรือกำหนดได้ด้วย Javascript

Properties คำอธิบาย
attributes[]
อ่านค่า attributes ทั้งหมดของ element ที่เป็นไปได้ลง array
ตัวอย่าง
//list รายการ attributes ของ tag title
var objattributes = document.getElementById( "title" ).attributes
for ( var i = 0 ; i < objattributes.length ; i++ )
{
  document.write( objattributes[i].name + '=' + objattributes[i].value + '<br />' );
}
alert( objattributes.getNamedItem( "id" ).value ) //คืนค่า property id ของ tag title
childNodes[]
อ่านค่ารายการ elements ที่อยู่ภายใน element ที่กำหนด
ตัวอย่าง
<ul id='ul'>
  <li>1</li>
  <li>2</li>
 </ul>
<script type="text/javascript">
var obj = document.getElementById( "ul" )
for ( var i = 0 ; i < obj.childNodes.length ; i++ )
{
  document.write( obj.childNodes[i].nodeName + '<br />' );
}
</script>
className
อ่านหรือกำหนดค่า CSS class
ตัวอย่าง
document.getElementById( "ul" ).className = 'xyz';
alert( document.getElementById( "ul" ).className );
clientWidth
clientHeight
อ่านค่าความกว้างและความสูงของพื้นที่แสดงผล ไม่รวม borders, margins, และ scrollbars (NS7+, IE4+)
ตัวอย่าง
var pagewidth = document.body.clientWidth
var pageheight = document.body.clientHeight
dir
อ่านหรือกำหนดค่าทิศทางการเขียนตัวอักษร จากซ้ายไปขวา "rtl" หรือ ขวาไปซ้าย "ltr" (default)
ตัวอย่าง
document.getElementById("mydiv").dir = "rtl";
firstChildคืนค่า element แรกที่พบภายใน element ที่กำหนด
idอ่านหรือกำหนด ID ของแต่ละ element เพื่อใช้อ้างถึงโดย Javascript และ CSS ค่านี้จะต้องไม่ซ้ำกันในแต่ละหน้า
innerHTMLอ่านหรือกำหนดค่าข้อความ HTML ภายใน element
ตัวอย่าง
<p><b>ข้อความเดิม</b></p>
<script type="text/javascript">
window.onload = function()
{
  document.getElementsByTagName("p")[0].innerHTML = "<b>ข้อความใหม่</b>"
}
</script>
langRead/write property that specifies the language of an element's attribute values and text content. Commonly invoked on the body level to determine the base language of the document.
lastChildคืนค่า element สุดท้าย
localNameคืนค่าชื่อของ node ของ XML element คล้ายกับ property nodeName ของ HTML
namespaceURIReturns the URI string assigned to the xmlns attribute of an XML element.
nextSiblingคืนค่า node ถัดไปของ node ปัจจุบัน คืนค่า null ถ้าไม่พบ node ถัดไป
nodeName
คืนค่าชื่อของ node หรือคือชื่อ ของ tag ตัวพิมพ์ใหญ่
ตัวอย่าง
if (document.getElementById("test").firstChild.nodeName=="DIV")
{
  alert("This is a DIV")
}
nodeType
คืนค่าชนิดของ node ดู See chart สำหรับค่าของ node
ตัวอย่าง
alert(document.getElementById("adiv").nodeType) //DIV element. Alerts 1
nodeValue
อ่านและกำหนดค่าข้อความของ node ชนิด text หรือคืนค่า Null สำหรับ node ชนิดอื่นๆ
ตัวอย่าง
<div id="test">ข้อความเดิม</div>
<script type="text/javascript">
  if (document.getElementById("test").firstChild.nodeName=="#text")
  document.getElementById("test").firstChild.nodeValue="ข้อความใหม่"
</script>
offsetLeftGets the horizontal offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is. Typically a positioned DIV or TABLE will act as an offset container to any element contained inside them.อ่านตำแหน่งด้านซ้ายของ element เทียบกับ container
offsetTopGets the vertical offset position of the current element relative to its offset container. Read only. Use "offsetParent" to determine what an element's container is.
offsetParent
Returns the offset container of the current element. For most elements on the page, the "BODY" is their offset container. However, a positioned DIV for example creates its own offset container space.
ตัวอย่าง
<div id="master" style="position: relative">
  <div id="slave" style="position: relative">test</div>
</div>
<script type="text/javascript">
  alert(document.getElementById("slave").offsetParent.id) //alerts "master"
</script>
offsetWidth
(offsetHeight)
คืนค่าความกว้าง(สูง)ของ element รวม borders และ padding แต่ไม่รวม margins ใน IE6 หากไม่กำหนด doctype ค่านี้จะไม่รวม margins และ padding (cross browser non W3C DOM)
ownerDocumentคืนค่า document object เจ้าของ node
parentNodeคืนค่า object node ที่เป็น parent ของ node นี้ในโครงสร้างต้นไม้
prefixReturns the namespace prefix of the current XML node, or null if not available.
previousSiblingReturns the previous node relative the current one in the document tree. Returns null if there are none or for text nodes inside an element.
scrollLeftคืนค่าระยะห่างระหว่างขอบซ้ายสุดของ element กับ ขอบซ้ายสุดของ element ด้านนอก หากมีการเลื่อน srollbar ระยะนี้จะรวมระยะทางที่ซ่อนอยู่จากการเลื่อนของ scrollbar ด้วย cross browser (NS7+, IE4+)
scrollTop
คืนค่าระยะห่างระหว่างขอบบนสุดของ element กับขอบบนสุดของ element ด้านนอก หากมีการเลื่อน srollbar ระยะนี้จะรวมระยะทางที่ซ่อนอยู่จากการเลื่อนของ scrollbar ด้วย cross browser (NS7+, IE4+)
ตัวอย่าง
<div id="static" style="width:150px; height:150px; position: absolute; border:1px solid yellow; left: 5px;">Some text</div>
<script type="text/javascript">
  //กำหนดตำแหน่งของ"static" ให้คงที่บนเพจ
  setInterval("document.getElementById('static').style.top=document.body.scrollTop+10+'px'", 50)
</script>
scrollWidth
(scrollHeight)
คืนค่าความกว้าง(สูง)ของ element รวมพื้นที่อื่นๆของ element ทั้งหมด และ scrollbar ถ้า element ไม่แสดง scrollbar scrollWidth จะมีค่าเท่ากับ clientWidth (scrollHeight ก็เช่นเดียวกัน) cross browser (NS7+, IE4+)
style
style เป็น object หนึ่ง สำหรับอ่านหรือกำหนดค่า การแสดงผลของแต่ละ element
ตัวอย่าง
document.getElementById("test").style.backgroundColor="yellow"
tabIndex อ่านค่าหรือกำหนด tab order ของ element
tagName คืนค่าชื่อ tag ของ element
title อ่านค่าหรือกำหนด propert title ของ element เพื่อที่จะแสดงบน hint
ผู้เขียน goragod โพสต์เมื่อ 07 มี.ค. 2551 เปิดดู 19,148 ป้ายกำกับ JavascriptDOM
^