How to find certain elements in a HTML string without jQuery or ID-CodePudding

I'm trying to create a code in Javascript without the use of jQuery to find and output out the contents of California condor, which should print Critically Endangered in the console. However, I'm not sure how to do this correctly, especially without the use of jQuery. Can anyone help or give me some tips?

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())

CodePudding user response：

<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>