<MyRusakov.ru />

React JS, Redux, ES2015 с Нуля до Гуру

React JS, Redux, ES2015 с Нуля до Гуру

Данный курс - это обширный курс по JavaScript и фреймворку React, который позволит Вам с нуля создавать мощные современные, динамические JavaScript-приложения.

Вы узнаете о тонкостях работы с "профессиональным" JavaScript, а так же узнаете о нововведениях в его новый стандарт ES2015, Вы узнаете, как организовать профессиональное окружение для FrontEnd, изучите профессиональный фреймворк - ReactJS.

А в практической части с полного нуля будет создано мощное и быстрое динамическое приложение, где Вы на практике познакомитесь, как создавать очень гибкую и расширяемую архитектуру, для разработке функционала любой сложности.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Как получить доступ к любому объекту HTML через JavaScript

Как получить доступ к любому объекту HTML через JavaScript

До сих пор мы получали доступ к вполне определённому объекту. Однако, бывает нужно получить доступ к абсолютно любому объекту (порой, заранее неизвестному) HTML. Вот как раз об этом и написана эта небольшая статья.

Для доступа к любому объекту HTML в JavaScript существует свойство у объекта Document, которое называется all. Это свойство является массивом. Сейчас я Вам предлагаю найти какую-нибудь HTML-страничку и вставить туда следующий скрипт:

document.write(document.all.length);

Будьте внимательны: данный скрипт должен вызываться в конце страницы! Надеюсь, Вы помните правило: пока объект не существует - с ним нельзя работать. Поэтому прежде, чем работать с HTML-объектами, необходимо, чтобы они сначала появились.

Теперь давайте выведем все объекты, которые имеются на странице. Так как свойство all - это массив, то обращаться с ним надо, как с массивом:

var str = "";
for (i = 0; i < document.all.length; i++)
  str += document.all[i] + "<br />";
document.write(str);

Здесь мы получаем все объекты на странице и записываем их в переменную str. После того, как цикл пройден, мы выводим эту переменную.

Теперь давайте решим простую задачу. Давайте изменим значения всех элементов p (абзац) на слово "JavaScript". Пишем такой скрипт:

for (i = 0; i < document.all.length; i++) {
  var obj = document.all[i];
  if (obj instanceof HTMLParagraphElement)
    obj.innerHTML = "JavaScript";
}

Теперь обсудим данный скрипт. Вначале обычный цикл, потом мы переменной obj присваиваем текущий объект HTML-страницы, находящийся в массиве all. Дальше с помощью оператора instanceof мы проверяем принадлежность этого объекта к классу HTMLParagraphElement. И если этот объект является элементов p, то с помощью свойства innerHTML меняем значение внутри тега <p> на "JavaScript". Вот такой незамысловатый скрипт.

До скорых встреч!

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (14):

shteyn shteyn 04.03.2012 19:15:41

Вставил такой код в конце страницы ,у меня почему то не работает.(<script type="text/javascript"> var str = ""; for (i = 0; i < document.all.length; i++) str += document.all[i] + "<br />"; document.write(str); </script> )

Ответить

Admin Admin 04.03.2012 20:07:07

Код рабочий. Вставлять надо до </body>.

Ответить

shteyn shteyn 04.03.2012 22:29:25

до </body> вставлял ,тоже самое ничего нет в firefox 10.0.2 А в EI 8 работает.Почему так?

Ответить

Admin Admin 04.03.2012 22:49:13

У меня тоже firefox 10.0.2 и всё прекрасно работает. Возможно, проблема в самом HTML-коде. Также, возможно, скрипты вообще отключены в браузере.

Ответить

shteyn shteyn 04.03.2012 23:46:50

Да вы правы что то с HTML кодом у меня.Яваскрипт включен.Попробовал на другом html коде всё нормально работает.

Ответить

andreiups andreiups 18.02.2013 20:44:24

Михаил, а что делать если я хочу изменть один, определённый абзац? P.S. Спасибо отличный сайт.

Ответить

Admin Admin 18.02.2013 21:00:58

Нужно по каким-то признакам определить этот абзац, например, поставив у него id, а далее обратиться к нему через document.getElementById()

Ответить

andreiups andreiups 18.02.2013 23:32:59

да, спасибо посмотрел по сайтам так и сделал

Ответить

Spartak_Belarus Spartak_Belarus 09.04.2013 12:38:42

>>>Хотел поменять цвет фона document.getElementsByTagName('body')[0].style.backgroundColor; но не вышло т.к. стиль импортируется через <link /> а тег <body> не имеет атрибутов. Как получить свойство из импортированного стиля? >>>еще вопрос по стилю: я получаю цвет фона ="rgb(255,0,0)". Как сравнивать цвета в разных форматах? "red" != "#ff0000" != "rgb(255,0,0)". Спасибо!

Ответить

Admin Admin 09.04.2013 21:03:56

Всё должно получаться. Что там в файле стилей - значения не имеет, через js всё меняется. Цвета, собственно, никак не сравнить. Надо писать отдельную функцию, где сравнивать все возможные форматы, потому что в каждом браузере он свой.

Ответить

andreiups andreiups 31.05.2013 13:58:55

добрый день, хотел выделить отдельный пунк меню. проблема в том что значение атрибута href = undefined. код JS: function highlight(){ /* alert(document.location.href); */ var tags=document.getElementsByTagName("li"); for(i in tags){ if(tags[i].className=="nav"){ var a = tags[i].firstChild.getAttribute('href'); alert(a); if(document.location.href==tags[i].firstChild.href){ tags[i].className += "active"; } } } } код html: <tr > <td id="main_menu" > <ul id="menu" > <li class="nav"> <a href="http://orange-marka.ru/index.php?view=description" >О компании </a> </li> <li class="nav"> <a href="123" >Магазин</a> </li> <li class="nav"> <a href="123" style="color:green;" >Оптовому клиенту</a> </li> <li class="nav"> <a href="123" style="color:green;" >Контакты</a> </li> <li class="nav"> <a href="123" style="color:green;" >Доставка</a> </li> </ul> </td> </tr> обработчик onload в body. спасибо.

Ответить

Admin Admin 31.05.2013 19:33:10

Попробуйте просто var a = tags[i].firstChild.href; И убедитесь, что firstChild - это вообще ссылка, а не какой-нибудь пробел в вёрстке.

Ответить

andreiups andreiups 31.05.2013 21:41:25

Спасибо, проблема была в лишнем пробеле. А почему tags[i].className += "active"; - не работает, а tags[i].className += " active"; - (пробел в кавычках перед классом active ), зачем он нужен?

Ответить

Admin Admin 01.06.2013 11:05:21

Потому что class="a b" - это одно, а class="ab" - это другое.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.