Une manière intelligente d'accéder à des nœuds DOM profondément imbriqués

Question

Je suis sur le point d'écrire une extension pour Google Chrome Browser. C'est un script de contenu qui change la largeur d'une table. Ceci est le XPath pour la table mentionnée:

/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] 

Malheureusement, il est impossible d'accéder à la table avec getElementById, getElementsByName ou similaire. J'ai trouvé la solution suivante:

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" 

Bien que cette solution fonctionne, je ne suis pas satisfait. Y a-t-il une façon plus intelligente de faire cela?

Answer 1

Chrome prend en charge la fonction document.evaluate qui peut sélectionner des éléments par XPath.

La signature:

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

Dans votre cas, ce sera

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; 

Vous pouvez également utiliser XPathResult.UNORDERED_NODE_ITERATOR_TYPE pour obtenir une liste de nœuds par un itérateur.

Edit: Vous pouvez également utiliser la transformation XPath à un sélecteur de CSS3 et utiliser 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);