JAVASCRIPT中document.getElementById使用方法

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

改變 HTML 屬性

如需改變 HTML 元素的屬性，請使用這個文法：

document.getElementById(id).attribute=new value
本例改變了元素的 src 屬性：

<img id="image" src="smiley.gif" alt="" />

<script type="text/javascript">
document.getElementById("image").src="landscape.jpg";
</script>
改變 HTML 樣式

如需改變 HTML 元素的樣式，請使用這個文法：

document.getElementById(id).style.property=new style
下面的例子會改變

元素的樣式：

Hello World!

<script type="text/javascript">
document.getElementById("p2").style.color="blue";
</script>

有人看到會說使用jquery $貨幣符號來代替document.getElementById是多好啊，下面我們也來看看

$('#a').val()

當然如果不想使用jquery外掛程式包可以自訂$，如下

JavaScript可以定義$符號函數，簡寫或書寫相容性更好的代碼。

代碼如下:

function $(id){return document.getElementById(id);

上面的關於新版本的瀏覽器都是沒有成績的，假如運用陳舊的瀏覽器，可以運用上面的函數
代碼如下:

function $(objectId) {
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId);
}
else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId);
}
else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
}
else {
return false;
}
}

document.getElementById 架構中元素操作

[window.]parent.document.getElementById('button') //尋找父頁面中id為button的對象

parent.document.getElementById("frame").style.height-----即取得頁面中的id名字為“frame”的元素，取得它的顯示高度

function init(){
parent.document.getElementById("frame").style.height=document.body.scrollHeight;
}

補充：

從iframe中尋找父頁面中對象的方法：
1.js

    [window.]parent //尋找父頁面的window對象
    [window.]parent.document //尋找父頁面的document對象
    [window.]parent.document.body //尋找父頁面的body對象
    [window.]parent.document.getElementById('button') //尋找父頁面中id為button的對象

2.jquery
    $([window.]parent) //尋找父頁面的window對象
    $([window.]parent.document) //尋找父頁面的document對象
    $([window.]parent.document.body) //尋找父頁面的body對象
    $([window.]parent.document.body).find('#button') //尋找父頁面中id為button的對象

點擊事件子頁面控制父頁面元素。
$('.demo_close').click(function () {
            $('#iframeIE', window.parent.document).hide();
});

從父頁面中尋找iframe子頁面中對象的方法：
1. JS代碼:
document.getElementById('iframe').contentWindow //尋找iframe載入的頁面的window對象
document.getElementById('iframe').contentWindow.document //尋找iframe載入的頁面的document對象
document.getElementById('iframe').contentWindow.document.body //尋找iframe載入的頁面的body對象
document.getElementById('iframe').contentWindow.document.getElementById('icontent') //尋找iframe載入的頁面的id為icontent的對象

2.jQuery:
    $iframe.contents() //尋找iframe載入的頁面的document對象
    $iframe.contents().find('body') //尋找iframe載入的頁面的body對象
    $iframe.contents().find('body').find('#icontent') //尋找iframe載入的頁面的id為icontent的對象

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More