javascript - 如何更改 JavaScript 中既不是类也不是 id 的选择元素？

Question

所以我试图 用 JavaScript 改变下面的值。

<td class="fc-day fc-fri fc-widget-content fc-past" data-date="2020-05-15">
    <div>
        <div class="fc-day-number">15</div>
        <div class="fc-day-content">
            <div style="border: black 1px solid;">&nbsp;</div>
        </div>
    </div>
<td>

这是一个预先设计的模板，我不能直接对其进行更改。所以我正在尝试使用 JavaScript，但无法找到一种方法来做到这一点。

为了记录，这是一个日历模板，所以有很多.fc-days。区分每个.fc-day的是data-date属性。
我非常感谢您提前提供的帮助:)

Answer 1

如果可以使用父 div 的类名并且元素始终是该 div 内的第一个元素，则可以尝试使用 firstChild，因此请尝试：

const el = document.querySelector(".fc-day-content").firstChild.innerHtml;

Answer 2

使用与所需日期匹配的选择器，然后在其中选择适当的 DIV。

document.querySelector(".fc-day[data-date='2020-05-15'] .fc-day-content > div").innerHTML = 'new contents';

<table>
  <td class="fc-day fc-fri fc-widget-content fc-past" data-date="2020-05-15">
    <div>
      <div class="fc-day-number">15</div>
      <div class="fc-day-content">
        <div style="border: black 1px solid;">&nbsp;</div>
      </div>
    </div>
    <td>
</table>

Answer 3

我制作了一个可行的 JS Fiddle，可以帮助您参考。

function test(){
 document.querySelector(".fc-day-content > div").innerHTML = 'new contents';
}

请访问https://jsfiddle.net/q48frcgp/