Как получить доступ к любому объекту 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". Вот такой незамысловатый скрипт.
До скорых встреч!
-
Создано 23.10.2010 12:14:29
-
Михаил Русаков
Комментарии (14):
Вставил такой код в конце страницы ,у меня почему то не работает.(<script type="text/javascript"> var str = ""; for (i = 0; i < document.all.length; i++) str += document.all[i] + "<br />"; document.write(str); </script> )
Ответить
Код рабочий. Вставлять надо до </body>.
Ответить
до </body> вставлял ,тоже самое ничего нет в firefox 10.0.2 А в EI 8 работает.Почему так?
Ответить
У меня тоже firefox 10.0.2 и всё прекрасно работает. Возможно, проблема в самом HTML-коде. Также, возможно, скрипты вообще отключены в браузере.
Ответить
Да вы правы что то с HTML кодом у меня.Яваскрипт включен.Попробовал на другом html коде всё нормально работает.
Ответить
Михаил, а что делать если я хочу изменть один, определённый абзац? P.S. Спасибо отличный сайт.
Ответить
Нужно по каким-то признакам определить этот абзац, например, поставив у него id, а далее обратиться к нему через document.getElementById()
Ответить
да, спасибо посмотрел по сайтам так и сделал
Ответить
>>>Хотел поменять цвет фона document.getElementsByTagName('body')[0].style.backgroundColor; но не вышло т.к. стиль импортируется через <link /> а тег <body> не имеет атрибутов. Как получить свойство из импортированного стиля? >>>еще вопрос по стилю: я получаю цвет фона ="rgb(255,0,0)". Как сравнивать цвета в разных форматах? "red" != "#ff0000" != "rgb(255,0,0)". Спасибо!
Ответить
Всё должно получаться. Что там в файле стилей - значения не имеет, через js всё меняется. Цвета, собственно, никак не сравнить. Надо писать отдельную функцию, где сравнивать все возможные форматы, потому что в каждом браузере он свой.
Ответить
добрый день, хотел выделить отдельный пунк меню. проблема в том что значение атрибута 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. спасибо.
Ответить
Попробуйте просто var a = tags[i].firstChild.href; И убедитесь, что firstChild - это вообще ссылка, а не какой-нибудь пробел в вёрстке.
Ответить
Спасибо, проблема была в лишнем пробеле. А почему tags[i].className += "active"; - не работает, а tags[i].className += " active"; - (пробел в кавычках перед классом active ), зачем он нужен?
Ответить
Потому что class="a b" - это одно, а class="ab" - это другое.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.