使用Javascript通过xPath动态修改HTML源代码

Question

假设我有一个HTML源代码，类似于：

<a href="http://google.com">Google</a>
<a href="http://yahoo.com">Yahoo</a>
<a href="http://msn.com">MSN</a>

有没有什么方法可以让我使用Javascript用xPath修改这个HTML源代码：找到所有锚，在它们前面加上文本，并使用警告框显示新的HTML源代码？

<a href="http://google.com">Visit Google</a>
<a href="http://yahoo.com">Visit Yahoo</a>
<a href="http://msn.com">Visit MSN</a>

Answer 1

如果您需要XSLT的全部功能来进行多次转换，可以使用类似sarissa的东西。

我认为您可能会将xPath表达式与CSS选择器混淆，因此对于这种情况，我建议使用以下jQuery代码：

// Put a script tag including jquery.js here
<div id="container">
  <a href="http://google.com">Google</a>
  <a href="http://yahoo.com">Yahoo</a>
  <a href="http://msn.com">MSN</a>
</div>
<script>
    $("a").prepend("Visit ");
    alert($("#container").html());
</script>

谨致问候。

Answer 2

简短的回答是"否"。

XPath是一种在DOM中选择元素的方法。它也可以用于读取属性和计算值，但不能用于修改DOM。您可能会混淆XSLT，它使用XPath表达式来选择元素，并可以返回修改后的文档。您可以使用一个通用的XML文档，然后使用XSLT使用不同的XSL样式表来生成各种语言的不同文档，比如HTML、XML、postscript等等

无论如何，在这种情况下，为什么要使用XPath呢？有一个document.links集合需要简单的属性访问，不需要函数调用或计算XPath表达式。您可以通过分配给W3C textContent或专有的MS innerText属性来更改简单的文本内容（同样，简单的属性访问而不是函数调用）：

function modLinks() {
  var links = document.links;
  var i = links.length;
  while (i--) {
    setText(links[i], 'Visit ' + getText(links[i]) );
  }
}
// Simple helper functions, can be made faster and more robust
// but sufficient for an example. 
function getText(el)  {
  if (typeof el.textContent == 'string') {
    return el.textContent;
  } else if (typeof el.innerText == 'string') {
    return el.innerText;
  }
}
function setText(el, text)  {
  if (typeof el.textContent == 'string') {
    el.textContent = text;
  } else if (typeof el.innerText == 'string') {
    el.innerText = text;
  }
}

Answer 3

如上所述，XPath不能有效地处理未解析的字符串。

因此，一种方法是将某个元素（例如不可见元素）的innerHTML设置为HTML源字符串。

这将导致将源解析为DOM树。然后您可以使用myDiv.getElementsByTagName（'a'）或jQuery$（'a'，myDiv）来查找链接。（您甚至可以使用XPath .//a，但为什么要使用更复杂的工具，而更简单的工具就可以了？）

然后，一旦您修改了字符串，例如，正如某人所说的使用jQuery $('a', myDiv).prepend("Visit ");，您就可以通过检索不可见的div的innerHTML属性来输出修改后的HTML。