获取一个DOM元素的Dojo方法

Question

我有一个指向DOM元素（div或form）的'this'。我想在该元素上使用dojo函数。我该怎么做？

就像jQuery中我们使用$(this).append()一样......

是否有任何类似的东西？

dojo.foo(this).connect() 

或者

dojo.connect(dojo.foo(this),"some", thing);

- Boopathi Rajaa

Answer 1

在Dojo中，你更接近JavaScript（即原始的金属）而不是jQuery。

因此，在Dojo中，你只需要这样做：

dojo.connect(this, ...);

您不必使用类对象（例如jQuery的$）来包装DOM元素以使用功能。在Dojo中，许多功能不是作为类对象的原型属性公开的，而是作为dojo.xxx命名空间系统下的简单函数。

例如（假设“this”指向一个DOM节点）：

dojo.connect(this, "onclick", foo, "bar");   // Connects a handler to the Click event on the DOM node, with the context (i.e. this) set to the object foo
dojo.attr(this, "href", "http://www.hello.com");   // Sets an attribute on the DOM node
dojo.style(this, "display", "none");   // Sets the DOM node's style
dojo.addClass(this, "hello");   // Adds a class to the DOM node
alert(this.parentNode);   // You work the DOM nodes with raw JavaScript
dojo.empty(this);  // Empty all children in the DOM node
dojo.destroy(this);  // Destroy the DOM node and its children
dojo.place(this, someOtherNode);   // Put a DOM node as a child inside another node

循环结构：

dojo.forEach(array, ...);   // Instead of array.each(...) as in jQuery style

如果你想遍历一个节点列表，实际上它看起来像jQuery：

dojo.query('query string').filter(...).forEach(...);

阅读文档以获取更多详细信息。

- Stephen Chung

---

如何使用dojo在DOM节点上执行prev()和next()操作。 - Boopathi Rajaa

我不确定Dojo是否具有这些内置功能。您可能需要使用JavaScript的nextSibling或previousSibling。 - Stephen Chung

对于像nextAll、prevAll、siblings、parents这样的函数，我们是否应该在JavaScript中重新定义，而Dojo则原生支持这些功能。 - Boopathi Rajaa

@Boopathi Rajaa，Dojo 不会 替换 JavaScript。它通过添加在不同浏览器上不标准或不一致的东西来增强 JavaScript。对于在所有浏览器上都标准的内容，则不进行更改。 - Stephen Chung

Answer 2

我想出了一种方法，应该会起作用。不知道是否是最好的解决方案。

必须导入NodeList-traverse才能使用像children、parent这样的函数... 参考：http://dojotoolkit.org/reference-guide/dojo/NodeList-traverse.html#dojo-nodelist-traverse

dojo.require("dojo.NodeList-traverse");

参考：http://dojotoolkit.org/reference-guide/dojo/NodeList.html

这是一个关于Dojo NodeList的参考指南。NodeList是一个类似于数组的对象，它包含了一组DOM节点，并提供了一些方便的方法来操作这些节点。你可以使用NodeList来选择和操作文档中的元素，例如通过CSS选择器或标签名进行选择。

var nl = new dojo.NodeList(this);

nl.parent();

- Boopathi Rajaa

---

+1 为发布您找到的解决方案作为答案。这就是stackoverflow精神 :-) 我其实不确定是否有更“正确”的解决方案 - 这是jQuery感觉更优雅的领域之一。我确信Dojo开发人员有理由不将原始DOM节点与增强的“Dojo DOM节点”混合使用。 - Frode

@Frode，我认为它们是不同的设计哲学。Dojo更多地采用“过程式”风格。jQuery则更多地采用面向对象和“函数式”风格。个人认为jQuery更加优雅，但Dojo避免了在构建大量jQuery对象时（至少在旧浏览器中）出现的性能惩罚...谷歌的Closure库也采用了相同的原因，采用了过程式风格来构建工业级Web应用程序。 - Stephen Chung

Dojo是完全面向对象的，但并非仅限于基础操作。如果您只是做一些简单的事情，那么jQuery可能会更容易。但如果您开始构建完整的RIA应用程序，您将看到OOP和功能强大的Dojo。您可能不会使用许多jQuery使得某些低级操作稍微好一点的东西。实际上，我会说反过来，即jQuery并不真正支持OOP。仅仅给予链式调用很多函数并不能使任何东西成为OOP。 - David Raab

如果jQuery并没有真正执行面向对象的代码，那么你能告诉我JavaScript中的OOP是什么意思吗？使用作用域创建私有和公共方法和变量（抽象数据）...并且具有扩展/继承的能力...这不就是JavaScript中OOP的含义吗？ - Boopathi Rajaa

@Sid Burn，你说得完全正确。在jQuery中只有一个对象并不真正使它成为面向对象编程。jQuery缺乏正式的类定义和继承机制，尽管有许多插件可以实现相同的功能。 - Stephen Chung

@Boopathi Rajaa，JavaScript本身严格意义上不是面向对象的（包含OOP系统的三个特征），它使用“原型继承”，而不是对象继承。然而，这些特性非常相似，你可能可以在宽泛的意义上称之为OOP。有一些方法可以在JavaScript上“模拟”（或伪造）一个OOP层。Dojo提供了这种机制，你可以编写非常接近真正OOP系统的代码。jQuery没有正式的机制，但依赖于插件。 - Stephen Chung