3

我有一堆 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] 或类似的东西。任何帮助将不胜感激。

4

2 回答 2

4

您需要获取textContent或innerText属性：

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

innerText由 IE 实现，而textContent由符合标准的浏览器实现。

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

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

根据您在下面的评论，我们可以安全地假设空白干扰了您示例中的childNodes属性。这是正常的 - childNodes返回作为给定元素的直接后代的元素和文本节点。另一种方法是在较新的浏览器中使用孩子：

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

在 Firefox 3.5 之前和其他较旧的浏览器中不支持children 。您可以将li.getElementsByTagName("a")用于您发布的示例 - 但请记住，它将返回所有<a>元素后代，而不仅仅是直接子元素。

于 2010-09-27T13:05:57.333 回答
2

那这个呢：

var li = document.getElementById(1);
var a = li.getElementsByTagName('a');

alert(a[0].innerHTML);

在任何人都可以建议只使用 jQuery 之前，这里是等价的：

$('li#someid a').html();

在我看来，如果你在没有 jQuery 的情况下做得很好，请不要使用它。

于 2010-09-27T13:04:56.010 回答