Dado un documento HTML que contiene algunos elementos y la tarea es obtener el texto dentro de un elemento HTML usando JavaScript. Hay dos métodos para obtener el texto sin elemento HTML que se enumeran a continuación:
- Usando la propiedad de texto interno
- Usando la propiedad textContent
Uso de la propiedad innerText: podemos usar la propiedad innerText para obtener el texto del elemento HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Get the text inside HTML
element using JavaScript
</title>
</head>
<body>
<div class="main">
Welcome to GeeksforGeeks
</div>
<script>
const div = document.querySelector('.main');
alert(div.innerText);
</script>
</body>
</html>
Producción:
Uso de la propiedad textContent: también podemos usar la propiedad textContent para obtener el texto del elemento HTML.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
Get the text inside HTML
element using JavaScript
</title>
</head>
<body>
<div class="main">
Welcome to GeeksforGeeks
</div>
<script>
const div = document.querySelector('.main');
alert(div.textContent);
</script>
</body>
</html>
Producción:
Diferencia entre texto interno y contenido de texto:
- La
innerTextpropiedad devuelve solo texto legible por humanos, mientras que latextContentpropiedad devuelve todo el texto, incluida la<script>etiqueta<style>. - La
innerTextpropiedad se encarga del estilo de los elementos y no devuelve ningún elemento oculto, mientras quetextContentla propiedad devuelve todos los elementos, incluidos los ocultos. - La
innerTextpropiedad se define solo para objetos HTMLElement , mientras quetextContentla propiedad se define para todos los objetos Node .
Publicación traducida automáticamente
Artículo escrito por frikishaan y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA