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

回答

相关问题