Question

我有一个div，其中有一个button和一个textarea。通过给定div的hands使我的child进入id的最简单方法是什么？

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="main.js"></script>
        <p>Welcome to Adrian's script</p>
    </head>
    <body>
        <div id="Panel">
                <button id="panelBtn" class="button" onclick="method(document.getElementById('panelTxt').innerHTML)"></button>
                <textarea id="panelTxt" class=textarea>Insert text here</textarea>
        </div>
    </body>
</html>

如您所见，当我按下按钮从INNERHtml中获取textarea时，我想要的。

是否有任何简便的方法可以从调用处（在我的情况下为按钮）中获取元素的parent并通过其ID获得另一个孩子？

所以我需要的是..给一个div和一个id，我想用给定的id访问它的孩子。最简单的方法是什么？

<div id="panel">
   <button id="c1"></button>
   <textarea id="c2"></textarea>
</div>

有没有办法查询像这样或类似的孩子？

document.getElemenyById("panel")["c1"]

Answer 1

您可以在按钮的querySelector或parentNode上使用parentElement来访问textarea value

function method(str) {
  console.log(str);
}

<div id="Panel">
  <button id="panelBtn" class="button"   
    onclick="method(this.parentNode.querySelector('#anyTextAreaId').value)">Click</button>
  <textarea id="anyTextAreaId" class=textarea>Insert text here</textarea>
</div>

Answer 2

<button type="button" onclick="method( document.getElementById("panelTxt").value )"></button>

请勿在注释中建议您的getElementById ID中包含＃。

Answer 3

首先，我建议避免使用内联事件onclick，并使用addEventListener()将事件附加到您的JS代码中，然后最好使用nextElementSibling属性并获取内容value使用下一个字段：

document.getElementById('panelBtn').addEventListener('click', function() {
  console.log(this.nextElementSibling.value);
})

<div id="Panel">
  <button id="panelBtn" class="button">Click Me</button>
  <textarea id="panelTxt" class="textarea">Insert text here</textarea>
</div>

Answer 4

这是在面板上的“ ANY”按钮后获取textarea值的一种简便的方法

document.querySelectorAll(".panel>button").forEach(function(but) {
  but.addEventListener("click",function(e) {
    e.preventDefault();
    console.log(this.nextElementSibling.value);
  });
});

<div id="panel1" class="panel">
   <button id="c1">Click</button>
   <textarea id="c2">value 1</textarea>
</div>
<div id="panel2" class="panel">
   <button id="c3">Click</button>
   <textarea id="c4">value 2</textarea>
</div>

这是在父容器中获取任何文本区域的一种方法

document.querySelectorAll(".panel>button").forEach(function(but) {
  but.addEventListener("click",function(e) {
    e.preventDefault();
    console.log(this.closest("div").querySelector("textarea").value);
  });
});

<div id="panel1" class="panel">
   <button id="c1">Click</button>
   <textarea id="c2">value 1</textarea>
</div>
<div id="panel2" class="panel">
   <button id="c3">Click</button>
   <textarea id="c4">value 2</textarea>
</div>

Answer 5

您可以使用以下方法实现：this.parentElement.querySelector("#panelTxt")

但是请注意，id应该是唯一的，因此，如果您打算有多个面板，我建议您改用类/名称选择器。

类似这样的东西：

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="main.css">
        <script src="main.js"></script>
        <p>Welcome to Adrian's script</p>
    </head>
    <body>
        <div id="Panel">
                <button id="panelBtn" class="button" onclick="method(this.parentElement.querySelector('.textarea').innerHTML)"></button>
                <textarea id="panelTxt" class="textarea">Insert text here</textarea>
        </div>

    </body>
</html>

如何从同一个父对象的ID中获取元素

5 个答案: