如何使用ExtJS中的父类名获取子元素innerhtml

Question

我有一个HTML：

WebServiceTemplate

代码：

<div class="parent">
   <span class="child">Child elements</span>
</div>

O / P：

Ext.query('.parent'); //give me

如何访问子元素以便我可以更新子文本值？

Answer 1

解决这个问题的一个不太优雅的方法可能是：

Ext.query('.parent')[0].childNodes[1].innerHTML  = 'Your text here';

当您使用Ext.query ('.parent')时，您将获得具有parent类的对象的所有子对象(DOM)的数组。在这种情况下，阵列中只返回一个项。此项是div，其类为parent。

此项有三个孩子，#text，span和#text。第一个#text指的是span之前的文本，span是我们的目标对象，第三个对象是#text，它是后面的文本span。

因此，您需要访问数组的第二个元素，在本例中为span。然后只需访问innerHTML属性并设置文本。

Here fiddle，请查看示例中的index.html文件。

Answer 2

Ext.query('.parent span.child')[0].innerHTML  = 'Your new child text';

查询.parent span.child与child div中的班级parent匹配所有范围。 Ext.query返回一个DOM对象数组，您可以操作它们。

如果您需要Ext.dom.Element的对象，可以使用true作为secound参数调用查询函数。有关更多信息，请参阅documentation of ExtJs 6。

A working fiddle.

Answer 3

以下是另一种方式：使用setText fiddle