如何使用YUI进行基本的DOM操作(明确内容，附加内容)？

Question

我正在用YUI做一个项目，在那里我尝试做我以前用jQuery做的事情。我觉得很难做一些基本的工作，即：

1. 明确DOM元素的内容
2. 附加于DOM元素

的内容

在jQuery中，我会这样做：

$(".someSelector").empty().append("<div>something</div>");

如何在悦做上面的工作？它似乎在许多方面符合W3C DOM规范，我对该规范不太熟悉。如果有任何特定的W3C或这样的材料，我应该使用，请提供具体的链接。

Answer 1

以下是Dom方法的YUI文档。

Yahoo! UI Library > dom > YAHOO.util.Dom

或者尝试

YAHOO.util.Dom.get("somediv").innerHTML("<div>something</div>");

Answer 2

YUI似乎没有提供与jQuery相同的DOM操作级别(尽管我还没有使用YUI3，所以这种情况可能会改变)。

innerHTML确实能工作，而且以前速度更快，尽管我认为在一些现代浏览器中这种情况正在发生变化。通过标准方法添加内容是非常容易的：

element.appendChild(childElement);

更多的是清理。实际上，我最终扩展了YUI实用程序，并将其添加为一个方法：

removeChildren : function(elem)
{
    var theElement = this.get(elem);
    var elemChildren = theElement.childNodes;
    var childCount = elemChildren.length;
    for (var i = childCount -1; i >= 0; i--)
    {
        theElement.removeChild(theElement.childNodes[i]);
    }
}

重要的是要注意，当循环遍历子节点时，我从最后一个元素开始，然后以我的方式工作到前面。这是因为每当删除节点时，数组的大小都会发生变化。另外，如果在位置移除节点，数组的所有元素都会向下移动一个位置(意味着位于位置1的元素现在变成了位置上的元素)。如果我从数组的前面开始，我就会错过元素，并且很快就会超过数组的边界。