I'm learning to use JavaScript and I got curious and I understand that I can search for elements according to a certain TagName within elements of a certain ID. But because I can't search for certain TagName based on a ClassName. I leave the HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog de Viajes</title>
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header>
<div class="contenedor">
<div id="logo" class="logo">
<img src="img/logo.png">
</div> <!--.logo-->
<div class="buscador">
<form class="formulario" action="index.html" method="post">
<label for="buscador">
<input type="search" id="buscador" name="buscador" placeholder="Buscar">
</label>
<input type="submit" id="buscar" class="buscador" value="Buscar">
</form>
</div>
</div> <!--.contenedor-->
</header>
<div id="navegacion" class="navegacion">
<nav id="menu">
<ul class="clearfix">
<li><a target="_blank" href="#">Inicio</a></li>
<li><a href="#">Nosotros</a>
<ul>
<li><a href="#">Mision</a></li>
<li><a href="#">Vision</a></li>
<li><a href="#">Valores</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Consejos</a></li>
<li><a href="#">Ciudades</a></li>
<li><a href="#">Promociones</a></li>
</ul>
</li>
<li><a href="#">Tienda</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
</div>
<div id="contenido" class="contenido">
<main>
<article>
<h2>Viajar a Londres</h2>
<img src="img/imagen_1.jpg" alt="visitar londres">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="boton">Leer más</a>
</article>
<article>
<h2>Puente de la Torre</h2>
<img src="img/imagen_2.jpg" alt="puente de la torre">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="boton">Leer más</a>
</article>
<article>
<h2>Metro de Londres</h2>
<img src="img/imagen_3.jpg" alt="metro de londres">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a href="#" class="boton">Leer más</a>
</article>
</main>
<aside id="sidebar" class="sidebar">
<h2>Otros posts</h2>
<ul>
<li><a href="#">Entrada 1</a></li>
<li><a href="#">Entrada 2</a></li>
<li><a href="#">Entrada 3</a></li>
<li><a href="#">Entrada 4</a></li>
<li><a href="#">Entrada 5</a></li>
</ul>
</aside>
</div> <!--contenido-->
<footer>
<div class="contenedor">
<div class="nosotros">
<h2>Sobre nosotros</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<div class="menu navegacion">
<h2>Menú de navegación</h2>
<nav>
<a href="#">Inicio</a>
<a href="#">Nosotros</a>
<a href="#">Blog</a>
<a href="#">Tienda</a>
<a href="#">Contacto</a>
</nav>
</div>
</div>
<p class="copyright">
Todos los derechos reservados ©. Blog de Viajes 2016
</p>
</footer>
<script src="js/scripts.js"></script>
</body>
</html>
And here the JavaScript code:
(function(){
'use strict';
document.addEventListener('DOMContentLoaded', function(){
var enlaces = document.getElementsByTagName('a');
console.log(enlaces);
for(var i = 0; i < enlaces.length; i++){
enlaces[i].setAttribute('target', '_blank');
}
var enlacesSidebar = document.getElementById('sidebar').getElementsByTagName('a');
console.log(enlacesSidebar);
});
})();
Being like this it works perfectly and by console I get the following:
HTMLCollection(5) [a, a, a, a, a]
But if I change the line of linksSidebar code to:
var enlacesSidebar = document.getElementsByClassName('sidebar').getElementsByTagName('a');
In console I get the following error:
scripts.js:27 Uncaught TypeError: document.getElementsByClassName(...).getElementsByTagName is not a function at HTMLDocument. (scripts.js:27)
Would I have to change something in that line or is it that they cannot be combined?
It cannot because it
getElementsByClassName
returns oneHTMLCollection
and this type of object does not have the functiongetlElementsByTagName
among its properties.So that you can, you could use a loop to iterate through each of the elements of the
HTMLCollection
, for examplePerhaps instead of declaring the variable
anchorsSidebar
inside the loop and doing the assignment, you could create aArray
que where you put all the elements of theHTMLCollection
result ofgetElementsByTagName
but that will depend on what you want to do with them.Reference
According to
GetElementsByClassName
returns an object of type array with all the DOM nodes that contain saidclass
, something similar to this:Where as you can see is a collection with said nodes of the DOM tree, so if you want to access said value you must indicate which element of the data array you want to obtain in this way:
Instead do: