如何检查JavaScript对象是否为DOM对象？

最新推荐文章于 2022-08-19 19:38:50 发布

cumtb2002

最新推荐文章于 2022-08-19 19:38:50 发布

阅读量698

点赞数

文章标签： js javascript vue object java ViewUI

原文链接：https://www.includehelp.com/code-snippets/how-to-check-if-a-javascript-object-is-a-dom-object.aspx

版权

This method is much easier and also simpler with fewer lines of code. If we look into this, it's something very similar to how we did it before using the for loop. Object.keys() was introduced in ES15 and makes the task of storing all the keys somewhere and then iterating through them simpler.

这种方法更容易，代码行也更少。如果我们仔细研究，这与使用for循环之前的操作非常相似。 ES.15中引入了Object.keys() ，使将所有密钥存储在某个位置，然后对其进行迭代的任务变得更加简单。

const john={
	age: 12,
	height: 180,
	LastName: 'Cena'
}

console.log(john instanceof Array);
console.log(john instanceof Object);
console.log(john instanceof String);

Output

输出量

false
true
false

john is an object and we can say it's an instance of the object class, therefore it returns true when we check it for an instance of Object and in all other cases for instance of string, array etc it returns false.

john是一个对象，我们可以说它是对象类的一个实例，因此当我们为Object的一个实例检查它时，它返回true；在所有其他情况下，例如字符串，数组等，它返回false。

const numbers = [1, 2, 55, 69];

console.log(numbers instanceof Array);
console.log(numbers instanceof Object);

Output

输出量

true
true

Remember, all arrays are implemented through the object class! Thus the numbers array is both an instance of an array class as it is derived from an array class and also an instance of the object class as the array class itself is derived from an instance class.

请记住，所有数组都是通过对象类实现的！因此，numbers数组既是从数组类派生的数组类的实例，又是从数组类派生的对象类的实例(因为它是从实例类派生的)。

const now = new Date();

console.log(now);
console.log(now instanceof Date);
console.log(now instanceof Object);
console.log(now instanceof String);

Output

输出量

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

Again, the date object is an instance of the date class derived from an object class hence returns true for both and false for other types.

同样， date对象是从对象类派生的date类的实例，因此对于这两种类型均返回true，而对于其他类型均返回false。

Now that we have a hang of the instanceof operator let's check if a JS object is a DOM object.

现在，我们已经挂起了instanceof运算符，现在让我们检查一下JS对象是否为DOM对象。

In HTML DOM, Element is the general base class for all objects. An Element object represents all HTML elements. Hence to check if an object is a DOM object we'll check it for an instanceof the Element class.

在HTML DOM中，Element是所有对象的通用基类。 Element对象代表所有HTML元素。因此，要检查对象是否为DOM对象，我们将检查它是否为Element类的实例。

Example: (index.html)

示例：(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>

Output

输出量

We have a regular JS object and three DOM elements. Remember, everything in JS is wrapped inside an object container so we can't check for an instance of an object. We'll only check for an instance of element class. Let's create a function which does this,

我们有一个常规的JS对象和三个DOM元素 。请记住，JS中的所有内容都包装在对象容器内，因此我们无法检查对象的实例。我们将仅检查元素类的实例。让我们创建一个执行此操作的函数，

<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>

Now let's call this function with different objects passed as parameters,

现在让我们使用传递为参数的不同对象来调用此函数，

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

Console: John Cena is a JS Object

控制台：John Cena是一个JS对象

Output

输出量

This is how we check is a JavaScript object is a DOM object or a regular JS object?

这就是我们检查JavaScript对象是DOM对象还是常规JS对象的方法？

翻译自: https://www.includehelp.com/code-snippets/how-to-check-if-a-javascript-object-is-a-dom-object.aspx

cumtb2002

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何检查JavaScript对象是否为DOM对象？

This method is much easier and also simpler with fewer lines of code. If we look into this, it's something very similar to how we did it before using the for loop. Object.keys() was introduced in ES15...
复制链接

扫一扫