element：方法五頁

特徵一頁 | 二頁 | 三頁 | 四頁 | 五頁
方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表

getBoundingClientRect	getClientRects	getElementsByClassName
getElementsByTagName	getElementsByTagNameNS

element 的方法

getBoundingClientRect()

取得元素的文字矩框物件，無參數。文字矩框物件包含特徵：top, bottom, left, right。 <div id='box'> <span id='fun' style='color:red'>好玩遊戲</span> <span id='small' style='color:red'>小遊戲</span> </div> <script type='text/javascript'> var go=document.getElementById('box'); var ao=go.getBoundingClientRect(); document.write( ao.left +' : '+ ao.top +'<br />'+ ao.right +' : '+ ao.bottom ); </script>

• 程式用法：

  <div id='box'>
  <span id='fun' style='color:red'>好玩遊戲</span>
  <span id='small' style='color:red'>小遊戲</span>
  </div>
  <script type='text/javascript'>
  var go=document.getElementById('box');
  var ao=go.getBoundingClientRect();
  document.write( ao.left +' : '+ ao.top
       +'<br />'+ ao.right +' : '+ ao.bottom );
  </script>
  

• 執行結果：
  好玩遊戲 小遊戲
  341.3125 : 950.765625
  1267.1875 : 984.25

• Safari, Chrome 無此項；IE, Firefox 有支援。

getClientRects()

取得元素的所有文字行的文字矩框物件，無參數。文字矩框物件包含特徵：top, bottom, left, right。 <script type='text/javascript'> var ao=document.body.getClientRects(); for( var i=0; i < ao.length; i++) document.write( ao[i].left +' : '+ Math.floor(ao[i].top) +' // '+ ao[i].right +' : '+ Math.floor(ao[i].bottom) ); </script>

• 程式用法：

  <script type='text/javascript'>
  var ao=document.body.getClientRects();
  for( var i=0; i < ao.length; i++)
    document.write( ao[i].left +' : '+ Math.floor(ao[i].top)
       +' // '+ ao[i].right +' : '+ Math.floor(ao[i].bottom) );
  </script>
  

• 執行結果：

  0 : 0 // 1280 : 59

• Safari, Chrome 無此項；IE, Firefox 有支援。

getElementsByClassName()

取得父元素下，指定 CLASS 名稱的元素物件清單。其語法是：

元素物件清單=父元素物件.getElementsByClassName( 類別名稱字串 ) <div id='star' style='color:red'> <span class='歌星'>蔡依林</span> <b class='笑匠'>吳宗憲</b> <span class='歌星'>阿妹</span> </div> <span class='歌星'>王力宏</span><p> <script type='text/javascript'> var so=document.getElementById('star'); var ao=so.getElementsByClassName('歌星'); for( var i=0; i < ao.length; i++) document.write( ao[i].innerHTML +', '); </script>

• 程式用法：

  <div id='star' style='color:red'>
  <span class='歌星'>蔡依林</span>
  <b class='笑匠'>吳宗憲</b>
  <span class='歌星'>阿妹</span>
  </div>
  <span class='歌星'>王力宏</span><p>
  <script type='text/javascript'>
  var so=document.getElementById('star');
  var ao=so.getElementsByClassName('歌星');
  for( var i=0; i < ao.length; i++)
    document.write( ao[i].innerHTML  +', ');
  </script>
  

• 執行結果：
  蔡依林 吳宗憲 阿妹
  王力宏

  蔡依林, 阿妹,

• IE無此項；, Firefox, Safari, Chrome 都成功。

getElementsByTagName()

取得父元素下，指定標籤名稱的元素物件清單。標籤名稱通常就是元素名稱，可用 '*' 表所有元素。其語法是：

元素物件清單=父元素物件.getElementsByTagName( 標籤名稱字串 ) <script type='text/javascript'> var so=document.getElementById('star'); var ao=so.getElementsByTagName('*'); for( var i=0; i < ao.length; i++) document.write( ao[i].innerHTML +', '); </script>

• 程式用法：

  <script type='text/javascript'>
  var so=document.getElementById('star');
  var ao=so.getElementsByTagName('*');
  for( var i=0; i < ao.length; i++)
    document.write( ao[i].innerHTML  +', ');
  </script>
  

• 執行結果：

  蔡依林, 吳宗憲, 阿妹,

getElementsByTagNameNS()

用在 XML 文件，後面再談。