2008年12月29日

document:方法(F-Z)

特徵 A-E | 特徵 F-Z | 方法 A-E | 方法 F-Z | 事件
document 的方法
getElementById()

用元素的 ID,取得元素物件;沒找到時,傳回 null。其語法是:

元素物件 = document.getElementById( id );

  • 程式用法:

    <script type='text/javascript'>
    function insertText()
    {
      var eo=document.getElementById('ins');
      alert(eo);
      eo.innerHTML='很簡單吧<br />';
    }
    </script>
    <span id='ins'>會不會 : </span>
    <a href='javascript:insertText()'>點此改變文字</a>

  • 執行結果:

    會不會 : 點此改變文字

getElementsByClassName()

傳回一組元素物件,有相同的風格表類別名稱。其語法是:

元素組 = document.getElementsByClassName( 類別名稱字串 )

元素組 = 根元素.getElementsByClassName( 類別名稱字串 )

  • 程式用法:

    <script type='text/javascript'>
    var eos=document.getElementsByClassName('pty');
    for(var i=0; i < eos.length; i++)
      document.write(eos[i].innerHTML +'<br />');
    </script>

  • 執行結果:

    document 的方法
    getElementById()
    getElementsByClassName()

  • 上例中的”pty”,是本文中黃色橫條的風格表類別名稱,此處只取得前三個元素。
  • IE 無此項;Firefox, Safari, Chrome 均成功。
getElementsByName()

傳回一組元素物件,有相同的名稱。其語法是:

元素組 = document.getElementsByName( 名稱字串 )

  • 程式用法:

    <input name='n1' value='名稱一' />
    <span name='n2'>名稱二</span><br />
    <script type='text/javascript'>
    document.write( document.getElementsByName('n1').length +' , ');
    document.write( document.getElementsByName('n2').length );
    </script>

  • 執行結果:

    名稱二
    1 , 1

  • 上例中,IE 輸出 1,0;Firefox, Safari, Chrome 輸出 1,1。
getElementsByTagName()

傳回一組元素物件,有相同的標籤名。其語法是:

元素組 = document.getElementsByTagName( 標籤名字串 )

元素組 = 根元素.getElementsByTagName( 標籤名字串 )

  • 程式用法:

    <script type='text/javascript'>
    var eos=document.getElementsByTagName('table');
    for( var i=0; i < eos.length; i++)
      document.write( eos[i].firstChild +'<br />');
    </script>

  • 執行結果:

    [object HTMLTableSectionElement]

  • 上例會取得本文的前面幾個 TABLE 元素物件。
getElementsByTagNameNS()

指定名稱空間,傳回一組元素物件,有相同的標籤名。其語法是:

元素組 = document.getElementsByTagNameNS( 名稱空間, 標籤名字串 )

此方法用在 XMTHL。

importNode()

由外部文件,傳回一組結。

load()

下載 XML 文件。此方法用在 XML,以後再談。

loadOverlay()

動態下載 XUL 外罩。只用在 XUL 文件。

queryCommandEnabled()

用在 Midas,後面再談。

queryCommandIndeterm()

用在 Midas,後面再談。

queryCommandState()

用在 Midas,後面再談。

queryCommandValue()

用在 Midas,後面再談。

querySelector()

傳回文件中符合 選擇器 的第一個元素物件;沒找到符合的,傳回 null。其語法是:

元素物件 = document.querySelector( 選擇器 );

元素物件 = 根元素.querySelector( 選擇器 );

  • 程式用法:

    <script type='text/javascript'>    
    try
    {
      var  nd= document.querySelector("#querySelector");
      document.write( nd.innerHTML );
    }
    catch(e)
    {
      document.write( e );
    }
    </script>  

  • 執行結果:

    querySelector()

  • 上例,Firefox 無此方法;IE, Safari, Chrome 都成功。
querySelectorAll()

傳回文件中符合 選擇器 的所有元素物件。其語法是:

元素組 = document.querySelectorAll( 選擇器 );

元素組 = 根元素.querySelectorAll( 選擇器 );

  • 程式用法:

    <script type='text/javascript'>    
    try
    {
      var  eos= document.querySelectorAll(".pty");
      for(var i=0; i < eos.length; i++)
        document.write( eos[i].innerHTML +'<br />');
    }
    catch(e)
    {
      document.write( e );
    }
    </script>  

  • 執行結果:

    document 的方法
    getElementById()
    getElementsByClassName()
    getElementsByName()
    getElementsByTagName()
    getElementsByTagNameNS()
    importNode()
    load()
    loadOverlay()
    queryCommandEnabled()
    queryCommandIndeterm()
    queryCommandState()
    queryCommandValue()
    querySelector()
    querySelectorAll()

  • 上例,Firefox 無此方法;IE, Safari, Chrome 都成功傳回本文中,類別名稱為”pty”的元素。
write()

輸出文字到文件。其語法是:

document.write( HTML字串 )

  • 程式用法:

    <div id='wr'></div>
    <script type='text/javascript'>    
    document.write( '<i>斜斜的</i>');
    </script>

  • 執行結果:

    斜斜的
writeln()

輸出文字到文件,會自動在文字行尾加上跳行。其語法是:

document.writeln( HTML字串 )

  • 程式用法:

    <pre>
    <script type='text/javascript'>    
    document.writeln( '天氣不錯');
    document.writeln( '明天會變天');
    </script>
    </pre>

  • 執行結果:

    天氣不錯
    明天會變天
    
    

©2008-2009 by ant2legs, All Rights Reserved. ant2legs 擁有其製作的文章,圖片與程式的著作權,所有權利保留。