dom/acessandoAtributos2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Acessando Atributos #02</title>
    <link rel='stylesheet' href='css/estilo.css'>
</head>

<body class='conteudo exercicio'>
    <div>
        <label for="compras">Compras</label>
        <ul id="compras" destino='escritório' data-urgencia="5">
            <li>Café</li>
            <li>Água</li>
            <li>Copo Descartável</li>
        </ul>
    </div>
    <script>
       const lista = document.querySelector('div ul[destino="escritório"]') // ou ainda poderia const lista = document.querySelector(#compras)
       console.log('Elemento "ul".............')
       console.log('childNodes', lista.childNodes)
       console.log('destino', lista.destino)
       console.log('getAttribute', lista.getAttribute('destino'))
       console.log('hasAttribute', lista.hasAttribute('destino'))
       lista.setAttribute('destino', 'empresa')
       lista.setAttribute('status','aberto')
       lista.removeAttribute('destino')
    </script>
</body>

</html>