检查子元素是否没有特定的类？答案

【问题标题】：Check if a child element does not have a specific class?检查子元素是否没有特定的类？
【发布时间】：2014-05-19 00:30:02
【问题描述】：

我正在尝试查找子元素是否没有特定的类。

我的元素如下：

<g id="note1">
    <path id="Barline1" d="M55.837,19.278h0.249c0.11,0,0.199,0.089,0.199,0.199V40.56c0,0.11-0.089,0.199-0.199,0.199h-0.249c-0.11,0-0.199-0.089-0.199-0.199V19.478C55.638,19.368,55.727,19.278,55.837,19.278z"/>
    <path class="root" d="M54.113,38.945c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C52.499,39.244,53.296,38.945,54.113,38.945z"/>
</g>
<g id="note2">
    <path id="BarLine2" d="M70.852,16.788h0.249c0.11,0,0.199,0.089,0.199,0.199v21.082c0,0.11-0.089,0.199-0.199,0.199h-0.249c-0.11,0-0.199-0.089-0.199-0.199V16.987C70.653,16.877,70.742,16.788,70.852,16.788z"/>
    <path class="root" d="M69.127,36.454c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,36.753,68.31,36.454,69.127,36.454z"/>
    <path class="interval third" d="M69.127,31.473c1.116,0,2.172,0.578,2.172,1.813c0,1.435-1.116,2.411-2.052,2.969c-0.717,0.418-1.514,0.717-2.331,0.717c-1.116,0-2.172-0.578-2.172-1.813c0-1.435,1.116-2.411,2.052-2.969C67.513,31.772,68.31,31.473,69.127,31.473z"/>
</g>

带有id="note1" 的g 元素没有带有class="interval" 的任何子元素。带有id="note2" 的g 元素可以。我正在尝试使用以下 javascript 来确定元素没有是否有 class="interval" 的子元素：

for(var n=0;n<document.getElementsByClassName('root').length;n++){
    if(document.getElementById('note'+(n+1)).getElementsByClassName('interval') ){
          //some child element has class
     } else {
          //no child element has class
     }
}

我收到的错误消息是 document.getElementsByClassName 属性或方法在 g 元素上不受支持。

根据this example，代码应该返回所有具有我想要的类的元素，这些元素在我指定的 id 的元素下。关于我做错了什么或我可以尝试哪些替代方案的任何想法？

【问题讨论】：

是否有某些原因您从.root 元素而不是note_ 元素开始？
可能是无知。我对这一切都很陌生。

标签： javascript css class children getelementsbyclassname

【解决方案1】：

您可以使用element.querySelectorAll()：

 if(document.getElementById('note'+(n+1)).querySelectorAll('.interval').length > 0){
     /*There are elements with CSS class 'interval'*/
 }
 else{
     /*There are no elements with CSS class 'interval'*/
 }

【讨论】：

这对于检查子元素是否没有类元素非常有用。不过，当子元素确实有类时，我不确定现在如何访问它。是document.getElementById('note'+(n+1)).querySelectorAll('#interval')[0] 还是我一进去就回getElementsByClassName？
@ChristopherGaston ：您可以通过迭代 NodeList document.getElementById('note'+(n+1)).querySelectorAll('#interval') 使用此类访问元素。使用第一个可以访问您在评论中的方式。
效果很好。您可能想要编辑您的代码。你放下#interval，它是id选择器，它实际上应该是类选择器的.interval。