解析引用的行为
在onpath属性中找到对其进行引用的所有元素,并将它们替换为对应的DOM元素。
resolveReferences(els, parentEl)
参数 | 描述 |
---|---|
els | 对onpath属性进行引用的元素集合。 |
parentEl | 元素的直接父级元素。 |
无返回值。
<!DOCTYPE html>
<html>
<body>
<div id="parent">
<div id="item-1" onpath="item-2">item 1</div>
<div id="item-2">item 2</div>
</div>
<script src="yuka.js"></script>
<script>
const parentEl = document.getElementById('parent');
const els = parentEl.querySelectorAll('[onpath]');
Yuka.OnPathBehavior.resolveReferences(els, parentEl);
</script>
</body>
</html>
在上述示例中,我们定义了两个元素,分别为item-1
和item-2
。其中,item-1
的onpath
属性值为item-2
,表示它引用了item-2
元素。当我们调用resolveReferences
方法后,会解析出item-1
元素引用的item-2
元素,并将其替换为对应的DOM元素。最终,在页面上呈现出来的结果为:
item 2
需要使用onpath
属性来表示元素之间的引用关系。在此基础上,需要将之前被引用的元素替换为实际的DOM元素,以便在页面上呈现出正确的内容。
暂无限制。