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、未定義、または[オブジェクトテキスト]などが表示されます。どんな助けでも大歓迎です。

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

子供はFirefox3.5以前およびその他の古いブラウザではサポートされていません。投稿した例では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 に答える