获取列表项中的文本并使用javascript进行修改 [英] get the text in a list item and modify it with javascript

问题描述

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

 < li id ='1'class ='attachment'> 
< a href ='link.html'> TEXT VALUE我想读取和修改< / 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 ，未定义或[对象文本]或类似的东西。任何帮助将不胜感激。

解决方案

您需要获取 textContent 或 innerText 属性：

  var li = document.getElementById（id）; 
 var t =textContentin li.childNodes [0]？ textContent：innerText; 
 alert（li.childNodes [0] [t]）; 
  

innerText 由IE和 textContent 是由符合标准的浏览器实现的。

另外，如果您确定元素的第一个子元素是文本节点，您可以使用

  alert（li.childNodes [0] .childNodes [0] .nodeValue）; 
  

---

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

  //第一个使用`children`的例子代替
 var li = document.getElementById（id）; 
 var t =textContentin li？ textContent：innerText; 
 alert（li.children [0] [t]）; 
 
 //第二个使用`children`的例子
 alert（li.children [0] .childNodes [0] .nodeValue）;在Firefox 3.5以及其他旧版浏览器中不支持
  

子。您可以使用 li.getElementsByTagName（a）作为您发布的示例 - 但请记住，它会返回所有元素后代的所有< a>不只是直接的孩子。

I have a bunch of HTML list items and what i want is to be able to read the text of a list item and then be able to give the user the ability to modify it. the structure of each list item is the same:

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

at the moment i am able to get the list item using

li = document.getElementById(id);

but if i get it to print out something like

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

i am never able to get it to print "TEXT VALUE I WANT TO READ AND MODIFY", it always gives null, undefined or [object Text] or something similar. any help would be greatly appreciated.

解决方案

You need to get the textContent or innerText properties:

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

innerText is implemented by IE and textContent is implemented by standards compliant browsers.

Alternatively, if you're certain that the element's first child will be a text node, you can use

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

children isn't supported pre Firefox 3.5 and in other older browsers. You could use li.getElementsByTagName("a") for the example that you've posted - but bear in mind that it will return all <a> element descendants, not just immediate children.

这篇关于获取列表项中的文本并使用javascript进行修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！