JavaScript獲取A Div的ID

我有一個div盒子，其id和textarea。當我點擊我的div框時，我應該通過Javascript獲得div ID，並將它打印在textarea上。我已經嘗試過，但沒有工作。當我點擊文本區域時，它會顯示「未定義」。請幫助我。JavaScript獲取A Div的ID

下面是代碼：

<html> 
<head> 

<script type="text/javascript"> 
function get_id() 
{ 
    var divEls = document.getElementsByTagName("div"); 
    var textEl = document.getElementById("mytextarea"); 
    textEl.value=divEls.id; 
} 
</script> 

</head> 
<body> 
    <div id="mydiv" onclick="get_id()" style='border-width:1px;border-color:#C0C0C0;border-style: solid;background-color:#C0C0C0;width:130px;height:10px;'> 
    </div> 

    <textarea id="mytextarea"> </textarea> 
</body> 
</html>

來源

2011-11-29 Naeem Ul Wahhab

'divEls'是一個節點列表，這實質上是節點的數組，你需要使用'divEls [0] .id' – zzzzBov

好吧，我想通了。 document.getElementsByTagName("div")將返回所有標籤名爲div的元素作爲節點數組。在你的代碼中只有一個div元素，因此第一個元素是div本身。在數組中，第一個元素的索引號爲0，所以我們可以先通過document.getElementsByTagName("div")[0]或在您的代碼divEls[0]中獲得，然後我們可以通過簡單地獲得divEls[0].id來獲得它的id。現在，因爲我們已經有了div id，所以我們可以將文本區域的值設置爲與此div ID相同，如下所示：textEl.value = divEls[0].id這是您的代碼，其中包含更改。希望這有助於

<html> 
<head> 

<script type="text/javascript"> 
function get_id() 
{ 
var divEls = document.getElementsByTagName("div"); 
var textEl = document.getElementById("mytextarea"); 
/*get the first item in the nodelist ie divEls[0] = document.getElementsByTagName("div")[0] and then get its id by 
its id by divEls[0] */ 
textEl.value = divEls[0].id; 

} 
</script> 

</head> 
<body> 
<div id="mydiv" onclick="get_id()" style='border-width:1px;border-color:#C0C0C0;border-style: solid;background-color:#C0C0C0;width:130px;height:10px;'> 
</div> 

<textarea id="mytextarea"> </textarea> 
</body> 
</html>

來源

2011-11-29 17:36:05

非常感謝這樣一個詳細的答案。 –

重寫代碼如下：

<html> 
<head> 
    <script type="text/javascript"> 
      function get_id(element) { 
       var textEl = document.getElementById("mytextarea"); 
       textEl.value = element.id; 
      } 
    </script> 
</head> 
<body> 
    <div id="mydiv" onclick="get_id(this)" style='border-width: 1px; border-color: #C0C0C0; 
      border-style: solid; background-color: #C0C0C0; width: 130px; height: 10px;'> 
    </div> 
    <textarea id="mytextarea"> </textarea> 
</body> 
</html>

來源

2011-11-29 16:05:10

三江源這麼多 –

divels是，作爲多個被指示，一個陣列（正確：a NodeList），其具有無id屬性。它的物品有，例如。 textEl.value=divEls[0].id;將工作（如果列表爲空，則會引發錯誤）。

來源

2011-11-29 16:05:21 Bergi

感謝回覆 –

getElementsByTagName返回一個DOM節點的nodeList，它的作用就像一個數組。

你需要在節點列表中，選擇第一項，然後才能訪問該節點的ID：

textEl.value = divEls[0].id;

或者，你可能已經過去了this到get_id()：

function get_id(node) { 
    var textEl = document.getElementById('mytextarea'); 
    textEl.value = node.id; 
} 

onclick="get_id(this)"

但老實說，所有的JavaScript都應該在HTML文件的外部。 HTML屬於.html文件，CSS屬於.css文件，JS屬於.js文件。

//i haven't checked this code, and you probably want to modify it to be more generic. 
window.onload = function() { 
    var myDiv, myTextArea; 
    myDiv = document.getElementById('mydiv'); 
    myTextArea = document.getElementById('mytextarea'); 
    myDiv.onclick = function() { 
    myTextArea.value = myDiv.id; 
    }; 
};

來源

2011-11-29 16:05:56 zzzzBov

感謝你這麼許多。你們真的很好。幾乎所有的答案值得投票上 –

當您使用getElementsByTagName，你得到所有包含該標籤作爲數組的元素。如果你想第一個DIV，那麼你需要添加[0]這樣：

var divEls = document.getElementsByTagName("div")[0];

剩下的代碼就可以了。

來源

2011-11-29 16:05:57 Phoenix

非常感謝幫助 –

getElementsByTagName即使它僅包含一個對象，也會返回array。你應該這樣訪問：

function get_id() 
{ 
    var divEls = document.getElementsByTagName("div"); 
    var textEl = document.getElementById("mytextarea"); 
    textEl.value=divEls[0].id; 
}

來源

2011-11-29 16:06:01

非常感謝很多朋友 –

不客氣！ – 2011-11-29 18:09:58

試試這個功能

function get_id() 
{ 
var divEls = document.getElementsByTagName("div"); 
var textEl = document.getElementById("mytextarea"); 
textEl.value=divEls.item(0).id; 
}

來源

2011-11-29 16:10:35

JavaScript獲取A Div的ID

回答

相關問題