Question

我有一个div框，其id和textarea。当我点击我的div框时，我应该通过Javascript获取div ID并将其打印在textarea上。我试过但它不起作用。当我点击文本区域时，它显示“未定义”。请帮助我。

以下是代码：

<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>

Answer 1

getElementsByTagName返回nodeList个DOM节点，其作用类似于数组。

您需要先选择节点列表中的第一项，然后才能访问节点的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;
  };
};

Answer 2

重写您的代码如下：

<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>

Answer 3

当您使用getElementsByTagName时，您将所有带有该标记的元素作为数组。如果您想要第一个DIV，那么您需要以这种方式添加[0]：

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

剩下的代码没问题。

Answer 4

getElementsByTagName即使只包含一个对象，也会返回array。您应该像这样访问它：

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

Answer 5

正如复数所示，

divels是一个数组（正确：a NodeList），它没有id属性。它的项目有，例如。 textEl.value=divEls[0].id;将起作用（如果List为空，这将引发错误）。

Answer 6

尝试此功能

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

Answer 7

好的我明白了。 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>

JavaScript获取A Div的ID

7 个答案: