Поиск элементов в 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 у вас будут все елементы-теги
Подскажите пожалуйста.. вот тут пример
Показывает элементы страници.. а мне надо так же.. только элементы странници открываемого окна (дочернего). Тоесть скрип в основном окне, а тэги в дочернем. Но скрипт работает только по родительскому окну. Все перечитал, так и не дошло как сделать, чтобы скрипт вытягивал элементы дочернего окна.. кто знает подскажите..
Идея в том, что моя страничка, должна открывать новое окно с чужой страничкой, с которой мне надо вытянуть некоторые данные.. вот
Только если страница на другом домене, то вытянуть данные не получится.
Дак вот оказывается в чем проблема.. так как Вы показали я пробовал, не получалось. все дело в домене.. на одном попробовал, сработало. Но мне надо с другого домена.. вообще никак чтоли не реализовать такое ?
Скажите, как проверить, если в теге определённый атрибут или нет?
Методом hasAttribute.
Из описания 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) с одного фрейма в другом(напр. с родительского) чтоб можно было ее модифицировать? Если можно, то как это делается? (фреймы все с одного домена)
Как вариант: дать имя фрейму(ифрейму) и обратится к нему через объект 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 еще не существеут, так как документ разбирается последовательно.
Нужно дождаться окончания загрузки документа, а потом выполнить скрипт.
По мне так самые нормальные браузеры это мозила и опера. И то у них свои особенности, благодоря которым мозила лучше всего подходит для создания сайта (поскольку всеядный браузер, 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 жизни нет.
Этот метод позволяет получить элемент по его уникальному идентификатору Immaculate Grid. Идентификатор должен быть уникальным на странице.
Ребята подскажите советом (в JS не разбираюсь ещё):
Есть в вэб-странице код:
Мне нужно ссылку из url2 получить, просто хотя бы в конце страницы высвечивалась или как нить в окне что бы показывалась?
Не пинайте сильно. СпС.