Как найти определенные элементы в HTML-строке без jQuery или идентификатора

#javascript #html

Вопрос:

Я пытаюсь создать код на Javascript без использования jQuery для поиска и вывода содержимого California condor , которое должно выводиться Critically Endangered в консоли. Однако я не уверен, как это сделать правильно, особенно без использования jQuery. Кто-нибудь может помочь или дать мне несколько советов?

 document.body.innerHTML =
`<div>
  <ul data-continent="North America">
    <li data-species="California condor">Critically Endangered</li>
    <li data-species="American bison">Near Threatened</li>
  </ul>
  <ul data-continent="Europe">
    <li data-species="Cave bear">Extinct</li>
  </ul>
</div>`;

function code() {
  return document.body.innerHTML.getElementsByTagName('ul data-continent="North America"').getElementsByTagName('li data-species="California condor"');

console.log(code())
 

Ответ №1:

 <script>
    document.body.innerHTML =
    `<div>
    <ul data-continent="North America">
        <li data-species="California condor">Critically Endangered</li>
        <li data-species="American bison">Near Threatened</li>
    </ul>
    <ul data-continent="Europe">
        <li data-species="Cave bear">Extinct</li>
    </ul>
    </div>`;

    function code() {
        return document.querySelector('li[data-species="California condor"]').innerHTML
    }
    console.log(code())
</script>