Поиск элементов в DOM
Стандарт DOM предусматривает несколько средств поиска элемента. Это методы getElementById , getElementsByTagName и getElementsByName .
Более мощные способы поиска предлагают javascript-библиотеки.
Самый удобный способ найти элемент в DOM - это получить его по id . Для этого используется вызов document.getElementById(id)
Например, следующий код изменит цвет текста на голубой в div 'е c id="dataKeeper" :
document.getElementById('dataKeeper').style.color = 'blue'
Следующий способ - это получить все элементы с определенным тегом, и среди них искать нужный. Для этого служит document.getElementsByTagName(tag) . Она возвращает массив из элементов, имеющих такой тег.
Например, можно получить второй элемент(нумерация в массиве идет с нуля) с тэгом li :
document.getElementsByTagName('LI')[1]
Что интересно, getElementsByTagName можно вызывать не только для document , но и вообще для любого элемента, у которого есть тег (не текстового).
При этом будут найдены только те объекты, которые находятся под этим элементом.
Например, следующий вызов получает список элементов LI , находящихся внутри первого тега div :
document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')
Вызов elem.getElementsByTagName('*') вернет список из всех детей узла elem в порядке их обхода.
Например, на таком DOM:
<div id="d1">
<ol id="ol1">
<li id="li1">1</li>
<li id="li2">2</li>
</ol>
</div>
Такой код:
var div = document.getElementById('d1')
var elems = div.getElementsByTagName('*')
for(var i=0; i<elems.length; i++) alert(elems[i].id)
Выведет последовательность: ol1, li1, li2 .
Метод document.getElementsByName(name) возвращает все элементы, у которых имя (атрибут name ) равно данному.
Он работает только с теми элементами, для которых в спецификации явно предусмотрен атрибут name : это form , input , a , select , textarea и ряд других, более редких.
Метод document.getElementsByName не будет работать с остальными элементами типа div ,p и т.п.
Существуют и другие способы поиска по DOM: XPath, cssQuery и т.п. Как правило, они реализуются javascript-библиотеками для расширения стандартных возможностей браузеров.
Также есть метод getElementsByClassName для поиска элементов по классу, но он совсем не работает в IE, поэтому в чистом виде им никто не пользуется.
Частая опечатка связана с отсутствием буквы s в названии метода getElementById , в то время как в других методах эта буква есть: getElementsByName .
Правило здесь простое: один элемент - Element , много - Elements . Все методы *Elements* возвращают список узлов.
|
Современные браузеры (FireFox 3, Opera 9.5, Safari 3.1) поддерживают метод «getElementsByClassName».
не знаю
И еще
в IE ниже 6-й версии возвращает пустой объект, для этого в старых версиях IE нужно использовать
Ниже IE6 жизни нет
как по мне и в ИЕ6 жизни нет...
Как по мне, в IE жизни не было и нет вообще))))
не будем поддерживать ,тогда исключим из жизни
Долой осла!
Даёшь на каждом нормальном сайте указание на браузер пользователя и ссылки на нормальные браузеры, если пользователь сидит на осле!
Я Js изучаю, но совместимость с ие просто пролистываю не читая - фтопку кривотню!
Если бы не осел, то в браузеры развивались бы медленнее, очень много инноваций он ввел. Да и много в нем есть удобного что другие не поддерживают(пусть немного но есть).
Определите в другом браузере нажатия 2х кнопок сразу, правой и левой одновременно, а в ослике можно))
Чувак, польностью согласен. Майкрорсофт давно бы прекратили выпускать это уродсто по имени интернет эксплорер.
Народ, ну что за холивар) В IE много приятных вкусностей. Вот хотя бы при изменении свойств top, bottom, left, right и подобных можно опускать px и указывать только число. Везде бы так) Представляете, насколько сокращается JS код
а представляете, насколько сокращается JS код, если бы небыло IE
Это да...
Я бы на вашем месте не говорил бы так про ослика, он внес большой вклад в развитие интернет -технологий. Для и вообще, я сам вырос на IE 3 и поэтому мне он роднее, чем все остальные. Ну а какие вы программисты, если даже не учитываете все браузера, а говорите "долой его"... Такова учесть программиста, чтобы учитывать все. Ибо нехрен лесть в это дело вообще.
Должен быть стандарт для программиста - один язык, которые все браузеры понимают четко и однозначно. А писать веб разработчикам для каждого браузера своим кодом - это маразм. Это все равно, что писать программу под все операционные системы сразу.
Абсолютно точно!
По мне так все браузера хороши.
Ручки переставить в правильное место, тогда будет счастье и в IE
Согласен:)
По мне и в IE7 жизни нет
Ниже IE 10 жизни нет.
Ниже IE 11 жизни нет.
Код из раздела "Получить всех потомков" не пашет. Файрбуг пишет:
Перенесите код скрипта ниже основного HTML-кода, либо запускайте скрипт после полной загрузки DOM'а.
подскажите, что не то в функции $:
После визова
в ІЕ или в Опера 9.24 в test єсть только один елемент?
Уже справил:
Требуется отыскать все DIV с class='tab' и добавить в них новые DIV'ы с другими классами.
Когда первый if(divs[i].className == 'tab') срабатывает, то после innerHTML, видимо, массив divs меняется и остальные DIV'ы с тем же классом tab найти не получается.
Для этого нужно что ли отдельно сначала заполнить массив удовлетворяющих критерию div'ами, а потом ещё одним циклом их пройти и уже провести операции innerHTML?
Да, интересный кстати пример
А если идти с конца?
замените название переменной div на divs, иначе цикл то как будет работать?
var divs = document.getElementsByTagName('div')
не думал что список будет меняться с изменением innerHTML, но если это так то поидее i--; после innerHTML должно вылечить.
Так как у тебя идет работа с "живыми объектами" div. То после первого преобразования (нахождения div с классом tab) у тебя количество тегов div увеличивается, а так как у тебя длинна массива найденных елементов закэширована (var l = divs.length). То и поиск будет происходить пока не закончится длинна массива.
Что бы просто непереписывать тебе скрипт, просто внеси вычисление divs.length в цикл:
Такую особенность заметил, но не нашел подробную информацию, буду рад если разьясните.
Имеется код:
имеется скрипт который ставит галку если в поле ввода появлется текст, и убирает если текста нет:
На событие onkeyup я передаю функции checkbox текущий элемент, и элемент checkbox с id="use0" (изначально я его передавал в кавычках и в функции достигал его через getElementById, но случайно понял что если убрать кавычки то будет передаваться элемент со схожим id). Код работает, но не понятно почему элемент с id="use0" доступен из другого элемента таким образом? В Javascript новичок. Спасибо.
если нужно найти элементы с конкретным классом
// функция поиска элементов по конкретному className
// ищет в т.ч. когда через пробел в тестируемом элементе указано несколько className
// поиск начинается от элемента in_start или document (по умолчанию)
// возвращает массив ссылок на элементы
if(typeof(getElementsByClassName) != "function"){
function getElementsByClassName(in_class,in_start) {
var start_el = in_start || document;
var all_els = start_el.getElementsByTagName("*")
var rez_arr = Array();
for(var i=0; i
не влезла...
относительность поиска при вызове getElementsByTagName допускается:
что очень замечательно, а вот относительности вызова getElementById увы нельзя:
getElementsById возможен только из document кто нибудь знает как исправить этот недочёт, чтобы не рекурсивным ручным перебором в отдельном блоке искать элемент с конкретным id, а красивей? Если в другом блоке позади стоящем тоже есть элемент с таким же id, то document.getElementsById(id) не будет правильно определен искомый элемент, т.к. он будет в позади стоящем блоке а не в том где я хочу его найти.
getElementsById - такого обращения не существует. есть getElementById без "s". ведь id является уникальным идентификатором элемента среди остальных.
id должен быть уникальным в пределах документа. с 2мя одинаковыми id ваш html не пройдёт валидацию. w3c посоветует использовать class вместо id
А как выбрать все теги и всё что в них домножить на определенное число?
теги
Наверное вот так:
и в td_tags у вас будут все елементы-теги
Подскажите пожалуйста.. вот тут пример
Показывает элементы страници.. а мне надо так же.. только элементы странници открываемого окна (дочернего). Тоесть скрип в основном окне, а тэги в дочернем. Но скрипт работает только по родительскому окну. Все перечитал, так и не дошло как сделать, чтобы скрипт вытягивал элементы дочернего окна.. кто знает подскажите..
Идея в том, что моя страничка, должна открывать новое окно с чужой страничкой, с которой мне надо вытянуть некоторые данные.. вот
Только если страница на другом домене, то вытянуть данные не получится.
Дак вот оказывается в чем проблема.. так как Вы показали я пробовал, не получалось. все дело в домене.. на одном попробовал, сработало. Но мне надо с другого домена.. вообще никак чтоли не реализовать такое ?
http://javascript.ru/ajax/cross-domain-scripting
http://javascript.ru/ajax/cross-origin-2
Спасибо большое)
Скажите, как проверить, если в теге определённый атрибут или нет?
Методом hasAttribute.
getAttribute();
Из описания document.getElementById непонятно что делать, если элемент не найден. И как обрабатывать такую ситуацию
если соответствующий элемент не найден, то возвращается null
var firstInput=document.getElementById("i1") // элемент для вставки перед ним
var newDiv1=document.createElement("div") // создание нового элемента для вставки (div)
newDiv1.innerHTML='
' // значение этого элемента
firstInput.insertBefore(newDiv1,firstInput) // вставка
firebug пишет Node was not found" code: "8 на последней строке, подскажите где я облажался?
Если вы хотите переносить строки в js, то в конце каждой строки надо вставить \
Неее) это просто код так коряво вставился, в реале там всё нормально, вопрос как бэ в другом, почему вылазит ошибка "узел не найден, код 8" и вообще что за "код 8"?
подскажите как вытащить Id элемента в asp:GridView в случае срабатывания OnClick на данном элементе?
вот такая штука:
скрипт
код html (без <>)
выдает такое сообщение - [object HTMLLIElement], в чем ошибка?
Чайник я)
А что требовалось получить? Он все правильно выводит. В данном коде выбран сам элемент.
В коде выводится, что это объект.
Если хочется вытащить содержание, то следовало бы писать так:
По идее должно работать, не могу сейчас проверить.
почему-то не пашет выражение такого рода
var linka = document.getElementsByTagName("a").getElementsByTagName("img");
опера пишет
Uncaught exception: TypeError: 'document.getElementsByTagName("a").getElementsByTagName' is not a function
getElementsByTagName возвращает не один элемент, а коллекцию, т.е. массив элементов. Если вы хотите найти в каждом из них img, Вам нужно циклом пройтись по нему, применив метод getElementsByTagName('img');
и такое не пашет тоже
var linka = document.getElementsByTagName('a');
var linka2 = linka.getElementsByTagName('img');
та же ошибка
var linka = document.getElementsByTagName("a")[0].getElementsByTagName("img")[0];
Возможно ли получить доступ к переменной(var) с одного фрейма в другом(напр. с родительского) чтоб можно было ее модифицировать? Если можно, то как это делается? (фреймы все с одного домена)
Как вариант: дать имя фрейму(ифрейму) и обратится к нему через объект window
parent.html
child.html
Спасибо, наверно я не четко сформулировал, вот что хочется сделать, возможно ли такое?
parent.html
child.html
Возможно, так?
frame_parent.html:
frame_child.html:
P.S.: Текст "/forum/" к атрибутам src при размещении комментариев добавляется автоматически, поэтому при локальном режиме проверок его можно удалить (особенно если файлы лежат в одной и той же папке)
Насколько я понимаю, ты объявил переменную glob_var1 локально для этой функции. Так глобальную переменную не объявить. Кажется нужно просто написать glob_var1=5; без вар... если не прав не убивайте =)
подскажите,как сделал чтоб кликал по рссунку. сделал так--document.getElementsByTagName/id/tagname("sn_arrow").Click();
но чтото не работает.скрипту только недавно учусь,так что не кричите
Если в коде ставить, то:
А если в HTML, то:
Ну там дальше можно уже додумывать. Соррь если что, я сам только учусь.
Как ограничить глубину поиска element.getElementsByTagName? Чтобы находил только детей а не всех потомков. Ну или подругому, можно ли выбрать детей определенного типа, не прибегая к условиям?
У меня следующий код:
в IE выдает 20, а в FF - 0. Подскажите пожалуйста, может я чего-то не так поняла.
По сути этот скрипт должен показывать название первой аудиозаписи в контакте на странице /audio.php
Но он не работает =(
Логично было бы упомянуть здесь и obj.parentNode - обращение к родителю, для завершенности.
Добрый день!
Такой вопрос: как найти в документе элемент id="lightb" и в нём же все теги a. И этом тегам дописать атрибуты rel="lightbox". Событие происходит при загрузки страницы!
Привожу свой пример:
Здесь сразу несколько ошибок:
Первая и самая очевидная — функция writerel описана, но нигде не вызывается
Таким образом, в вашем случае нужно перенести тег script как минимум ниже тега div. А если планируется добавлять ещё элементы в код, то надёжнее всего будет разместить тег script в самом конце тела документа, перед закрывающим тегом body.
(На самом деле это не полноценный массив Array, а подобный ему объект, но это уже особенности внутреннего устройства языка, обращаться с ним всё равно нужно как с обычным массивом.)
Подводя итог — в вашем случае код должен выглядеть как минимум так:
По идее, этот скрипт должен менять цвет бэкграунда на красный, но почему-то не меняет:
Что я делаю не так?
Попробуй вот так
window.onload = function () {
var b = document.getElementsByTagName('body')[0].style.backgroundColor = "#ff0000";
};
Причина в том, что при выполнении скрипта, элемента body еще не существеут, так как документ разбирается последовательно.
Нужно дождаться окончания загрузки документа, а потом выполнить скрипт.
this is a great solution, thanks! eugene fencing
awesome thanks! sandblasting colorado springs
По мне так самые нормальные браузеры это мозила и опера. И то у них свои особенности, благодоря которым мозила лучше всего подходит для создания сайта (поскольку всеядный браузер, 1 версия мозилы понимала стлько тегов и прочее сколько 9 версия оперы и 5 версия ишака), а опера для бродилок по инету (благодаря своей быстроте).
Уже час мучаюсь document.getElementById возвращает null
Почему?
Все, разобрался:) Вызов надо было делать после полной загрузки документа
Учу Javascript, столкнулся с проблемой:
Почему эта функция не работает?
может
new Array ?
Извиняюсь если повтор но вот фикс для IE
Помогите!!! Как сделать чтобы по URL открывался определенный документ и в нем найти какое то слово (например "Солнце" ). Подробнее: Допустим есть какая та страница html, и она находится по адресу http//:stranica.ru . Как мне со своего документа найти в ней слово "Солнце" и присвоить его переменной sun??? Как это сделать со строкой я знаю , а вот что бы так .....??? Подскажите кто знает чайнику (просто начинаю изучать JavaScript по видео урокам,много не понятно,а спросить не у кого )
простите а можно как то осуществить поиск по див если сам див каждый раз меняться??? например
неособо силен в таких посиках по див, помогите пожалуйста!!
Спасибо))
Ребят, нужно по onchange копировать содержимое одного input-а в другой.
страница написана на haml.
Я думаю реализовать это так, но не работает:
%input#email.px300.required.email{ name="email",value=entity.Email,maxlength="100", onchange="javascript: document.getElementById(login).value=document.getElementById(email).value;"}
Не знакома с haml, но в любом случае, параметром функции getElementById должна быть строка. То есть в вашем случае нужно писать так:
я этот вопрос на форуме задавал, а тут целая статья на сайте есть...
xpath рулит))))))
Молодцы.
"Самый удобный способ найти элемент в DOM - это получить его по id."
А как получить их список? Где взять эти самые Id, если нужно просто пройти по документу?
Ни ссылки, ни комментария...
Действительно! Какие плохиши!
нет чтоб не только разжевали но еще и проглотили бы!
А как насчет такого?
В пиве сила! В вине мудрость! А в воде... микробы!
А если нужен поиск по тэгу не во всём документе, а только в выделенном мышью куске - это возможно ли и как?
всем привет. У меня вопрос. Как искать содержимое в таком код html:
В пиве сила! В вине мудрость! А в воде... микробы!
Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
Это нормально?
Я этого тоже не могу понять
Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
Это нормально?
Не плохо было бы добавить информацию о querySelector и querySelectorAll так как это поддерживают почти все браузеры.
http://www.codeisart.ru/w3c-css-selectors-api-the-queryselector-and-quer...
а как реализовать такой алгоритм:
к 2ум страницам штмл "штмл1" и "штмл2" подключён один и тот же js и в нём код, который должен делать:
выборка элемента с штмл1 на него событие клик,а действие которое должно происходить применяется на элемент в штмл2, но нечего не работает, что сделать?
Подскажите пожалуйста:
Вот допустим есть некий DIV с id="d2". В этом блоке находятся ссылки с неким class="c1". Как найти все ссылки которые находятся в этом блоке?
Нужно вытянуть ссылки (значение href);
Заранее спасибо всем тем кто откликнется!!!
Всё! Спасибо!!! Разобрался сам ))))
Здравствуйте.
Подскажите пожалуйста. Нужно для ссылок в параграфе (p) применить класс "lightbox"
Использую пока такой код:
var els = document.getElementsByTagName('a');
for (var i = 0; i < els.length; i++)
els[i].setAttribute('class', 'lightbox');
но он применяет этот класс ко всем ссылкам в документе. Пробовал сделать как написано в статье — не получилось.
Помогите разобраться.
А что будет, если скопировать(клонировать) узел, который содержит ID?
В копии не д.б. ID или всё-таки ID станет не уникальным?
Помогите, пожалуйста!
Программа находит все ссылки, которые есть в div, и выводит их URL- адреса, но они не активны, как сделать, чтобы он выводил все адреса и по ним ещё можно было перейти. Я думаю проблема в выводе:
код:
1. Изучите по любому справочнику "устройство" тега , в частности - назначение атрибута "href", и сами поймете свою ошибку.
2. Не используйте document.write - это из времен динозавров. Используйте innerHTML.
Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
Это лабораторная в ВУЗе, поэтому приходится использовать
[quote]
document.write(''+giper[i]+'');
Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
Это лабораторная в ВУЗе, поэтому приходится использовать document.write
[/quote]
"хрев", как вы выразились, который, конечно, даже по самым невразумительным правилам транскрибирования - всё же "хреф", является сокращением от "Hypertext REFerence" - что в переводе с английского означает "гипертекстовая отсылка", что в свою очередь намекает что именно в этом параметре должен быть указан адрес перехода...
И эта инфа свободно доступна по первой же ссылке в выдаче гугла по запросу "href" или "html a".
З.Ы. с такими навыками поиска информации в ВУЗ не было смысла идти - стоило сразу после 9го класса идти работать грузчиком - КПД выше был бы.
Выше хрома 41 жизни нет.
Совершенно новый уровень в создании сайтов. То, что нужно!
[/html][/html][/html][/html][/html][/html][/html][/html]
Страна-сортир (паРаша)
Отправить комментарий
Приветствуются комментарии:Для остальных вопросов и обсуждений есть форум.