javascript - 访问深度嵌套 DOM 节点的智能方法

Question

我即将为 Google Chrome 浏览器编写一个扩展程序。这是一个更改表格宽度的内容脚本。这是上述表的 XPath:

/html/body/table/tbody/tr/td/table[2]/tbody/tr/td[3]

/html/body/table/tbody/tr/td/table[2]/tbody/tr/td[3]/fieldset/div[1]/div[2]
/html/body/table/tbody/tr/td/table[2]/tbody/tr/td[3]/fieldset/div[2]/div[2]
/html/body/table/tbody/tr/td/table[2]/tbody/tr/td[3]/fieldset/div[3]/div[2]

遗憾的是，无法使用 getElementById、getElementsByName 或类似方法访问该表。我找到了以下解决方案:

document.getElement("body").childNodes[7].childNodes[1].childNodes[0].childNodes[3].childNodes[9].childNodes[1].childNodes[0].childNodes[5].width=500

document.getElement("body").childNodes[7].childNodes[1].childNodes[0].childNodes[3].childNodes[9].childNodes[1].childNodes[0].childNodes[5].childNodes[3].childNodes[3].childNodes[3].style.width="300px"
document.getElement("body").childNodes[7].childNodes[1].childNodes[0].childNodes[3].childNodes[9].childNodes[1].childNodes[0].childNodes[5].childNodes[3].childNodes[7].childNodes[3].style.width="300px"
document.getElement("body").childNodes[7].childNodes[1].childNodes[0].childNodes[3].childNodes[9].childNodes[1].childNodes[0].childNodes[5].childNodes[3].childNodes[5].childNodes[3].style.width="350px"

虽然这个解决方案有效，但我对此并不满意。有更聪明的方法吗？

Answer 1

Chrome 支持 document.evaluate 函数，可以通过 XPath 选择元素。

签名:

var xpathResult = document.evaluate(
 xpathExpression, 
 contextNode, 
 namespaceResolver, 
 resultType, 
 result
);

在你的情况下，这将是

var expr = "/html/body/table/tbody/tr/td/table[2]/tbody/tr/td[3]";
var td = document.evaluate(expr, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;

您还可以使用 XPathResult.UNORDERED_NODE_ITERATOR_TYPE 通过迭代器获取节点列表。

编辑:您还可以使用将 XPath 转换为 CSS3 选择器并使用 document.querySelector:

var expr = "body > table > tbody > tr > td > table:nth-of-type(2) > tbody > tr > td:nth-of-type(3)";
var td = document.querySelector(expr);