Select all the elements that have a particular id AND class

Question

(UPDATED) . The context is the function below I am trying to get working. Am currently messing around in the console to see what's up, the first variable selectChoices is logging an empty NodeList . Can't seem to select all the elements that have an id of translateBoxCover and a class of choices .

function correctChoices() {
    var selectChoices = document.querySelectorAll('#translateBoxCover .choices');
    var checkChoicesArray = [];
    for (var i = 0; i < selectChoices.length; i++) {
        checkChoicesArray.push(selectChoices[i].textContent);
        console.log(checkChoicesArray);
    }
    if (checkChoicesArray.join('') == '我很很很喜欢中国') {
        return true;
    }
}

(Updated). I have included some more context: a javascript function that removes .choices to and fro the #translateBoxCover. When a .choices is clicked it is added to the div with the id #translateBoxCover. The function correctChoices will fire when the submit button is clicked (not included) to see if the .choices text content are in the right order. Below that is the html file in question. It seems everyone agrees that I have wrongly used an id when I should be using a class?

$('.choices').on('click', function() {
  var $this = $(this);
  if ($this.parent().attr('id') == 'translateBoxCover') {
    var index = $this.data('index');
    if (index == 0) {
      $this.prependTo($("#choicesWrapper"));
    } else {
      $this.insertAfter($("#choicesWrapper .choices").eq(index-1));
    }
  } else {
    $this.data('index', $this.index());
    $this.appendTo("#translateBoxCover");
  }
});
    <div id = 'translateBoxWrapper'>
        <div id = 'translateBox'>
            <div id = 'translateBoxCover'></div>
        </div>
    </div>

    <div id = 'choices'>
        <div id = 'choicesWrapper'>
            <div class = 'choices'>很</div>
            <div class = 'choices'>中国</div>
            <div class = 'choices'>美国</div>
            <div class = 'choices'>爱</div>
            <div class = 'choices'>喜欢</div>
            <div class = 'choices'>我</div>
            <div class = 'choices'>很</div>
            <div class = 'choices'>很</div>
            <div class = 'choices'>他</div>
            <div class = 'choices'>川普</div>
            <div class = 'choices'>厕所</div>
            <div class = 'choices'>想</div>
            <div class = 'choices'>你</div>
        </div>
    </div>

Answer 1

You can use ids and classes in a selector like #id.class .

 var el = document.querySelector( '#my_id.my_class' ); console.log( el ); 

 <div class="my_class"></div> <div class="my_class"></div> <div id="my_id" class="my_class"> </div> 

It's worth noting, as has already been pointed out, that id s should be unique and therefore if you're using an id as a selector, you shouldn't also need a class as it is redundant.

 var el = document.querySelector( '#my_id' ); console.log( el ); 

 <div class="my_class"></div> <div class="my_class"></div> <div id="my_id" class="my_class"></div> <div id="another_id" class="my_class"></div> 

Answer 2

您可以通过将ID和类名称串联在一起来使用选择器。

var selectChoices = document.querySelectorAll('#translateBoxCover.choices');

Answer 3

Edit: I misread what was being looked for. The following is true if you want a particular element by ID and more by class.

var selectChoices = document.querySelectorAll('#translateBoxCover .choices')

should read (note the comma between #translateBoxCover and .choices):

var selectChoices = document.querySelectorAll('#translateBoxCover, .choices')