我尝试编写类似 oops 的 java 脚本代码如何扩展 DOM 元素？

Question

在我的代码中，

    function ElementBase(name) {
         this.tagName = typeof name != "" ? name : 'div';
         this.createElem();
     }

     ElementBase.prototype = {
            createElem: function() {
                this.elem = document.createElement(this.tagName);
            },
            getIndex: function() {
                var nodes = this.elem.parentNode.childNodes,
                    node;
                var i = count = 0;
                while ((node = nodes.item(i++)) && node != this.elem)
                    if (node.nodeType == 1) count++;
                return (count);
            }
};

我尝试创建的DOM元素标签是“div”。

function Div() {

    this.tagName = 'div'
    ElementBase.call(this, this.tagName);
}

Div.prototype = Object.create(ElementBase.prototype);

我的问题是，

1) 插入创建的对象后如何从html文档中访问getIndex函数？ 示例：

var div = new Div();    
div.id = "d1"
document.body.appendChild(div.elem);
// After div.getIndex() working 

然后在某些情况下，我需要文档中该 div (id="d1") 元素的索引值。

var d= document.getElementById("d1");
d.getIndex()   //not working

我在上面的代码中犯了什么错误？

谢谢提前..

Answer 1

我认为当您执行document.body.appendChild(div.elem) 时，您只需执行document.body.appendChild(document.createElement('div')) 即可。 当你这样做时，var d= document.getElementById("d1"); d 只是一个从 DOM 返回的对象，与你的 var div 无关。

你可以做的是：

Div.prototype.getIndex.call(d);

但这实际上并没有扩展您的对象。实际上扩展 DOM 对象是一种不好的做法（请查看http://perfectionkills.com/whats-wrong-with-extending-the-dom/）。

Answer 2

仔细查看您的代码。

div 是 Div 的一个实例，它有一个属性 .elem 保存实际的 DOM 元素。

所以当你做div.id = "d1"时，你并没有设置DOM元素的id。

var div = new Div();
div.id = 'd1';      // <div></div>
div.elem.id = 'd1'; // <div id="d1"></div>

---

但是还有一个问题：当你执行d= document.getElementById("d1") 时，你得到的是一个DOM 元素，而不是Div() 的一个实例。

由于.getIndex() 是在.prototype 或Div() 上定义的，普通的旧DOM 元素无法访问它。

你如何解决这种情况取决于你需要用你的代码完成什么。

---

编辑1：回复OP's comment：

document.getElementById() 返回一个HTMLDivElement 的实例，这与Div 的实例根本不同。

一种解决方案是使用 setter 方法：

function Div() {
    // ...
}
Div.prototype.setId = function setId(id) {
    this.elem.id = id;
}

var div = new Div();
div.setId('d1'); // same as doing div.elem.id = 'd1';

另一种解决方案是在构造函数本身中使用id：

function Div(id) {
    // ...

    this.elem.id = id; // or you can use "this.setId(id)"
    /*
        if "id" is provided, 
        it will take that value,

        else it is set to "undefined",
        which is the same as not being set
    */
}
Div.prototype.setId = function setId(id) {
    this.elem.id = id;
}

var div = new Div('d1'); // same as doing div.elem.id = 'd1';
div.setId('d2'); // same as doing div.elem.id = 'd2';