如何使用纯Javascript通过其父id元素通过id获取子元素

Question

在下面给定的代码中，只隐藏了div#parent-1的div#parent-1。

，但是我如何通过指定父程序来做到这一点？

和

如何通过隐藏两个#item-1 元素来实现？

​

function HideElement(id)
{
	var doc = document.getElementsByClassName(id);
    doc.style.visibility = 'hidden';
}

HideElement('item-1');

#parent-1
{
  background: red;
}

#parent-2
{
  background: blue;
}

<div id="parent-1">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

<div id="parent-2">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
</div>

​

更新

我将子元素id属性替换为class，但问题是如何访问元素的样式属性？

我有个错误：

Uncaught TypeError: Cannot set property 'visibility' of undefined

Answer 1

编辑：--我在评论中采纳了一些建议，并将它们放到这个答案中。

最好使用class或data-属性，而不是id属性。正如所指出的，id应该是唯一的，因此页面上只能有一个属性。考虑下面的html & js

<div id="parent-1">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

<div id="parent-2">
  <div class="item-1"></div>
  <div class="item-2"></div>
  <div class="item-3"></div>
</div>

css：

.item-hidden{
  visibility: hidden;
}

javascript：

function hideElement(selector){

  var items = document.querySelectorAll(selector);

  for(var i = 0, l = items.length; i < l; ++i){
    items[i].classList.add('item-hidden');
  }

}

//usage:
hideElement('.item-1'); // will hide all '.item-1' elements
hideElement('#parent-1 div'); // will hide all <div>s inside of #parent-1

querySelectorAll()参考

classList参考

编辑:关于问题更新的：

document.getElementsByClassName();将返回一个nodelist，而不是一个node。注意getElementsByClassName.中的's‘您必须使用这个答案中的循环来更改每个节点的属性。

Answer 2

尝试使用数据属性，并简单地使用它们。就像在您的例子中，您可以使用data-id="item-1"，这将完成游戏。

参考数据属性。