Javascript 如何访问riot.js中的子元素

如果我有一个自定义的

riot

标签，上面有一个

p

，如下所示：

<custom>
  <p>This is a text</p>
</custom>

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>

这是一篇课文

如何从

标记中访问

元素

更新：我收到了一大堆答案，这些答案都是从DOM中选择它的方法。我想要的是一种从组件库本身中选择内部

p

标记的方法。我在寻找一个更具体的答案。例如，使用

this.$.content.getDistributedNodes（）

您是否尝试过：

nodes = document.getElementsByTagName('custom');
for (var i = 0; i< nodes.length; ++i) {
    paragraphs = nodes[i].getElementsByTagName('p');
    alert(paragraphs[0].innerText);
}

nodes=document.getElementsByTagName（'custom'）；
对于（变量i=0；i

getElementsByTagName

返回一个HTML集合，您可以进一步查询该集合：

这里有一个快速而肮脏的提琴：

似乎可以使用自定义标记：

document.querySelector（'customp'）。innerHTML='testcomplete'
这是一个测试

这是一个测试

这是一项测试

请参阅

我们可以访问

儿童

customTagAndLoops = this.children

还可以通过

根目录
访问DOM

iAmDom = this.root
childNodes = this.root.childNodes
p = this.root.querySelector('p')

更新-2015年2月14日

儿童
属性在Riot.js v2.0.9中被废弃。访问子元素的唯一方法是使用
root
如果在内部标记中添加id或name属性，则可以通过
self
访问它

iAmDom = this.root
childNodes = this.root.childNodes
p = this.root.querySelector('p')

// with 'id'
<custom><p id="pTest">Test</p></custom>

// with 'name'
<custom><p name="pTest">Test</p></custom>

//带有“id”
测试

//“名字”
测试


在js部分：

self = this

self.pTest
>>  <p id=pTest>Test</p>

self=this
自我测试
>>测试


在Riot v2.0.10中测试，Riot仅提供4个属性来访问当前标签中的数据：


这个选择
这是我的父母
这是根
这是标签


编辑

除此之外，您还可以直接访问
命名元素
：

<my-tag>
  <p name="foo">Hi, I'm foo</p>
  <script>
    console.log(this.foo);
  </script>
</my-tag>


你好，我是福

console.log（this.foo）；


/edit

没有对自定义标记中定义的任何元素的直接引用；剩下的部分可以归结为纯粹的旧JS（你可能喜欢也可能不喜欢）

与前面提到的其他方法一样，您可以使用dom方法访问元素。但是，在某些情况下，需要等待DOM实际加载。例如：

<my-tag>
  <p>yada</p>
  <script>
    console.log(this.root.querySelector('p'))
  </script>
</my-tag>


雅达

console.log（this.root.querySelector（'p'））

不会工作，因为DOM还没有准备好。而是将选择器包装在“mount”事件侦听器中，如下所示：

<custom>
  <p>This is a text</p>
</custom>

<my-tag>
  <p>yada</p>
  <script>
    this.on('mount', function() {
      console.log(this.root.querySelector('p'))
    })
  </script>
</my-tag>


雅达

this.on（'mount'，function（）{
console.log（this.root.querySelector（'p'））
})
Riotjs在最新版本中具有生成嵌套HTML的功能。

在您的情况下，您可以通过以下方式轻松完成：

在标记定义中：

<custom>
 <!-- tag markup-->
 <div id="place for custom html">
   <yield/>
 </div>
</custom>

<custom>
  <p>This is a text</p>
</custom>

<custom>
  <div id="place for custom html">
    <p>This is a text</p>
  </div>
</custom>



在您的应用程序中：

<custom>
 <!-- tag markup-->
 <div id="place for custom html">
   <yield/>
 </div>
</custom>

<custom>
  <p>This is a text</p>
</custom>

<custom>
  <div id="place for custom html">
    <p>This is a text</p>
  </div>
</custom>


这是一篇课文


呈现的html:

<custom>
 <!-- tag markup-->
 <div id="place for custom html">
   <yield/>
 </div>
</custom>

<custom>
  <p>This is a text</p>
</custom>

<custom>
  <div id="place for custom html">
    <p>This is a text</p>
  </div>
</custom>


这是一篇课文


从文件中

标记还提供了一种插槽机制，允许您在模板中的特定插槽中插入html内容

如果我正确理解了你的困境，RiotJs建议使用收益率

主标记声明：


我是一个头衔
你好，用户
你来了

子标记声明：



主要实施：


...
在riot 3.4.2中，您可以向想要ej的内部元素添加ref属性：

<custom>
  <p ref="myP">This is a text</p>
</custom>
...

// in js
this.refs.myP


这是一个文本
...
//在js中
此为.refs.myP

如果您的html中有以下内容：

<custom>
  <p>This is a text</p>
</custom>


这是一篇课文


然后在标记文件中可以使用



这将使页面上的
呈现为This.root.children[0]。innerText
看起来像是它获取了文本。顺便说一句，有一个纯js版本：
文档。querySelector（'custom'）。children[0]。innerHTML
。看见是一个专注于完成单个特定任务的最小库。它应该与其他工具一起使用，而不是作为“一揽子”框架。它的文档表明没有这样的方法，下面的答案（使用原生domapi）是正确的。