Question

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

我们说我有这个：

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

我想访问 Group2 的targetField。我怎么能指定我想获得该ID？或者可以使用同名的ID进行此操作吗？

我尝试过一条特定的路径，但我认为这是不可能的，因为我收到了错误。

var parentDOM = document.getElementById('Group2');
var target=parentDOM.getElementById('targetField');

Answer 1

永远不要在同一页上重复id。 id是一个完全唯一的标识符。（虽然有些浏览器会让你逃脱它，但它会导致意外和不一致的行为。）

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

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

在那之后，获得适当的元素是微不足道的：

const element = document.querySelector('#Group2 .targetField');
console.log(element.innerHTML);

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

基本上，只需使用document.querySelector()并为它提供一个选择器（与CSS选择器格式相同）。

Answer 2

不要重复ID。

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

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

＆＃13;

var parentDOM = document.getElementById('Group2');
var target= parentDOM.children[0];
console.log(target.innerHTML);

＆＃13;

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

＆＃13;

如果您只知道目标ID的名称：

＆＃13;

var parentDOM = document.getElementById('Group2');
var target=parentDOM.querySelector('#targetField');
console.log(target.innerHTML);

＆＃13;

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

＆＃13;

再次： DON＆＃39; T DUPLICATE IDS 。如果您想要多个同名的东西，请使用Classes。这是更好的做法。

Answer 3

id在文档中必须是唯一的。使用class是否需要任意元素组。

＆＃13;

var parentDOM = document.getElementById('Group2');
var target = parentDOM.querySelector('.targetField');
target.style.border = "solid blue 1px";

＆＃13;

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

＆＃13;

Answer 4

您可以使用querySelector访问它们（我强烈建议不要）

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

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

<强>演示

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以将id属性更改为data-id属性

<div id="Group1"><div data-id="targetField">1</div></div>
<div id="Group2"><div data-id="targetField">2</div></div>

并以

的形式访问它

console.log( document.querySelector( "#Group1 div[data-id='targetField']" ).innerHTML );

我尝试过一条特定的道路，但我不认为这是   可能，因为我收到了错误。

var parentDOM = document.getElementById('Group2');

var target=parentDOM.getElementById('targetField');

getElementById仅适用于document的方法，不适用于任何其他HTMLElement，因此您会收到错误。

但是，如果您已经访问Group2，请通过querySelector访问其子元素

console.log( parentDOM.querySelector( "#targetField" ).innerHTML );

<强>演示

＆＃13;

var parentDOM = document.getElementById('Group2');

console.log( parentDOM.querySelector( "#targetField" ).innerHTML );

＆＃13;

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

＆＃13;

在JS函数中访问Div的子元素

4 个答案: