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

访问深层嵌套DOM节点的智能方法

1 个答案: