¿Cómo comprobar si un objeto JavaScript es un objeto DOM?

Aquí, vamos a aprender cómo comprobar si un objeto JavaScript es un objeto DOM o no?

Este método es mucho más fácil y también más simple con menos líneas de código. Si nos fijamos en esto, que es algo muy similar a como lo hicimos antes de usar el bucle class. Object.keys () se introdujo en la ES15 y hace que la tarea de almacenar todas las llaves en algún lugar y luego iterar a través de ellos más simple.

const john={
age: 12,
height: 180,
LastName: 'Cena'
}
console.log(john instanceof Array);
console.log(john instanceof Object);
console.log(john instanceof String);

salida

false
true
false

John es un objeto y podemos decir que es una instancia de la for objeto, por lo tanto, devuelve verdadero cuando comprobamos que class una instancia de objeto y en todos los demás casos class instancia de cadena, etc gama devuelve falso.

const numbers = [1, 2, 55, 69];
console.log(numbers instanceof Array);
console.log(numbers instanceof Object);

salida

true
true

Recuerde, todas las matrices se implementan a través de la for objeto! Por lo tanto la matriz de números es a la vez una instancia de un for array, ya que se deriva de un class matriz y también una instancia de la class objeto como la matriz class en sí se deriva de un class ejemplo.

const now = new Date();
console.log(now);
console.log(now instanceof Date);
console.log(now instanceof Object);
console.log(now instanceof String);

salida

Sun Dec 01 2019 09:58:35 GMT+0530 (India Standard Time)
true
true
false

nuevo, el objeto fecha es una instancia de la class fecha derivado de un class objeto por lo tanto devuelve verdadero class ambos y falsa class otros tipos.

Ahora que tenemos una caída de la class cheque de Let operador si un objeto JS es un objeto DOM.

En HTML DOM, Element es la base general for for todos los objetos. Objeto Elemento representa todos los elementos HTML. Por lo tanto, para comprobar si un objeto es un objeto DOM comprobaremos que class un instanceof la class elemento.

Ejemplo: (index.html)

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dom objects</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</head>
<style>
body {
background: black;
color: green;
padding: 80px;
}
</style>
<body>
<div class="container">
<p>This p tag is a </p>
<div class="wrapper">
This div wrapper is a
</div>
<ul class="collection list">
<li class="collection-items">Apples</li>
<li class="collection-items">oranges</li>
<li class="collection-items">mangoes</li>
</ul>
</div>
</body>
<script>
const object = {
name: 'John Cena',
age: 45,
profession: 'Wrestler/Actor'
}
const text = document.querySelector('p');
const div = document.querySelector('.wrapper');
const list = document.querySelector('.list');
</script>
</html>

salida

How to check if a JavaScript object is a DOM object? - 4

Tenemos un regular de objeto JS y tres elementos DOM . Recuerde, todo en JS se envuelve dentro de un contenedor de objetos de modo que no podemos comprobar for una instancia de un objeto. Sólo a comprobar for una instancia de elemento class. Vamos a crear una función que hace esto,

<script>
function evaluate(obj) {
if (obj instanceof Element) {
const html = ' HTML element or DOM object';
obj.innerText += html;
} else
console.log(`${obj.name} is a JS Object`);
}
</script>

Ahora vamos a llamar a esta función con diferentes objetos pasados ​​como parámetros,

<script>
evaluate(object);
evaluate(text);
evaluate(div);
</script>

Consola: John Cena es un Objeto JS

salida

How to check if a JavaScript object is a DOM object? - 5

Esta es la forma en , comprobamos es un objeto JavaScript es un objeto DOM o un objeto de regular de JS?


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *