9

我现在正在研究 ExtJS 4.2。访问 DOM 元素有 3 种方式——获取、选择、查询。

我想知道它们之间的区别。为什么要三种不同的方法？

我们在这里有一个问题：SVO

但它没有给我任何明确的答案。寻找特定/详细的答案。

如果您能帮助解释，将不胜感激。

提前致谢 ：-）

根据以下答案进行编辑：

我不太喜欢 jQuery，所以无法通过比较来理解。谁能帮助我区分 Ext.element 和复合元素？

编辑2：

什么是 Ext.dom.Element？和 Ext.element 有什么不同吗？如果有人可以对“Ext.fx.Anim”包有所了解？

4

1 回答 1

22

Ext.get

Ext.get类似于document.getElementById您可以提供 DOM 节点的 ID 并检索包装为Ext.dom.Element. 您还可以提供 DOM 节点或现有元素。

// Main usage: DOM ID
var someEl = Ext.get('myDivId');

// Wrap a DOM node as an Element
var someDom = document.getElementById('myDivId');
someEl = Ext.get(someDom);

// Identity function, essentially
var sameEl = Ext.get(someEl);

Ext.query

Ext.query允许您使用 CSS/XPath 选择器选择 DOM 节点数组。这在使用自定义组件或数据视图时非常方便，并且您需要比 DOM ID 更强大的选择机制。

// Get all DOM nodes with class "oddRow" that are children of
// my component's top-level element.
var someNodes = Ext.query('.oddRow', myCustomComponent.getEl().dom);

Ext.select

Ext.select本质上是 Ext JS 对 jQuery 选择器的回答。给定一些 CSS/XPath 选择器，它返回一个表示元素集合的对象。这CompositeElement具有过滤、迭代、切片集合的方法。

最重要的是，支持对集合中的每个元素进行操作的所有方法的可CompositeElement链接版本，这使得该方法非常强大。Ext.dom.ElementExt.fx.Anim

编辑 1：AnExt.Element表示单个 DOM 节点，而 anExt.dom.CompositeElement表示可以通过单个接口影响的 DOM 节点集合。因此，给出以下示例：

// Set the height of each table row using Ext.query
var tableRowNodes = Ext.query('tr', document.getElementById('myTable'));
Ext.Array.each(tableRowNodes, function (node) {
    Ext.fly(node).setHeight(25);
});

// Set the height of each table row using Ext.select
var compositeEl = Ext.select('#myTable tr');
compositeEl.setHeight(25);

您可以看到使用Ext.dom.CompositeElement.

编辑 2：Ext JS 支持替代类名的概念。将它们视为常用类的快捷方式。Ext.Element是替代类名，Ext.dom.Element可以互换使用。

Ext.fx.Anim是一个代表动画的类。通常不直接使用，它是在对元素或组件执行动画时在幕后创建的。比如第一个参数Ext.Component#hide就是动画目标。

于 2013-08-16T14:55:12.150 回答