如何讓innerhtml接近跨度id javascript

Question

你好傢伙我有一個問題，我正在創建一個谷歌瀏覽器擴展，可以從網站中提取一些信息並將它們保存在一個txt文件中。

的問題是，我想exctract接近跨度ID，這是我需要能夠exctract代碼中的innerHTML的數據：

 <tr class="gridRow_even"> 
     <td class="fieldLabel_150"> 
      Date 
     </td> 
     <td> 


      <span id="123"></span> 
      12/20 

     </td> 
    </tr> 

我想保存爲12/20的TXT通常我通過ID獲取元素，但在這種情況下，我不知道如何得到它，我試圖同時做這使用jQuery這樣的：

VAR DT = $（「TD：包含（/）」）

但它給了我對象對象，當我試圖保存爲txt數據exctracted.I不知道如何做到這一點我是變得瘋狂，請幫助！

Answer 1

const text = Array.prototype.filter.call(document.querySelectorAll('td'), el => el.querySelector('span#a123'))[0].innerText; 
 
console.log(text);

<table> 
 
    <tr class="gridRow_even"> 
 
    <td class="fieldLabel_150">Date</td> 
 
    <td> 
 
     <span id="a123"></span> 
 
     12/20 
 
    </td> 
 
    </tr> 
 
</table>

的說明之前，關於這個例子兩個快速筆記：

• document.querySelector('td')似乎不工作，除非它在正確的表中。這可能是你的真實例子，在<table>，所以這是一個有爭議的問題。如果不是，你需要想出一個稍微不同的方法來找到它（這可能是另一個答案的主題）。
• 123不是有效的ID。一個ID必須以字母開頭。再一次，你的真實目標可能被命名爲罰款。如果確實以數字開頭，請改爲使用el.querySelector('span[id=123]')。

至於代碼，基本上都用document.querySelectorAll('td')把所有的td元素（如果他們是在一個特定的表，使用，以及像'#tableId td'）。

然後，我使用Array.prototype.filter()過濾所有td元素，查找包含我們想要查找的範圍的任何元素。必須使用Array.prototype.filter.call()，因爲document.querySelectorAll()的結果實際上是一個NodeList，它類似於數組，但不是實際的數組。

一旦我過濾了，我只是從過濾器中得到第一個元素，並得到它的innerText。

如果有可能不止一個td有在頁面中span，使用.map(el => el.innerText)而不是[0].innerText創建的所有值的數組來代替。

另一種方法是找到所有的<span>元素，然後遍歷並得到它們的每個元素。這需要儘管<span>是<td>的直接孩子，所以根據您的實際使用情況可能會不太靈活。

const text = Array.prototype.map.call(document.querySelectorAll('span#a123'), el => el.parentNode)[0].innerText; 
 
console.log(text);

<table> 
 
    <tr class="gridRow_even"> 
 
    <td class="fieldLabel_150">Date</td> 
 
    <td> 
 
     <span id="a123"></span> 
 
     12/20 
 
    </td> 
 
    </tr> 
 
</table>

如果你肯定知道它會永遠只能是一個跨度，您可以使用它代替：

const text = document.querySelector('span#a123').parentNode.innerText; 
 
console.log(text);

<table> 
 
    <tr class="gridRow_even"> 
 
    <td class="fieldLabel_150">Date</td> 
 
    <td> 
 
     <span id="a123"></span> 
 
     12/20 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

你這是怎麼得到預期的輸出

$("span#123").parent().text(); 

簡單的JavaScript

document.getElementById("123").parentNode.innerText; 

Answer 3

的Javascript：

var desired_innerHTML = document.getElementById('123').parentElement.innerHTML; 

jQuery的

var desired_innerHTML = $('#123').parent().html(); 

Answer 4

12/20是一個文本節點。您可以通過.nodeType過濾.contents()的結果。

var DT = $("td:contains(/)").contents().filter(function(idx, ele) { 
 
    return ele.nodeType == Node.TEXT_NODE && ele.textContent.trim().length != 0; 
 
}); 
 
console.log('Txt: ' + DT.text().trim())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<table> 
 
    <tbody> 
 
    <tr class="gridRow_even"> 
 
     <td class="fieldLabel_150"> 
 
      Date 
 
     </td> 
 
     <td> 
 

 

 
      <span id="123"></span> 
 
      12/20 
 

 
     </td> 
 
    </tr> 
 
    <tr class="gridRow_even"> 
 
     <td class="fieldLabel_150"> 
 
      Date 
 
     </td> 
 
     <td> 
 

 

 
      <span id="xxx"></span> 
 
      
 

 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>