如何查找其类不包含子字符串的元素答案

【问题标题】：How to find element whose class doesn't contain substring如何查找其类不包含子字符串的元素
【发布时间】：2020-09-23 00:39:56
【问题描述】：

我打算在页面中查找其类不包含特定名称的元素。我必须使用 DOM 定位器和“getElementsByClassName”。例如，我有以下列表：

<ol id="selectable">
    <li class="ui-state-default ui-selectee" name="one">1</li>
    <li class="ui-state-default ui-selectee" name="two">2</li>
    <li class="ui-state-default ui-selectee" name="three">3</li>
    <li class="ui-state-default ui-selectee" name="four">4</li>
    <li class="ui-state-default ui-selectee ui-selected" name="five">5</li>
    <li class="ui-state-default ui-selectee" name="six">6</li>
    <li class="ui-state-default ui-selectee ui-selected" name="seven">7</li>
    <li class="ui-state-default ui-selectee" name="eight">8</li>
    <li class="ui-state-default ui-selectee" name="nine">9</li>
    <li class="ui-state-default ui-selectee" name="ten">10</li>
    <li class="ui-state-default ui-selectee ui-selected" name="eleven">11</li>
    <li class="ui-state-default ui-selectee" name="twelve">12</li>
</ol>

我想查找不包含“ui-selected”的元素。这可以通过 CSS 的 "not" 和\或其他方法轻松完成，但这里我必须使用 DOM。

谢谢

【问题讨论】：

标签： javascript html dom

【解决方案1】：

尝试将document.querySelectorAll() 与:not CSS selector 一起使用：

// Check your browser's console output for result
console.log(
    document.querySelectorAll('#selectable :not(.ui-selected)')
);

<ol id="selectable">
    <li class="ui-state-default ui-selectee" name="one">1</li>
    <li class="ui-state-default ui-selectee" name="two">2</li>
    <li class="ui-state-default ui-selectee" name="three">3</li>
    <li class="ui-state-default ui-selectee" name="four">4</li>
    <li class="ui-state-default ui-selectee ui-selected" name="five">5</li>
    <li class="ui-state-default ui-selectee" name="six">6</li>
    <li class="ui-state-default ui-selectee ui-selected" name="seven">7</li>
    <li class="ui-state-default ui-selectee" name="eight">8</li>
    <li class="ui-state-default ui-selectee" name="nine">9</li>
    <li class="ui-state-default ui-selectee" name="ten">10</li>
    <li class="ui-state-default ui-selectee ui-selected" name="eleven">11</li>
    <li class="ui-state-default ui-selectee" name="twelve">12</li>
</ol>

JSFiddle

【讨论】：

谢谢，这很好用，但由于教学限制，我不允许使用 querySelector 和 querySelectorAll。这就是为什么我认为 getElementsByClassName 可以用 not 来调用。还有其他想法吗？
@user1980253 你不能用document.getElementsByClassName 做到这一点，但你可以用另一种方式做到这一点，例如——JSFiddle。
@user1980253 对您有帮助吗？

【解决方案2】：

如果您使用的是现代浏览器（支持 HTML5），请使用以下代码：

var elements = document.getElementById('selectable').querySelectorAll("li:not(.ui-selected)");

否则，使用以下代码：

var ol = document.getElementById('selectable').childern, unselectedElements=[];
for (var j=0;j<ol.length;j++){
    if (!ol[j].getAttribute('class') || 
        !ol[j].getAttribute('class').match(/^ui\-selected/ig))
        unselectedElements.push(ol[j]);
}

【讨论】：