为什么我的 HTML 构造函数对象返回 [object Object] 而不是 [HTMLElementElement]

Why does my HTML constructor object return [object Object] instead of [HTMLElementElement]?

本文关键字：我的 HTMLElementElement Object object 构造函数 对象 返回 为什么 HTML      更新时间：2023-09-26

Background

我正在尝试制作一个完全纯粹的JavaScript GUI，用于创建用于学习目的的HTML内容。文件中唯一真实的 html 将是一个<script></script>元素。我想，我快完蛋了。

我做了一个自定义的HTML元素构造函数，但是当我创建一个对象时，当我alert(whatever);时，会显示[object Object]而不是[object HTMLWhateverElement](请参阅下面的示例(。我认为这会阻止我将子元素附加到父元素，当两者都由构造函数创建时。

主要问题

如果我能让 HTML 实例附加到 HTML 标记和element实例，那么我会很高兴。

构造 函数

function element(tagName) {
    var element = document.createElement(tagName);
    this.setText = function(elementText) {
        if(element.childNodes.length < 1) {
            var text = document.createTextNode(elementText);
            element.appendChild(text);
        } else {
            element.childNodes[0].nodeValue = elementText;
        }
    }
    this.removeText = function() {
        element.removeChild(element.childNodes[0]);
    }
    this.setAttribute = function(attribute,value) {
        element.setAttribute(attribute,value);
    }
    this.removeAttribute = function(attribute) {
        element.removeAttribute(attribute);
    }
    this.appendTo = function(parent) { // Works but not on element instances of the constructor
        parent.appendChild(element);
    }
    this.details = function(){
        alert(
            "Type: " + element + 
            "'n'"typeof'": " + typeof(element) // Shouldn't need this right?
        );
    }
}

例

ul = new element("ul");
ul.appendTo(body); // works fine if BODY is actually an HTML tag
alert(body); // gives me [object HTMLBodyElement] :)
alert(ul); // gives me [object Object] >(
li = new element("li"); // works :)
li.setText("list item text"); // works :)
li.appendTo(ul); // doesn't work >(

如果我能弄清楚如何将 JavaScript 创建的(子(element附加到其他 JavaScript 创建的(父级(element，我会成为黄金。我认为这与构造函数创建的实例化元素的返回值有关。

编辑

1( 可能的答案

@carter沙谢谢。添加新的this.appendChild方法有效，但重新发明了轮子的 HTML 对象的内置 appendChild 方法。

2( 可能的答案

@s4mok 感谢您的提示。将var element更改为 this.elem 有效，但会创建一个时髦的界面：

li.appendTo(ul.elem);

与。 

li.appendTo(ul);

我正在尝试模仿私人成员。

两个答案都有效，但都不返回值 [对象HTMLWhateverElement]当我这样做时：

alert(li);

有没有办法从上述所有方面获得好处？

ul = new element("ul");

上面的行是实例化函数 element((，分配给 ul 的实例是一个对象而不是 HTMLWhateverElement

ul.appendTo(body); // works fine if BODY is actually an HTML tag

以上有效是因为您的代码是：

this.appendTo = function(parent) { // Works but not on element instances of the constructor
    parent.appendChild(element);
}

而父元素是 body 和一个 HMTL 元素，并且有一个方法 appendChild，并且您要附加的元素是以下行中的元素：

var element = document.createElement(tagName);

为什么下面的代码不起作用？

li = new element("li"); // works :)
li.setText("list item text"); // works :)
li.appendTo(li); // doesn't work >(

答案是首先li不是一个HTML元素，其代码

this.appendTo = function(parent) { // Works but not on element instances of the constructor
    parent.appendChild(element);
}

将失败，因为实例 li 不是 HTML 元素，而是函数 element(( 的对象实例

此代码中的另一个错误是你有一个循环 li.appendTo(li(; 如果你检查你的代码，你就会作为子 li 附加到它本身。

编辑：

我的建议：

  • 首先，也许可以更改函数元素中"元素"的名称以避免混淆。 :D
  • 公开 var 元素 = document.createElement(tagName(; 这样你就可以从方法appendTo的参数父级访问它，这将允许你使用parent.getTheExposedElement((.appendChild ((

当使用"new"关键字创建时，您的函数返回自身的实例[对象对象]。您可以通过专门返回元素来覆盖它。但是，您需要将"this"更改为元素，因为"this"指的是函数新实例。此外，正如建议的那样，如果您将"元素"更改为"newElement"之类的其他内容，可能会不那么令人困惑。

function element(tagName) {
    var element = document.createElement(tagName);
    element.setText = function(elementText) {
        if(element.childNodes.length < 1) {
            var text = document.createTextNode(elementText);
            element.appendChild(text);
        } else {
            element.childNodes[0].nodeValue = elementText;
        }
    }
    element.removeText = function() {
        element.removeChild(element.childNodes[0]);
    }
    element.setAttribute = function(attribute,value) {
        element.setAttribute(attribute,value);
    }
    element.removeAttribute = function(attribute) {
        element.removeAttribute(attribute);
    }
    element.appendTo = function(parent) { // Works but not on element instances of the constructor
        parent.appendChild(element);
    }
    element.details = function(){
        alert(
            "Type: " + element + 
            "'n'"typeof'": " + typeof(element) // Shouldn't need this right?
        );
    }
    return element;
}

ul = new element("ul");
ul.appendTo(document.body); // works fine if BODY is actually an HTML tag
alert(document.body); 
alert(ul); 
li = new element("li");
li.setText("list item text"); 
li.appendTo(ul);

如果我运行您的示例，我会在控制台中注意到以下错误消息：

Uncaught TypeError: Object #<element> has no method 'appendChild'

这是因为您的自定义element实例没有您在 appendTo 中使用的appendChild方法。 您需要向构造函数添加一个，如下所示：

this.appendChild = function(child) {
    element.appendChild(child);
}
相关文章：