检测 JavaScript 对象是不是有一些引用 DOM 元素的属性

Posted 2023-02-22

【中文标题】检测 JavaScript 对象是不是有一些引用 DOM 元素的属性

【英文标题】：Detect if a JavaScript object has some properties referencing DOM elements检测 JavaScript 对象是否有一些引用 DOM 元素的属性

【发布时间】：2014-12-03 06:06:01

【问题描述】：

我想将 javascript 对象序列化为 JSON 格式，而不是反序列化它们。

明显的解决方案是使用JSON.stringify()。关键是关于JSON.stringify() 的主要问题是它在尝试序列化循环对象时返回错误。返回的错误如下

TypeError: Converting circular structure to JSON

像cycle.js 和circular.js 这样的一些提议的解决方案可以解决问题，以便能够序列化和反序列化循环对象。

这些解决方案的一个问题是它们不允许序列化引用 DOM 元素的循环对象或包含指向 DOM 元素的属性的最坏循环对象。例如，使用 cycle.js 会返回

Failed to read the 'selectionDirection' property from 'htmlInputElement': The input element's type ('image') does not support selection.

我考虑过使用document.contains(objName) 检测对DOM 元素的引用是否存在，当objName 对象引用DOM 树中的现有元素时，它会返回true。如果我能够检测到这些元素，我将标记这些引用并删除它们，以便能够使用 cycle.js 序列化一个新对象，并在反序列化后将它们重新指向 DOM 元素。

我的问题是我事先不知道对象的某个属性是否指向一个DOM元素，当我想递归解析所有属性和属性的属性时，我不会能够停止解析，因为对象可能是循环的（原始问题），我将收到以下错误

Maximum call stack size exceeded

有什么线索吗？

【问题讨论】：

你能提供你想在 json 中记忆的对象吗？ (jsfiddle.net)

我在 jsfiddle.net 上尝试了我的整个脚本，它在 firefox 和 chrome 之间的行为不同，在 jsfiddle 上使用它和在我的本地主机上使用它作为文件之间也不同。这是我在 jsfiddle.net link 中的示例。我请求你在 localhost 上试试。准确地说，我的对象是：var obj = new Object(); obj.x = 1; obj.y = 2; obj.z = obj; obj.div = document.getElementById('div'); 其中 div 可以是任何 DOM 元素

我更新了script 中的警报，使其更具表现力

【参考方案1】：

我找到了解决上述问题的方法：

我所做的是我在cycle.js 中添加了 2 行来标记指向 DOM 元素的对象并打破它们，以免在它们的属性中进行搜索。我突出显示了 cycle.js 中添加的行：

/*
    cycle.js
    2013-02-19

    Public Domain.

    NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.

    This code should be minified before deployment.
    See http://javascript.crockford.com/jsmin.html

    USE YOUR OWN COPY. IT IS EXTREMELY UNWISE TO LOAD CODE FROM SERVERS YOU DO
    NOT CONTROL.
*/

/*jslint evil: true, regexp: true */

/*members $ref, apply, call, decycle, hasOwnProperty, length, prototype, push,
    retrocycle, stringify, test, toString
*/

if (typeof JSON.decycle !== 'function') 
    JSON.decycle = function decycle(object) 
        'use strict';

// Make a deep copy of an object or array, assuring that there is at most
// one instance of each object or array in the resulting structure. The
// duplicate references (which might be forming cycles) are replaced with
// an object of the form
//      $ref: PATH
// where the PATH is a JSONPath string that locates the first occurance.
// So,
//      var a = [];
//      a[0] = a;
//      return JSON.stringify(JSON.decycle(a));
// produces the string '["$ref":"$"]'.

// JSONPath is used to locate the unique object. $ indicates the top level of
// the object or array. [NUMBER] or [STRING] indicates a child member or
// property.

        var objects = [],   // Keep a reference to each unique object or array
            paths = [];     // Keep the path to each unique object or array

        return (function derez(value, path) 

// The derez recurses through the object, producing the deep copy.

            var i,          // The loop counter
                name,       // Property name
                nu;         // The new object or array

// typeof null === 'object', so go on if this value is really an object but not
// one of the weird builtin objects.

            if (typeof value === 'object' && value !== null &&
                    !(value instanceof Boolean) &&
                    !(value instanceof Date)    &&
                    !(value instanceof Number)  &&
                    !(value instanceof RegExp)  &&
                    !(value instanceof String)) 

// If the value is an object or array, look to see if we have already
// encountered it. If so, return a $ref/path object. This is a hard way,
// linear search that will get slower as the number of unique objects grows.

/* ************************************************************* */
/* ******************** START OF ADDED CODE ******************** */
/* ************************************************************* */
                if (document.contains(value))
                    return $ref: "TODO mark the position of elements in  DOM tree";
/* ************************************************************* */
/* ********************* END OF ADDED CODE ********************* */            
/* ************************************************************* */

                for (i = 0; i < objects.length; i += 1) 
                    if (objects[i] === value) 
                        return $ref: paths[i];
                    
                

// Otherwise, accumulate the unique value and its path.

                objects.push(value);
                paths.push(path);

// If it is an array, replicate the array.

                if (Object.prototype.toString.apply(value) === '[object Array]') 
                    nu = [];
                    for (i = 0; i < value.length; i += 1) 
                        nu[i] = derez(value[i], path + '[' + i + ']');
                    
                 else 

// If it is an object, replicate the object.

                    nu = ;
                    for (name in value) 
                        if (Object.prototype.hasOwnProperty.call(value, name)) 
                            nu[name] = derez(value[name],
                                path + '[' + JSON.stringify(name) + ']');
                        
                    
                
                return nu;
            
            return value;
        (object, '$'));
    ;



if (typeof JSON.retrocycle !== 'function') 
    JSON.retrocycle = function retrocycle($) 
        'use strict';

// Restore an object that was reduced by decycle. Members whose values are
// objects of the form
//      $ref: PATH
// are replaced with references to the value found by the PATH. This will
// restore cycles. The object will be mutated.

// The eval function is used to locate the values described by a PATH. The
// root object is kept in a $ variable. A regular expression is used to
// assure that the PATH is extremely well formed. The regexp contains nested
// * quantifiers. That has been known to have extremely bad performance
// problems on some browsers for very long strings. A PATH is expected to be
// reasonably short. A PATH is allowed to belong to a very restricted subset of
// Goessner's JSONPath.

// So,
//      var s = '["$ref":"$"]';
//      return JSON.retrocycle(JSON.parse(s));
// produces an array containing a single element which is the array itself.

        var px =
            /^\$(?:\[(?:\d+|\"(?:[^\\\"\u0000-\u001f]|\\([\\\"\/bfnrt]|u[0-9a-zA-Z]4))*\")\])*$/;

        (function rez(value) 

// The rez function walks recursively through the object looking for $ref
// properties. When it finds one that has a value that is a path, then it
// replaces the $ref object with a reference to the value that is found by
// the path.

            var i, item, name, path;

            if (value && typeof value === 'object') 
                if (Object.prototype.toString.apply(value) === '[object Array]') 
                    for (i = 0; i < value.length; i += 1) 
                        item = value[i];
                        if (item && typeof item === 'object') 
                            path = item.$ref;
                            if (typeof path === 'string' && px.test(path)) 
                                value[i] = eval(path);
                             else 
                                rez(item);
                            
                        
                    
                 else 
                    for (name in value) 
                        if (typeof value[name] === 'object') 
                            item = value[name];
                            if (item) 
                                path = item.$ref;
                                if (typeof path === 'string' && px.test(path)) 
                                    value[name] = eval(path);
                                 else 
                                    rez(item);
                                
                            
                        
                    
                
            
        ($));
        return $;
    ;

我在 jsfiddle.net 上添加了一个example（在 jsfiddle 或本地的 chrome 上尝试，firefox 32.0.3 无法正常工作）。下一步是找到一种方法来检测 DOM 元素的位置，以便在序列化对象后重新建立引用，并在我们没有 ID 时反序列化它。

【讨论】：

我认为使用“value instanceof HTMLElement”而不是“document.contains(value)”会更实用。至于保存 html 元素，您可以保存它的 id（或者如果它没有 id，则为其分配一个新 id）以供将来参考。

是的，使用value instanceof HTMLElement 更实用。

我至少暂时会使用 ID :)