Question

我想得到一个元素，它的父母在javascript中有一个特定的id。例如，如果我们有像这样的HTML代码

<div id="1">
 <p name="para"> first div </p>
 <a> </a> 
</div>
<div id="2">
 <p name="para"> second div </p>
 <a> </a>
</div>
<div id="3">
 <p name="para"> third div </p>
 <a> </a>
</div>

我尝试了这个，但它没有用。

document.getElementById('1').getElementByName("para").innerHTML = "";

Answer 1

使用queryselector：

document.querySelector('#1 > [name=para]').innerHTML = "";

旁注： Id's shouldn't start with a number。这可能会导致问题。

注意：使用ASCII字母，数字，＆＃39; _＆＃39;，＆＃39; - ＆＃39;以外的字符和＆＃39;。＆＃39;可能会导致兼容性问题，因为HTML 4中不允许这样做。虽然HTML 5中已经解除了这个限制，但ID应该以兼容字母开头。

解决id问题的一种简单方法是在id前面添加一些不是数字的内容，例如下划线（您还需要更改html以使用下划线）：

document.querySelector('#_1 > [name=para]').innerHTML = "";

Answer 2

document.getElementById("2").childNodes[1].innerHTML;

Answer 3

您可以使用querySelector，但使用unicode作为ID不应该以数字开头。

document.querySelector('#\\33 > p[name="para"]').innerHTML = 'Foo';

＆＃13;

document.querySelector('#\\33 > p[name="para"]').innerHTML = 'Foo';

＆＃13;

<div id="1">
 <p name="para"> first div </p>
 <a> </a> 
</div>
<div id="2">
 <p name="para"> second div </p>
 <a> </a>
</div>
<div id="3">
 <p name="para"> third div </p>
 <a> </a>
</div>

＆＃13;

Answer 4

另一种方法。请注意，正如其他答案所示，使用querySelector是首选方式。

＆＃13;

const el = document.getElementById('1').childNodes;
const para = [...el]
  .filter(item => item.nodeType === document.ELEMENT_NODE)
  .filter(item => item.tagName === 'P');

console.log(para[0]);

＆＃13;

<div id="1">
 <p name="para"> first div </p>
 <a> </a>
</div>
<div id="2">
 <p name="para"> second div </p>
 <a> </a>
</div>
<div id="3">
 <p name="para"> third div </p>
 <a> </a>
</div>

＆＃13;

获取具有特定父级的元素

4 个答案: