如何使用父类名得到一个子元素的innerHTML在ExtJS的

问题描述：

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

代码：

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

O/P：

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

怎么办我可以访问子元素，以便我可以更新子文本值？解决这可能是

我建议你提供一些更多的上下文。您可以限制查询，还是需要搜索文档中的所有节点？ –

棒极了！感谢所有的回应......现在作品!!! – user1234

答

一个不是很优雅的方式：

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

当您使用Ext.query ('.parent')，你让所有的孩子对象的数组有parent类对象的(DOM)。在这种情况下，数组中只会返回一个项目。这项目是div其级别是parent。

This item有三个孩子，#text,span和#text再次。第一个#text指的是span之前的文本，span是我们的目标对象，第三个对象是#text，它是位于span之后的文本。

所以你需要访问数组的第二个元素，在这个例子中是span。然后只需访问innerHTML属性并设置文本。

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

答

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

查询.parent span.child比赛与在parent DIV类child所有的跨度。 Ext.query返回一个DOM对象数组，您可以对其进行操作。

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

答

这里的另一种方式：使用的setText fiddle