Pesquisar neste blog

15/11/2020

Acessando os atributos #01 em HTML

<!DOCTYPE html>
<html>

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

<body class='conteudo exercicio'>
    <div>
        <a href='https://www.cod3r.com.br'>Cod3r</a>
    </div>
    <div id='primeiro'>
        <img src='http://files.cod3r.com.br/curso-web/logo-estreita.png' alt='logo'>
    </div>
    <script>
        const img = document.querySelector('img')
        //acessando os atributos de img através de uma string
        console.log('getAttribute'img.getAttribute('src'))
        //acessando os atributos através do nome 
        console.log('src'img.src)
        console.log('["src"]'img['src'])//
        console.log('alt'img.alt)

        console.log('Elemento "img"...............')
        console.log('NodeType'img.nodeType)
        console.log('NodeName'img.nodeName)

        const src = img.getAttributeNode('src')
        console.log('Atributo "src"...............')
        console.log('NodeType'src.nodeType)
        console.log('NodeName'src.nodeName)
        console.log('NodeValue'src.nodeValue)

        const link = document.querySelector('a')
        console.log('Elemento "a"...............')
        console.log('href'link.href)
        console.log('firstChild.nodeType'link.firstChild.nodeType)
        link.firstChild.nodeValue = 'Novo Texto'
    </script>
</body>

</html>

Saída gerada




Nenhum comentário: