Javascript 访问Div'；JS函数中的子元素

我正在制作一个表单生成器，我试图找出创建新元素并访问其中元素的最佳方法

假设我有这个：

<div id="Group1"><div id="targetField"></div></div>
<div id="Group2"><div id="targetField"></div></div>

---

---

文档中的

id

必须是唯一的。使用

class

是您想要的任意元素组

var parentDOM=document.getElementById（'Group2'）；
var target=parentDOM.querySelector（'.targetField'）；
target.style.border=“纯蓝1px”

1.
2.
您可以使用
查询选择器访问它们（我强烈建议您不要这样做））

演示


console.log（document.querySelector（“#Group1#targetField”）.innerHTML）；
log（document.querySelector（“#Group2#targetField”）.innerHTML）
1
2
一个
id
不应在同一页上重复，句号为
id
是一个完全唯一的标识符。（虽然某些浏览器会让您逍遥法外，但它会导致意外和不一致的行为）

如果它们是同一类型的东西，则更合适的选择是将其指定为
类，而不是使用名称：

<div id="Group1"><div class="targetField"></div></div>
<div id="Group2"><div class="targetField"></div></div>

A
B
不要重复ID

根据您的需要，有很多方法可以做到这一点。下面是几个例子


如果您知道父div中div的顺序：


var parentDOM=document.getElementById（'Group2'）；
var target=parentDOM.children[0]；
log（target.innerHTML）

您好
您不应该对两个或多个元素使用相同的
id
。您有多个id为
targetField
id的元素。这是一种不好的做法。id应该是唯一的，因此
getElementById
将只返回它遇到的第一个id为的元素-另外，线索在name-get-element（single）中，由IDY提供谢谢，这非常清楚而且非常有用。我知道这可能是一个无关紧要的问题，但有时候我们太累了，或者过于沉迷于代码的其他部分，以至于自己看不到答案，或者，考虑到反对票，这种情况就发生在我身上。我认为有些人在反对票的问题上有点太激动了。虽然这可能是一个“基本”问题，但我不认为这个问题本身有任何问题。
console.log( document.querySelector( "#Group1 #targetField" ).innerHTML );

console.log( document.querySelector( "#Group2 #targetField" ).innerHTML );

<div id="Group1"><div class="targetField"></div></div>
<div id="Group2"><div class="targetField"></div></div>