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