Как изменить выбранный элемент, который не является ни классом, ни идентификатором в JavaScript?

Поэтому я пытаюсь изменить значение   ниже с помощью 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-day. Что отличает каждый .fc-day, так это свойство data-date.
Я очень ценю вашу помощь заранее :)


javascript queryselector
person Ryan Oh    schedule 19.05.2020    source источник
comment
О верно. Это ‹/td› — опечатка. И спасибо за совет. Это работает, но отчасти. Поэтому, когда я нажимаю «проверить» на своей странице, я вижу, что код в моем теге ‹script› изменился. Там отлично работает. Но фактический код в теге ‹body› не изменился. В чем проблема?   -  person Ryan Oh    schedule 19.05.2020
comment
Спасибо. Есть ли вероятность того, что библиотека, которую я использую (django-fullcalendar), каким-то образом заблокировала внесение изменений в свой шаблон?   -  person Ryan Oh    schedule 19.05.2020
comment
Возможно, это сгенерированный элемент, которым управляет библиотека. Я вижу, что вы пытаетесь изменить содержимое файла fc-day-content innerHtml, но я действительно думаю, что в виджете календаря должен быть метод для обработки и, следовательно, изменения этого содержимого вместо того, чтобы пытаться манипулировать им с помощью JS после его рендеринга. Возможно, вам нужно повторно отобразить элемент или обновить отображаемый элемент. Можете ли вы показать живой пример или какую библиотеку или виджет календаря вы используете?   -  person Bojoer    schedule 19.05.2020
comment
Ну, я использую библиотеку django-fullcalendar. И все, что у меня есть в моем шаблоне, это {% calendar %}. Когда я посмотрел на код через «проверить», я обнаружил, что часть, которую я хочу изменить, написана в коде выше, и попытался манипулировать с помощью JS. Я вижу, что изменения внесены в тег ‹script› на моей веб-странице, но нет изменений в фактическом коде в теге ‹body›.   -  person Ryan Oh    schedule 19.05.2020
comment
Тогда действительно вам придется сделать это по-другому. Вам нужен объект данных для добавления контента в элементы календаря. Также убедитесь, что для редактируемого параметра установлено значение True.   -  person Bojoer    schedule 19.05.2020
comment
Вы также можете самостоятельно создать собственный шаблон на Python, и на самом деле это использование плагина jQuery FullCalender, поэтому вам лучше следовать документации по этому вопросу. Прочтите этот вопрос о FullCalendar и настройке: 31507308/   -  person Bojoer    schedule 19.05.2020
comment
О, большое спасибо. Я попробую :)   -  person Ryan Oh    schedule 19.05.2020
comment
Давайте продолжим обсуждение в чате.   -  person Bojoer    schedule 19.05.2020

Ответы (3)


arrow_upward
0
arrow_downward

Вы можете попробовать использовать firstChild, если вы можете использовать имя класса родительского div и если элемент всегда является первым элементом внутри этого div, поэтому попробуйте:

const el = document.querySelector(".fc-day-content").firstChild.innerHtml;
person Bojoer    schedule 19.05.2020
comment
Если вам нужны все элементы на странице, вы должны использовать querySelectorAll() и зацикливать его, чтобы получить каждый элемент. Вы также можете указать data-date=someValue, если вам нужен один или несколько конкретных элементов с определенной датой. - person Bojoer; 19.05.2020

arrow_upward
0
arrow_downward

Я сделал работающую JS Fiddle, которая поможет вам в справке.

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

Посетите страницу https://jsfiddle.net/q48frcgp/.

person shubham anand    schedule 19.05.2020

arrow_upward
0
arrow_downward

Используйте селектор, соответствующий нужной дате, затем выберите в нем соответствующий 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>

person Barmar    schedule 19.05.2020
comment
Спасибо. Это работает, но отчасти. Поэтому, когда я нажимаю «проверить» на своей странице, я вижу, что код в моем теге ‹script› изменился. Там отлично работает. Но фактический код в теге ‹body› не изменился. В чем проблема? - person Ryan Oh; 19.05.2020
comment
Мне нужны кавычки вокруг значения атрибута в селекторе. Теперь это работает. У меня возникла ошибка, когда я попробовал свой исходный код, а вы? - person Barmar; 19.05.2020