获取列表项中的文本并使用 javascript 修改它

我有一堆 HTML 列表项，我想要的是能够读取列表项的文本，然后能够让用户能够修改它。每个列表项的结构是相同的：

<li id='1' class='attachment'>
    <a href='link.html'>TEXT VALUE I WANT TO READ AND MODIFY</a>
    <a href='link2.html'><img src'img1.jpg'></a>
    <a href='link3.html'><img src'img2.jpg'></a>
</li>

目前我可以使用获取列表项

li = document.getElementById(id);

但如果我让它打印出类似的东西

li.childNodes[?] 
li.childNodes[?].data
li.childNodes[?].nodeValue etc...

我永远无法让它打印“我想读取和修改的文本值”，它总是给出 null、未定义或 [object Text] 或类似的内容。任何帮助将不胜感激。

您需要获得文本内容 or 内部文本特性：

var li = document.getElementById(id);
var t = "textContent" in li.childNodes[0] ? "textContent" : "innerText";
alert(li.childNodes[0][t]);

内部文本是由 IE 实现的文本内容由符合标准的浏览器实现。

或者，如果您确定该元素的第一个子节点将是文本节点，则可以使用

alert(li.childNodes[0].childNodes[0].nodeValue);

---

Based on your comment below, we can make a safe assumption that white-space is interfering with the childNodes property in your example. This is normal - childNodes returns both elements and text nodes that are direct descendants of the given element. The alternative is to use children in newer browsers:

// 1st example using `children` instead
var li = document.getElementById(id);
var t = "textContent" in li ? "textContent" : "innerText";
alert(li.children[0][t]);

// 2nd example using `children` instead
alert(li.children[0].childNodes[0].nodeValue);

childrenFirefox 3.5 之前的版本和其他旧版浏览器不支持。你可以使用li.getElementsByTagName("a")对于您发布的示例 - 但请记住它将返回所有元素后代，而不仅仅是直系子元素。