方法一頁 | 二頁 | 三頁 | 四頁 | 五頁 | 六頁 | 七頁 | 八頁
操控器一頁 | 二頁 | 成員表
| querySelector | querySelectorAll | scrollIntoView | setAttribute |
| setAttributeNS | setAttributeNode | setAttributeNodeNS |
取得父元素下，第一個符合選擇器的子元素物件，沒找到則傳回 null。其語法是：
元素物件 = 元素物件.querySelector( 選擇器組 );
- 程式用法：
<div id='box'>
<span style='color:red'>好玩遊戲</span>
<span style='color:red'>小遊戲</span>
<span style='color:red'>遊戲天堂</span><p>
</div>
<script type='text/javascript'>
document.write(
document.body.querySelector("#box").nodeName );
</script> - 執行結果：好玩遊戲 小遊戲 遊戲天堂DIV
- Firefox 無此項；IE, Safari, Chrome 有支援。
取得父元素下，所有符合選擇器的子元素物件組。其語法是：
元素物件組 = 元素物件.querySelectorAll( 選擇器組 );
- 程式用法：
<script type='text/javascript'>
var os=document.body.querySelectorAll("#box span");
for(var i=0; i < os.length; i++)
document.write( os[i].innerHTML +' / ');
</script> - 執行結果：
好玩遊戲 / 小遊戲 / 遊戲天堂 /
- Firefox 無此項；IE, Safari, Chrome 有支援。
捲動網頁，到元素出現與頂端對齊。其語法是：
元素物件.scrollIntoView( [布林旗] )
可以選擇性的設定布林旗，設為 true 則元素與頂端對齊，設為 false 則與底部對齊。
- 程式用法：
<a href='javascript:
document.getElementById("box").
scrollIntoView( false )'>
點此捲動</a> - 執行結果：
設定元素的屬性。其語法是：
元素物件.setAttribute(屬性名, 屬性值, 數字旗);
數字旗是 IE 定義的，Firefox 無此項；加上數字旗對 Firefox, Safari, Chrome 沒影響。數字旗設為 0，則不分大小寫；設為 1，大小寫不同。
- 程式用法：
<span id='jolin'>蔡依林</span><p>
<script type='text/javascript'>
function setAttributeDM()
{
var eo=document.getElementById("jolin");
//alert( eo.getAttribute('style') );
eo.setAttribute("style", "color:red", 0)
alert( eo.getAttribute('style') );
}
</script>
<a href='javascript:setAttributeDM()'>
點此改成紅色</a> - 執行結果：
蔡依林
- 上例，IE 不會動態改成紅色；Firefox, Safari, Chrome 都成功。
用在 XML 文件，後面再談。
設定元素的屬性結。其語法是：
舊的屬性結=元素物件.setAttributeNode( 新屬性結 );
- 程式用法：
<span id='wu' style='color:blue'>吳宗憲</span>
<script type='text/javascript'>
var wo=document.getElementById("wu");
var ao=document.createAttribute('style');
ao.nodeValue='color:green';
var bo=wo.setAttributeNode( ao ) ;
document.write( bo.nodeValue );
function setAttributeNodeDM()
{
var wo=document.getElementById("wu");
var ao=document.createAttribute('style');
ao.nodeValue='color:red';
wo.setAttributeNode( ao ) ;
alert( wo.getAttributeNode('style').nodeValue );
}
</script>
<p><a href='javascript:setAttributeNodeDM()'>
點此改成紅色</a> - 執行結果：
吳宗憲 color:blue
- 上例，IE 不會動態改成紅色；Firefox, Safari, Chrome 都成功。
用在 XML 文件，後面再談。
