JavaScript解析DOM关系字符串

Question

是否可以解释字符串DOM关系路径？我希望能够将关系传递给给定的节点，并在该函数内对其进行处理。例如，我有这样的功能：

function doSomeStuff (node, domPath) { 

    var targetNode = node.domPath; 

} 

和通话将

doSomeStuff(myElement, "parentNode.previousSibling") 

的targetNode是勿庸置疑“未定义” - 这可能解析在此实例的字符串？

Answer 1

您可以使用eval但我不推荐它，因为它可以打开安全漏洞和滥用的大门。

想像这样的一个文件：

<p> 
    This is a <strong>test</strong>. With a <span>span</span>. 
</p> 
<ul> 
    <li>one</li> 
    <li>two</li> 
</ul> 

这个函数有一个节点作为起点并解决了一个“路径”，它由一系列由句点分隔的字段名称的，针对该节点：

function resolvePath(node, path) { 
    var start = path.split(".", 1)[0]; 
    var next = node[start]; 
    var remainder = path.slice(start.length + 1); 
    if (remainder.length === 0) 
     return next; 
    return resolvePath(next, remainder); 
} 

通过上面的文件中，two的console.log来电秀true：

var span = document.querySelector("span"); 
var ul = document.querySelector("ul"); 
console.log(resolvePath(span, "parentNode.nextElementSibling") === ul); 
console.log(resolvePath(ul, "previousElementSibling.lastElementChild") === span); 

这是一个概念证明。我没有照顾过路径中无关空间的事情。此外，如果路径中的任何步骤（除最后一个步骤之外）都解析为未定义的值，则会引发炸弹袭击。我认为这是可取的，因为它可以防止在路径上输入错误，但可能有些情况下，轰炸不是所需的行为。根据需要调整。