Question

如何从元素部分获得直接子代？

我已经尝试通过查询选择器将其定位，但没有成功。对于这种情况，我不想使用class或id。

我正确使用了吗？

我想从本节中定位它。

感谢帮助。

var section = document.getElementsByTagName("section")[0];
var div = section.querySelector(section + "> div"); //this not work

<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

Answer 1

使用查询选择器直接指定类似section > div的选择器：

var div = document.querySelector("section > div"); 
console.log(div);

<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div id="my-target-element"> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

如果您确实想在section元素上执行此操作，请获取该元素，然后使用如下所示的查询选择器，直接查找子div元素：

const section = document.querySelector('section');
console.log(section.querySelector('section > div'));
// or even
console.log(section.querySelectorAll('div')[2]);

<section>
  <form>
    <div></div>
    <div></div>
  </form>
  <div id="my-target-element"> //I want target this div
    <div></div>
    <div></div>
  </div>
</section>

Answer 2

您正在将section.querySelector(section + "> div")的字符串和对象在querySelector中串联在一起顺便说一句，如果您使用section.querySelector("div")，它将返回元素的第一个div，因此您想要的是section.querySelectorAll("div")[2]，它指向第三个div，请参见示例，分为两部分一个是你的。

var section = document.getElementsByTagName("section")[0];
var div = section.querySelector("div"); //this not work 
console.log(div);

//What you want
var section = document.getElementsByTagName("section")[0];
var div = section.querySelectorAll("div"); //this not work
var target = div[2];
console.log(target);

<section>
  <form>
    <div>1</div>
    <div>2</div>
  </form>
  <div> I want target this div
    <div>3</div>
    <div>4</div>
  </div>
</section>

在另一侧，您可以为该div设置一个id并通过getElementById直接找到它，但是从您的描述中您不想通过class或{{1 }}。

更新：
至少应该有关于目标id的信息，以便能够找到它是动态添加还是静态添加的，如果您不能定义div或class，最好定义和赋予属性，例如id或按内容查找。
因此，目标<dive attName='value'></div>应该有一个特定的位置，如果您没有关于它的任何信息，就不可能找到div。如果该div具有特定的内容，则可以在for中迭代所有div并进行检查，但是最好的方法是为该div定义div或class或至少为其定义一个属性。

Answer 3

var div = section.querySelector（“ section> div”）;

如何从元素中定位直接子对象

3 个答案: