element：特徵二頁

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

childElementCount	childNodes	children	firstChild
firstElementChild	lastChild	lastElementChild	nextSibling
nextElementSibling	parentNode	previousSibling	previousElementSibling

element 的特徵

childElementCount

存放子元素數目。 <div id='star'> <span id='jolin' style='color:red' class='歌星'> 蔡依林</span><br /> <span id='wu' style='color:green' class='笑匠'> 吳宗憲</span> </div> <br /> <script type='text/javascript'> var o=document.getElementById('star'); document.write( o.childElementCount ); </script>

• 程式用法：

  <div id='star'>
  <span id='jolin' style='color:red' class='歌星'>
  蔡依林</span><br />
  <span id='wu' style='color:green'  class='笑匠'>
  吳宗憲</span>
  </div>
  <br />
  <script type='text/javascript'>
  var o=document.getElementById('star');
  document.write( o.childElementCount );
  </script>
  

• 執行結果：
  蔡依林
  吳宗憲
  
  3

• IE, Firefox, Safari, Chrome 無此項。

childNodes

存放所有的子元素之清單。 <script type='text/javascript'> var o=document.getElementById('star'); for( var i=0; i < o.childNodes.length; i++ ) document.write( o.childNodes[i].nodeName +' / ' ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  for( var i=0; i < o.childNodes.length; i++ )
    document.write( o.childNodes[i].nodeName +' / ' );
  </script>
  

• 執行結果：

  #text / SPAN / BR / #text / SPAN / #text /

• IE 輸出 ”SPAN / BR / SPAN / #text /”。
  Firefox, Safari, Chrome 輸出 ”#text / SPAN / BR / #text / SPAN / #text /”。

children

存放所有的當下子元素之清單。 <script type='text/javascript'> var o=document.getElementById('star'); for( var i=0; i < o.children.length; i++ ) document.write( o.children[i].nodeName +' / ' ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  for( var i=0; i < o.children.length; i++ )
    document.write( o.children[i].nodeName +' / ' );
  </script>
  

• 執行結果：

  SPAN / BR / SPAN /

• FirefoxIE 無此項；IE, Safari, Chrome 執行成功。

firstChild

存放第一個子元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('star'); document.write( o.firstChild.nodeName ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  document.write( o.firstChild.nodeName );
  </script>
  

• 執行結果：

  #text

• IE 輸出 SPAN；Firefox, Safari, Chrome 輸出 #text。

firstElementChild

存放第一個子元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('star'); document.write( o.firstElementChild ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  document.write( o.firstElementChild );
  </script>
  

• 執行結果：

  [object HTMLSpanElement]

• IE, Firefox, Safari, Chrome 無此項。

lastChild

存放最後一個子元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('star'); document.write( o.lastChild.nodeName ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  document.write( o.lastChild.nodeName );
  </script>
  

• 執行結果：

  #text

• 不同瀏覽器的輸出可能會不同。

lastElementChild

存放最後一個子元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('star'); document.write( o.lastElementChild ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('star');
  document.write( o.lastElementChild );
  </script>
  

• 執行結果：

  [object HTMLSpanElement]

• IE, Firefox, Safari, Chrome 無此項。

nextSibling

存放樹枝結構的下一個元素，沒有則存放 null。 <span id='jay'>周杰倫 : </span><bdo id='yaj' dir='rtl'>周杰倫</bdo><p> <script type='text/javascript'> var o=document.getElementById('jay'); document.write( o.nextSibling.nodeName ); </script>

• 程式用法：

  <span id='jay'>周杰倫 : </span><bdo id='yaj' dir='rtl'>周杰倫</bdo><p>
  <script type='text/javascript'>
  var o=document.getElementById('jay');
  document.write( o.nextSibling.nodeName );
  </script>
  

• 執行結果：

  周杰倫 : 周杰倫

  BDO

nextElementSibling

存放樹枝結構的下一個元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('jay'); document.write( o.nextElementSibling ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('jay');
  document.write( o.nextElementSibling );
  </script>
  

• 執行結果：

  [object HTMLElement]

• IE, Firefox, Safari, Chrome 無此項。

parentNode

存放父元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('jolin'); document.write( o.parentNode.nodeName ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('jolin');
  document.write( o.parentNode.nodeName );
  </script>
  

• 執行結果：

  DIV

previousSibling

存放樹枝結構的前一個元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('yaj'); document.write( o.previousSibling.nodeName ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('yaj');
  document.write( o.previousSibling.nodeName );
  </script>
  

• 執行結果：

  SPAN

previousElementSibling

存放樹枝結構的前一個元素，沒有則存放 null。 <script type='text/javascript'> var o=document.getElementById('yaj'); document.write( o.previousElementSibling ); </script>

• 程式用法：

  <script type='text/javascript'>
  var o=document.getElementById('yaj');
  document.write( o.previousElementSibling );
  </script>
  

• 執行結果：

  [object HTMLSpanElement]

• IE, Firefox, Safari, Chrome 無此項。