web-dev-qa-db-ja.com

特定のクラスを持たない要素を選択する方法

JQueryではなくJavaScriptを使用して、特定のクラスを持たない要素を選択する方法を考えています。

たとえば、次のリストがあります。

<ul id="tasks">
  <li class="completed selected">One Task</li>
  <li>Two Task</li>
</ul>

完了したタスクを次の方法で選択します。

var completeTask = document.querySelector("li.completed.selected");

しかし、それらのクラスを持たないリストアイテムを選択する方法がわかりません。

javascripthtmlclass
63
Jaeeun Lee

これにより、2番目のLI要素が選択されます。

document.querySelector("li:not([class])")

または

document.querySelector("li:not(.completed):not(.selected)")

例：

// select li which doesn't have a 'class' attribute...
console.log(document.querySelector("li:not([class])"))

// select li which doesn't have a '.completed' and a '.selected' class...
console.log(document.querySelector("li:not(.completed):not(.selected)"))
 <ul id="tasks">
    <li class="completed selected">One Task</li>
    <li>Two Task</li>
  </ul>
109
Nick Grealy

completedまたはselectedクラスを持たない<li>を選択するには：

document.querySelector("li:not(.completed):not(.selected)");

フィドル

http://jsfiddle.net/Z8djF/

16
BeNdErR

:not()セレクターを試すことができます

var completeTask = document.querySelector("li:not(.completed):not(.selected)");

http://jsfiddle.net/UM3j5/

9
Musa
document.querySelectorAll('[wf-body=details] input:not(.switch):not(.btn)').forEach(function(e){
    // do whatever you want. with 'e' as element :P
});
2
Burhan Ibrahimi

代わりに、親の子の配列を取得してください：

var completeTask = document.querySelector("#tasks").childNodes;

次に、必要に応じてループ/検索します。

1
crunch