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); 

這是一個概念證明。我沒有照顧過路徑中無關空間的事情。此外，如果路徑中的任何步驟（除最後一個步驟之外）都解析爲未定義的值，則會引發炸彈襲擊。我認爲這是可取的，因爲它可以防止在路徑上輸入錯誤，但可能有些情況下，轟炸不是所需的行爲。根據需要調整。