Javascript 如何从同一父级按id获取元素_Javascript_Html

Javascript 如何从同一父级按id获取元素

javascript html

Javascript 如何从同一父级按id获取元素,javascript,html,Javascript,Html,我有一个div，其中有一个按钮和一个文本区域。通过给定div的id将我的手放在子上的最简单方法是什么 <html> <head> <link rel="stylesheet" type="text/css" href="main.css"> <script src="main.js"></script> <p>Welcome to Adrian's script<

我有一个

div

，其中有一个

按钮

和一个

文本区域

。通过给定div的

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>

有没有办法像这样询问孩子们

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

您可以使用按钮上的或访问

文本区域

值

函数方法（str）{
console.log（str）；
}


点击
在此处插入文本

您可以使用：

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>


欢迎来到阿德里安的剧本
在此处插入文本

不要像注释中建议的那样在getElementById的ID中包含#。

首先，我建议避免在单击时使用内联事件

onclick

，并使用

addEventListener（）将事件附加到JS代码中，然后最好使用nextElementSibling
属性，并使用value
获取下一个字段的内容：

document.getElementById（'panelBtn'）。addEventListener（'click'，function（）{
log（this.nextElementSibling.value）；
})

点击我
在此处插入文本
以下是一种不引人注目的方法，可以在面板中的任何按钮后获取textarea的值

document.queryselectoral（“.panel>按钮”）.forEach（函数（但）{
但是.addEventListener（“单击”，函数（e）{
e、 预防默认值（）；
log（this.nextElementSibling.value）；
});
});

点击
值1
点击
价值2
1。你所做的是完美的。2.为什么需要父级？在文本区域中不应该有HTML。您应该使用.value
innerHTML
仅在值更改后返回“在此处插入文本”。我需要父级进行分组，因为这只是层次结构的一小部分。我需要按父级访问它们，然后按id在父级内访问它们。document.getElementById（'Panel'））@Bercoviciarian但是.innerHTML
将只返回您的默认值-即使用户在文本区域中输入了默认值。这就是为什么您需要改用.value
的原因。这对id
也适用吗？我会有更多的textarea
-s，我需要通过id
给孩子一个div
访问。我说的家长是指div
命名的面板
@bercoviciarian是的，只需在前面的querySelector参数中使用id，但是如果你有id，它们需要是唯一的，然后，您不需要通过父级访问。只要onclick=“method（document.getElementById（'anyUniqueTextAreaId'）.innerHTML）”
@mplungjan不需要转到文档根目录，如果所有文本区域都在div#面板内@BelowtheRadar True。
<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>

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