Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.11.2017, 23:47
Новичок на форуме
Отправить личное сообщение для 666FoX666 Посмотреть профиль Найти все сообщения от 666FoX666
 
Регистрация: 29.11.2017
Сообщений: 3

Получение доступа к дочерним элементам через класс
Здравствуйте! Имею следующий код:
<DOCTYPE !html>
<html>
	<head>
	</head>
	
	<body>
		<div id="test">
			<h1>First Child</h1>
			<p>Last Child</p>
		</div>
		
		<div class="test2">
			<h1>First Child #2</h1>
			<p>Last Child #2</p>
		</div>
		
		<div class="test2">
			<h1>First Child #2</h1>
			<p>Last Child #2</p>
		</div>
		
		<script>
			document.getElementById('test').lastElementChild.style.color = 'red';
			//document.getElementById('test').children[1].style.color = 'red';
			
			//document.getElementsByClassName('test2').lastElementChild.style.color = 'green';
			//document.getElementsByClassName('test2').children[1].style.color = 'green';
		</script>
	</body>
</html>

Вопрос в том, что используя в качестве идентификатора айди элемента (В первом варианте test), мы спокойно можем редактировать свойства необходимого дочернего элемента, а есть ли такой же способ для редактирования дочернего элемента для всех указанных классов?

P.S. Крайне желательно не использовать сторонние библиотеки, а силами самого JS.

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 29.11.2017, 23:54
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

666FoX666,
getElementsByClassName это список элементов, нужен индекс
Сообщение от 666FoX666
есть ли такой же способ для редактирования дочернего элемента для всех указанных классов?
циклом
Ответить с цитированием
  #3 (permalink)  
Старый 30.11.2017, 00:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

666FoX666,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .green  {
    color: #008000;
  }

  </style>

  </head>

  <body>
    <div id="test">
      <h1>First Child</h1>
      <p>Last Child</p>
    </div>

    <div class="test2">
      <h1>First Child #2</h1>
      <p>Last Child #2</p>
    </div>

    <div class="test2">
      <h1>First Child #2</h1>
      <p>Last Child #2</p>
    </div>

    <script>
      [].forEach.call( document.querySelectorAll('.test2'), function(el) {
              el.querySelector('p').classList.add('green');
              //el.children[1].style.color = 'green';
      });
    </script>


</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 30.11.2017, 00:04
Новичок на форуме
Отправить личное сообщение для 666FoX666 Посмотреть профиль Найти все сообщения от 666FoX666
 
Регистрация: 29.11.2017
Сообщений: 3

рони,
понял, большое спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 30.11.2017, 01:28
Новичок на форуме
Отправить личное сообщение для 666FoX666 Посмотреть профиль Найти все сообщения от 666FoX666
 
Регистрация: 29.11.2017
Сообщений: 3

рони, скажу честно, Ваш цикл мне не очень понятен, но я погуглю и разберу его.
Сделал, видимо, крайне глупо (В консоль ошибку даёт), но тем не менее это работает. Вот о чём речь:
var cc = document.getElementsByClassName('test2');
			
			for (var i = 0; i <= cc.length; i++) {
				cc[i].lastElementChild.style.color = 'green';
			}
Ответить с цитированием
  #6 (permalink)  
Старый 30.11.2017, 03:35
svl svl вне форума
Новичок на форуме
Отправить личное сообщение для svl Посмотреть профиль Найти все сообщения от svl
 
Регистрация: 30.11.2017
Сообщений: 1

...

Последний раз редактировалось svl, 30.11.2017 в 03:48.
Ответить с цитированием
  #7 (permalink)  
Старый 30.11.2017, 06:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Сообщение от 666FoX666
(В консоль ошибку даёт),
не существует элемента с индексом равным длине списка(массива) элементов!!!
Сообщение от 666FoX666
for (var i = 0; i <= cc.length; i++) {
Ответить с цитированием
  #8 (permalink)  
Старый 30.11.2017, 06:17
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,057

Сообщение от 666FoX666
Ваш цикл мне не очень понятен, но я погуглю и разберу его.
коллекции-не-массивы
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Получение ответа сервера через iframe и xhr. Помогите разобраться. Arconas AJAX и COMET 0 26.02.2013 08:38
Получение переменной из БД через ajax FoxTrix AJAX и COMET 3 15.11.2012 08:45
получение текста через тег <script> micscr Общие вопросы Javascript 2 05.06.2010 14:19
Не могу обратиться к элементам div, после того как они получены через $.ajax igsavenko jQuery 1 31.05.2010 16:53
Получение расчетного листка через интранет StartingCoder Общие вопросы Javascript 2 02.07.2008 16:19