如何从 Javascript 中的 DOM 中的标签返回文本内容

Question

我有以下代码：

    <table>
    <tbody style="font-size: 50px;">
        <tr>
            <td style="color: #ff00ff; background-color: #ffffff;">Q</td>
            <td style="color: #442244; background-color: #442244;">Y</td>
            <td style="color: #ffff00; background-color: #442244;">A</td>
        </tr>
        <tr>
            <td style="color: #ffeefe; background-color: #990000;">Q</td>
            <td style="color: #ffff00; background-color: #ffff00;">M</td>
            <td style="color: #000000; background-color: #ff7777;">O</td>
        </tr>
    </tbody>
</table>

我必须在 Javasript 中编写 function ，它返回数组中的所有字母。 然后我必须返回所有字母
颜色 == 背景颜色

Answer 1

1. 下面的代码返回您提交的 html 中的所有字母。

Array.from(document.getElementsByTagName("td")).map(cell => cell.innerText)

2. 下面的代码返回所有 td 颜色和 bg-color 值相等的字母。

Array.from(document.getElementsByTagName("td")).filter(cell => cell.style.color && cell.style.backgroundColor && cell.style.color === cell.style.backgroundColor).map(cell => cell.innerText);

Answer 2

您可以使用document.getElementByTagName获取tds数组，然后根据颜色 == 背景颜色将这些元素reduce为字母：

 const letters = [...document.getElementsByTagName('td')].reduce((a, el) => ( el.style.color === el.style.backgroundColor && a.push(el.textContent), a ), []) console.log(letters)

 <table> <tbody style="font-size: 50px;"> <tr> <td style="color: #ff00ff; background-color: #ffffff;">Q</td> <td style="color: #442244; background-color: #442244;">Y</td> <td style="color: #ffff00; background-color: #442244;">A</td> </tr> <tr> <td style="color: #ffeefe; background-color: #990000;">Q</td> <td style="color: #ffff00; background-color: #ffff00;">M</td> <td style="color: #000000; background-color: #ff7777;">O</td> </tr> </tbody> </table>

Answer 3

这个 function 波纹管可以做你需要的：

 function getLetters() { const tds = Array.from(document.querySelectorAll("td")); return tds.filter(td => td.style.color === td.style.backgroundColor).map(td => td.textContent); } const letters = getLetters(); console.log(letters)

 <table> <tbody style="font-size: 50px;"> <tr> <td style="color: #ff00ff; background-color: #ffffff;">Q</td> <td style="color: #442244; background-color: #442244;">Y</td> <td style="color: #ffff00; background-color: #442244;">A</td> </tr> <tr> <td style="color: #ffeefe; background-color: #990000;">Q</td> <td style="color: #ffff00; background-color: #ffff00;">M</td> <td style="color: #000000; background-color: #ff7777;">O</td> </tr> </tbody> </table>

Answer 4

 const hexToRgb = hex => 'rgb(' + hex.match(/[\da-f]{2}/g).map(c => parseInt(c, 16)).join(', ') + ')'; let charsWithBackgroundColor = backgroundColor => [...document.querySelectorAll('td')].filter(td => td.style.backgroundColor === hexToRgb(backgroundColor)).map(td => td.textContent); console.log(charsWithBackgroundColor('#442244')); // ['Y', 'A']

 <table> <tbody style="font-size: 50px;"> <tr> <td style="color: #ff00ff; background-color: #ffffff;">Q</td> <td style="color: #442244; background-color: #442244;">Y</td> <td style="color: #ffff00; background-color: #442244;">A</td> </tr> <tr> <td style="color: #ffeefe; background-color: #990000;">Q</td> <td style="color: #ffff00; background-color: #ffff00;">M</td> <td style="color: #000000; background-color: #ff7777;">O</td> </tr> </tbody> </table>