用元素的 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> - 執行結果:
會不會 : 點此改變文字
傳回一組元素物件,有相同的風格表類別名稱。其語法是:
元素組 = 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 均成功。
傳回一組元素物件,有相同的名稱。其語法是:
元素組 = 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。
傳回一組元素物件,有相同的標籤名。其語法是:
元素組 = 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 元素物件。
指定名稱空間,傳回一組元素物件,有相同的標籤名。其語法是:
元素組 = document.getElementsByTagNameNS( 名稱空間, 標籤名字串 )
此方法用在 XMTHL。
由外部文件,傳回一組結。
下載 XML 文件。此方法用在 XML,以後再談。
動態下載 XUL 外罩。只用在 XUL 文件。
用在 Midas,後面再談。
用在 Midas,後面再談。
用在 Midas,後面再談。
用在 Midas,後面再談。
傳回文件中符合 選擇器 的第一個元素物件;沒找到符合的,傳回 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 都成功。
傳回文件中符合 選擇器 的所有元素物件。其語法是:
元素組 = 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”的元素。
輸出文字到文件。其語法是:
document.write( HTML字串 )
- 程式用法:
<div id='wr'></div>
<script type='text/javascript'>
document.write( '<i>斜斜的</i>');
</script> - 執行結果: 斜斜的
輸出文字到文件,會自動在文字行尾加上跳行。其語法是:
document.writeln( HTML字串 )
- 程式用法:
<pre>
<script type='text/javascript'>
document.writeln( '天氣不錯');
document.writeln( '明天會變天');
</script>
</pre> - 執行結果:
天氣不錯 明天會變天