En este artículo, aprenderemos a obtener el elemento secundario del elemento principal mediante Javascript. Dado un documento HTML y la tarea es seleccionar un elemento en particular y obtener todos los elementos secundarios del elemento principal con la ayuda de JavaScript. Para esto, hay 2 formas de obtener el elemento hijo:
- Mediante el uso de la propiedad de los niños
- Usando el método querySelector
Discutiremos ambos enfoques y comprenderemos su implementación a través de los ejemplos.
La propiedad DOM children se usa para devolver la colección HTML de todos los elementos secundarios del elemento especificado.
Enfoque 1:
- Seleccione un elemento cuyo elemento secundario se va a seleccionar.
- Use la propiedad .children para obtener acceso a todos los elementos secundarios del elemento.
- Seleccione el niño en particular según el índice.
Ejemplo 1: este ejemplo implementa . children para obtener la colección HTML de todos los elementos secundarios del elemento especificado.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Finding child element of parent with pure JavaScript.</title>
<style>
.parent {
background: green;
color: white;
}
.child {
background: blue;
color: white;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"></p>
<div class="parent" id="parent"> Parent
<div class="child"> Child </div>
</div>
<br>
<button onclick="GFG_Fun()"> click here </button>
<p id="GFG_DOWN"
style="font-size: 24px;
font-weight: bold;
color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button select the child node.";
function GFG_Fun() {
parent = document.getElementById('parent');
children = parent.children[0];
down.innerHTML = "Text of child node is - '"
+ children.innerHTML
+ "'";
}
</script>
</body>
</html>
Producción:
propiedad de clase
El método querySelector() en HTML se usa para devolver el primer elemento que coincide con un selector CSS específico en el documento.
Enfoque 2:
- Seleccione el elemento principal cuyo elemento secundario se seleccionará.
- Use el método .querySelector() en el padre.
- Use el className del niño para seleccionar ese niño en particular.
Ejemplo 1: este ejemplo implementa el método .querySelector() para obtener el primer elemento que coincida con los selectores CSS especificados en el documento.
HTML
<!DOCTYPE HTML>
<html>
<head>
<title>How to get the child element of a parent using JavaScript ?</title>
<style>
.parent {
background: green;
color: white;
}
.child1 {
background: blue;
color: white;
margin: 10px;
}
.child2 {
background: red;
color: white;
margin: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<p id="GFG_UP" style="font-size: 15px; font-weight: bold;"> </p>
<div class="parent" id="parent"> Parent
<div class="child child1"> Child1 </div>
<div class="child child2"> Child2 </div>
</div>
<br>
<button onclick="GFG_Fun()"> click here </button>
<p id="GFG_DOWN"
style="font-size: 24px;
font-weight: bold;
color: green;">
</p>
<script>
var up = document.getElementById('GFG_UP');
var down = document.getElementById('GFG_DOWN');
up.innerHTML = "Click on the button select the child node.";
function GFG_Fun() {
parent = document.getElementById('parent');
children = parent.querySelectorAll('.child');
down.innerHTML = "Text of child node is - '"
+ children[0].innerHTML
+ "' and '"
+ children[1].innerHTML
+ "'";
}
</script>
</body>
</html>
Producción:
Método .querySelector()
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA