La tarea es averiguar si un elemento tiene elementos secundarios o no con la ayuda de JavaScript. Vamos a discutir algunas técnicas.
Acercarse:
- Seleccione el elemento principal.
- Use una de las propiedades firstChild, childNodes.length, children.length para encontrar si el elemento tiene un hijo o no.
- El método hasChildNodes() también se puede usar para encontrar el elemento secundario del Node principal.
Ejemplo 1: En este ejemplo, el método hasChildNodes() se usa para determinar el elemento secundario del elemento <div> .
<!DOCTYPE HTML>
<html>
<head>
<title>
How to check if element has
any children in JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<div id="div">
<p id="GFG_UP" style=
"font-size: 19px; font-weight: bold;">
</p>
</div>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style=
"color:green; font-size:24px; font-weight:bold;">
</p>
<script>
var parentDiv = document.getElementById("div");
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to check "
+ "whether element has children.";
function GFG_Fun() {
var ans = "Element <div> has no children";
if (parentDiv.hasChildNodes()) {
ans = "Element <div> has children";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: En este ejemplo, la propiedad children.length se usa para determinar el elemento secundario del elemento <div> .
<!DOCTYPE HTML>
<html>
<head>
<title>
How to check if element has
any children in JavaScript ?
</title>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<div id="div">
<p id="GFG_UP" style=
"font-size: 19px; font-weight: bold;">
</p>
</div>
<button onclick="GFG_Fun()">
click here
</button>
<p id="GFG_DOWN" style=
"color:green; font-size:24px; font-weight:bold;">
</p>
<script>
var parentDiv = document.getElementById("div");
var el_up = document.getElementById("GFG_UP");
var el_down = document.getElementById("GFG_DOWN");
el_up.innerHTML = "Click on the button to "+
"check whether element has children.";
function GFG_Fun() {
var ans = "Element <div> has no children";
if (parentDiv.children.length > 0) {
ans = "Element <div> has children";
}
el_down.innerHTML = ans;
}
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA