Зацикливание html-div с помощью javascript и изменение внутреннего html-кода каждого div

#javascript #html #loops #dom-events

#язык JavaScript #HTML #петли #дом-события

Вопрос:

 lt;!DOCTYPE htmlgt; lt;html style="background-color: #D1D1D1 "gt;  lt;headgt;  lt;meta charset="utf-8" /gt;  lt;link rel="stylesheet" type="text/css" href="./main.css" /gt; lt;/headgt; lt;body id="body"gt;   lt;h1 id="headerTitle"gt;lt;/h1gt;   lt;divgt;  lt;p id="header"gt;November 29thlt;/pgt;  lt;/divgt;   lt;divgt;  lt;p id="header"gt;November 29thlt;/pgt;  lt;/divgt;   lt;divgt;  lt;p id="header"gt;November 29thlt;/pgt;  lt;/divgt;   lt;script src="./main.js"gt;lt;/scriptgt; lt;/bodygt; lt;/htmlgt;  

Я пытаюсь пройтись по телу, войти в каждый раздел и изменить текст 29 ноября. Самое близкое, что у меня получилось, — это вот это:

 var body = document.getElementsByTagName("div")  for (i = 0; i lt; body.length; i  ) {  document.getElementById("header").innerHTML = "Hello World!"; }  

но это меняет только первый div и останавливается.

Комментарии:

1. Несколько элементов не могут совместно использовать один и тот же идентификатор.

Ответ №1:

Это только изменение первого div , так как идентификатор должен принадлежать только одному элементу, поэтому он останавливается после того, как найдет этот элемент. Измените поле идентификатора в p тегах на class , и вы могли бы использовать

 let body = document.getElementsByClassName() for (let element of body) {  element.innerHTML = "..." }  

Ответ №2:

Как уже упоминалось, у вас не должно быть более 1 элемента с одинаковым идентификатором. Изменив идентификаторы на класс, этот код должен работать:

 [...document.querySelectorAll('.header')].map((elem) =gt; elem.textContent = 'Hello World!');  

Ответ №3:

//Просто чтобы изменить данные в div, вы можете сделать это

var div_s = document.getElementsByTagName(«div»)

 for (i = 0; i lt; div_s.length; i  ) {  div_s[i].innerHTML = "Hello World!";  }  

или чтобы изменить данные в p, вам нужны уникальные идентификаторы для каждого тега, как показано ниже.

 lt;div title = "header1"gt;  lt;p id="header1"gt;November 29thlt;/pgt; lt;/divgt;  lt;div title = "header2"gt;  lt;p id="header2"gt;November 29thlt;/pgt; lt;/divgt;  lt;div title="header3"gt;  lt;p id="header3"gt;November 29thlt;/pgt; lt;/divgt; lt;scriptgt;  var divs = document.getElementsByTagName('div')   for (i = 0; i lt; divs.length; i  ) {  document.getElementById(divs[i].title).innerHTML = "Hello World!";  } lt;/scriptgt;