Javascript.RU

Поиск элементов в DOM

Update: Более новый материал по этой теме находится по адресу https://learn.javascript.ru/searching-elements-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* возвращают список узлов.


Автор: Octane, дата: 14 августа, 2008 - 13:27
#permalink

Современные браузеры (FireFox 3, Opera 9.5, Safari 3.1) поддерживают метод «getElementsByClassName».

document.getElementsByClassName('class-name');
node.getElementsByClassName('class-name');
document.getElementsByClassName('class-name-1 class-name-2');
node.getElementsByClassName('class-name-1 class-name-2');

Автор: Гость (не зарегистрирован), дата: 29 июля, 2016 - 09:51
#permalink

не знаю


Автор: Octane, дата: 14 августа, 2008 - 14:05
#permalink

И еще

document.getElementsByTagName("*");

в IE ниже 6-й версии возвращает пустой объект, для этого в старых версиях IE нужно использовать

document.all;

Автор: Илья Кантор, дата: 26 сентября, 2008 - 16:47
#permalink

Ниже IE6 жизни нет


Автор: popovich_a_i, дата: 11 августа, 2010 - 13:28
#permalink

как по мне и в ИЕ6 жизни нет...


Автор: Гость (не зарегистрирован), дата: 5 марта, 2011 - 15:52
#permalink

Как по мне, в IE жизни не было и нет вообще))))


Автор: kiborg (не зарегистрирован), дата: 23 марта, 2011 - 10:02
#permalink

не будем поддерживать ,тогда исключим из жизни


Автор: js (не зарегистрирован), дата: 17 апреля, 2011 - 13:32
#permalink

Долой осла!
Даёшь на каждом нормальном сайте указание на браузер пользователя и ссылки на нормальные браузеры, если пользователь сидит на осле!

Я Js изучаю, но совместимость с ие просто пролистываю не читая - фтопку кривотню!


Автор: Ruzarh (не зарегистрирован), дата: 1 мая, 2011 - 22:28
#permalink

Если бы не осел, то в браузеры развивались бы медленнее, очень много инноваций он ввел. Да и много в нем есть удобного что другие не поддерживают(пусть немного но есть).

Определите в другом браузере нажатия 2х кнопок сразу, правой и левой одновременно, а в ослике можно))


Автор: vov (не зарегистрирован), дата: 16 июня, 2011 - 11:29
#permalink

Чувак, польностью согласен. Майкрорсофт давно бы прекратили выпускать это уродсто по имени интернет эксплорер.


Автор: popov654, дата: 19 августа, 2011 - 01:53
#permalink

Народ, ну что за холивар) В IE много приятных вкусностей. Вот хотя бы при изменении свойств top, bottom, left, right и подобных можно опускать px и указывать только число. Везде бы так) Представляете, насколько сокращается JS код


Автор: dfzy (не зарегистрирован), дата: 30 августа, 2011 - 08:43
#permalink

а представляете, насколько сокращается JS код, если бы небыло IE Yes4


Автор: rf (не зарегистрирован), дата: 29 марта, 2017 - 23:57
#permalink

Это да...


Автор: Гость (не зарегистрирован), дата: 24 сентября, 2011 - 15:35
#permalink

Я бы на вашем месте не говорил бы так про ослика, он внес большой вклад в развитие интернет -технологий. Для и вообще, я сам вырос на IE 3 и поэтому мне он роднее, чем все остальные. Ну а какие вы программисты, если даже не учитываете все браузера, а говорите "долой его"... Такова учесть программиста, чтобы учитывать все. Ибо нехрен лесть в это дело вообще.


Автор: Гость (не зарегистрирован), дата: 3 сентября, 2015 - 09:04
#permalink

Должен быть стандарт для программиста - один язык, которые все браузеры понимают четко и однозначно. А писать веб разработчикам для каждого браузера своим кодом - это маразм. Это все равно, что писать программу под все операционные системы сразу.


Автор: Гость (не зарегистрирован), дата: 11 января, 2017 - 23:05
#permalink

Абсолютно точно!


Автор: Гость (не зарегистрирован), дата: 24 сентября, 2011 - 15:37
#permalink

По мне так все браузера хороши.


Автор: Гость (не зарегистрирован), дата: 25 октября, 2012 - 23:01
#permalink

Ручки переставить в правильное место, тогда будет счастье и в IE


Автор: Гость (не зарегистрирован), дата: 9 марта, 2013 - 16:12
#permalink

Согласен:)


Автор: РоманГость (не зарегистрирован), дата: 3 сентября, 2011 - 12:30
#permalink

По мне и в IE7 жизни нет


Автор: Гость (не зарегистрирован), дата: 29 ноября, 2013 - 09:44
#permalink

Ниже IE 10 жизни нет.


Автор: Travel Europe (не зарегистрирован), дата: 30 апреля, 2014 - 05:59
#permalink

Ниже IE 11 жизни нет.


Автор: Bad Request, дата: 26 сентября, 2008 - 16:26
#permalink

Код из раздела "Получить всех потомков" не пашет. Файрбуг пишет:

div is null
1.html()()1.html (line 5)
[Break on this error] var elems = div.getElementsByTagName('*')

Автор: Azadi, дата: 6 января, 2010 - 18:53
#permalink

Перенесите код скрипта ниже основного HTML-кода, либо запускайте скрипт после полной загрузки DOM'а.


Автор: OlexandrI, дата: 31 октября, 2008 - 22:39
#permalink

подскажите, что не то в функции $:

var $my={
	 browser:{
		 version:(userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d|\.]+)/ ) || [])[1],
		 sa:/webkit/.test(userAgent),
		 op:/opera/.test(userAgent),
		 ie:/msie/.test(userAgent) && !/opera/.test(userAgent),
		 mz:/mozilla/.test(userAgent) && !/(compatible|webkit)/.test(userAgent)
		},
	 $:function(elemP, w){
		 w=w||document;
		 var param, id="", elem, get, name;
		 param = /([#|\w|\*]+)\s*(.+)*/i.exec(elemP);
		 if(/#(\w+)/i.test(param[1])){
			 id=/(\w+)/i.exec(param[1])[1];
			 elem=w.getElementById(id);
			}else
		 if(/>(\w+)/i.test(param[1])){
			 name=/(\w+)/i.exec(param[1])[1];
			 elem=w.getElementsByName(name);
			}else
		 if(/([\.|\w]+)/i.test(param[1])){
			 name=/(\w+)/i.exec(param[1])[1];
			 if($my.browser.ie||($my.browser.mz&&$my.browser.version<1.9)
			    ||($my.browser.op&&$my.browser.version<9.5)
				||($my.browser.sa&&$my.browser.version<3.1)){
				 var e;
				 e=$my.$("*", w);
				 elem={};
				 for(var i=0;i<e.length;i++)
					if(e[i].className==name)
						elem[(elem.length)?elem.length:'0']=e[i];
				}else{
				 elem=w.getElementsByClassName(name);
				}
			}else{
			 name=/([\w|\*]+)/i.exec(param[1])[1];
			 if(name=="*"&&$my.browser.ie&&$my.browser.version<6)
				 elem=w.all;
			    else elem=w.getElementsByTagName(name);
			}
		 if(typeof elem=='undefined'){
			 return;
			}
		 if(typeof param[2]!='undefined'&&id){
			 get=/(\w+)/i.exec(param[2])[1];
			 if(/@(\w+)/i.test(param[2]))
				 elem=elem.getAttribute(get);
				else
				 elem=elem[get];
			}
		 return elem;
		}

После визова

<input type="text" class="hh" name="hh" id="u1"></input>
<input type="text" class="hh" name="hh" id="u2"></input>
<script>
test=$my.$(".hh");
</script>

в ІЕ или в Опера 9.24 в test єсть только один елемент?


Автор: OlexandrI, дата: 8 ноября, 2008 - 16:22
#permalink

Уже справил:

//....
	$:function(elemP, w){
		 w=w||document;
		 var param, id="", elem, get, name;
		 param = /([#|\w|\*]+)\s*(.+)*/i.exec(elemP);
		 if(/#(\w+)/i.test(param[1])){
			 id=/(\w+)/i.exec(param[1])[1];
			 elem=w.getElementById(id);
			}else
		 if(/>(\w+)/i.test(param[1])){
			 name=/(\w+)/i.exec(param[1])[1];
			 elem=w.getElementsByName(name);
			}else
		 if(/([\.|\w]+)/i.test(param[1])){
			 name=/(\w+)/i.exec(param[1])[1];
			 if($my.browser.ie||($my.browser.mz&&$my.browser.version<1.9)
			    ||($my.browser.op&&$my.browser.version<9.5)
				||($my.browser.sa&&$my.browser.version<3.1)){
				 var e, l=0;
				 e=$my.$("*", w);
				 elem={};
				 for(var i=0;i<e.length;i++)
					if(e[i].className==name){elem[l]=e[i];l++;}
				}else{
				 elem=w.getElementsByClassName(name);
				}
			}else{
			 name=/([\w|\*]+)/i.exec(param[1])[1];
			 if(name=="*"&&$my.browser.ie&&$my.browser.version<6)
				 elem=w.all;
			    else elem=w.getElementsByTagName(name);
			}
		 if(!$my.isset(elem)){
			 return;
			}
		 if(typeof param[2]!='undefined'&&param[2]!=""&&id){
			 get=/(\w+)/i.exec(param[2])[1];
			 if(/@(\w+)/i.test(param[2]))
				 elem=elem.getAttribute(get);
				else
				 elem=elem[get];
			}
		 return elem;
		}
//....

Автор: EugenyK, дата: 3 ноября, 2008 - 21:19
#permalink

Требуется отыскать все DIV с class='tab' и добавить в них новые DIV'ы с другими классами.

var div = document.getElementsByTagName('div')
	var l = divs.length
	for(var i=0; i<l; i++){
		alert(divs[i].className)
		if(divs[i].className == 'tab'){
			var name = divs[i].innerHTML
			divs[i].innerHTML = "<div class='tab-right'><div class='tab-center'>"+name+"</div></div>"
			divs[i].className = 'tab-left'			
		}
	}

Когда первый if(divs[i].className == 'tab') срабатывает, то после innerHTML, видимо, массив divs меняется и остальные DIV'ы с тем же классом tab найти не получается.

Для этого нужно что ли отдельно сначала заполнить массив удовлетворяющих критерию div'ами, а потом ещё одним циклом их пройти и уже провести операции innerHTML?


Автор: Илья Кантор, дата: 3 ноября, 2008 - 22:21
#permalink

Да, интересный кстати пример


Автор: Snipe, дата: 5 ноября, 2008 - 17:04
#permalink

А если идти с конца?


Автор: yolka, дата: 15 сентября, 2009 - 00:55
#permalink

замените название переменной div на divs, иначе цикл то как будет работать?
var divs = document.getElementsByTagName('div')


Автор: all87 (не зарегистрирован), дата: 14 июля, 2010 - 02:00
#permalink

не думал что список будет меняться с изменением innerHTML, но если это так то поидее i--; после innerHTML должно вылечить.


Автор: Гость - Евгений (не зарегистрирован), дата: 31 января, 2013 - 16:32
#permalink

Так как у тебя идет работа с "живыми объектами" div. То после первого преобразования (нахождения div с классом tab) у тебя количество тегов div увеличивается, а так как у тебя длинна массива найденных елементов закэширована (var l = divs.length). То и поиск будет происходить пока не закончится длинна массива.
Что бы просто непереписывать тебе скрипт, просто внеси вычисление divs.length в цикл:

var divs = document.getElementsByTagName('div');
	for(var i=0; i<divs.length; i++){
		alert(divs[i].className);
		if(divs[i].className == 'tab'){
			var name = divs[i].innerHTML;
			divs[i].innerHTML = "<div class='tab-right'><div class='tab-center'>"+name+"</div></div>";
			divs[i].className = 'tab-left';
		}
	}

Автор: Руслан (не зарегистрирован), дата: 11 мая, 2009 - 18:18
#permalink

Такую особенность заметил, но не нашел подробную информацию, буду рад если разьясните.

Имеется код:

<INPUT type=checkbox id="use0" name="use[0]" value=true>
<INPUT type=text size=10 maxlength=30 name=query_field" onkeyup="checkbox(this,use0);">

имеется скрипт который ставит галку если в поле ввода появлется текст, и убирает если текста нет:

function checkbox(input,check_id) {
    if (input.value == ""){
        check_id.checked = false;
    }else{
        check_id.checked = true;
    }
}

На событие onkeyup я передаю функции checkbox текущий элемент, и элемент checkbox с id="use0" (изначально я его передавал в кавычках и в функции достигал его через getElementById, но случайно понял что если убрать кавычки то будет передаваться элемент со схожим id). Код работает, но не понятно почему элемент с id="use0" доступен из другого элемента таким образом? В Javascript новичок. Спасибо.


Автор: vk (не зарегистрирован), дата: 18 июня, 2009 - 03:04
#permalink

если нужно найти элементы с конкретным классом

// функция поиска элементов по конкретному 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


Автор: vk (не зарегистрирован), дата: 18 июня, 2009 - 03:09
#permalink

не влезла...

// функция поиска элементов по единичному className
// ищет в т.ч. когда в тестируемом эл-те через пробел указано несколько className
// поиск начинается от элемента in_start или document (по умолчанию)
// возвращает массив ссылок на элементы
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<all_els.length; i++){
			var curr_className = all_els[i].className;
			if(curr_className){
				// если несколько классов, разделенных пробелами
				var atom_class_arr = curr_className.split(/\s+/);
				for(var j=0; j<atom_class_arr.length; j++){
					if(in_class == atom_class_arr[j]){
						rez_arr.push(all_els[i]);
					}
				}// end for(var j=0; j<atom_class_arr.length; j++)
			}
		};// end for(var i=0; i<all_els.length; i++)
		//alert(rez_arr.length);
		return(rez_arr);
	}; // end function getElementsByClassName(in_class)

Автор: Гость (не зарегистрирован), дата: 2 ноября, 2009 - 20:44
#permalink

относительность поиска при вызове getElementsByTagName допускается:

document.getElementsByTagName('DIV')[0].getElementsByTagName('LI')

что очень замечательно, а вот относительности вызова getElementById увы нельзя:

document.getElementsById('blok1').getElementsById('pod_blok3')

getElementsById возможен только из document кто нибудь знает как исправить этот недочёт, чтобы не рекурсивным ручным перебором в отдельном блоке искать элемент с конкретным id, а красивей? Если в другом блоке позади стоящем тоже есть элемент с таким же id, то document.getElementsById(id) не будет правильно определен искомый элемент, т.к. он будет в позади стоящем блоке а не в том где я хочу его найти.


Автор: Гость (не зарегистрирован), дата: 5 ноября, 2009 - 17:41
#permalink

getElementsById - такого обращения не существует. есть getElementById без "s". ведь id является уникальным идентификатором элемента среди остальных.


Автор: Гость (не зарегистрирован), дата: 10 ноября, 2009 - 10:28
#permalink

id должен быть уникальным в пределах документа. с 2мя одинаковыми id ваш html не пройдёт валидацию. w3c посоветует использовать class вместо id


Автор: Гость (не зарегистрирован), дата: 16 ноября, 2009 - 19:07
#permalink

А как выбрать все теги и всё что в них домножить на определенное число?


Автор: Гость (не зарегистрирован), дата: 16 ноября, 2009 - 19:08
#permalink

теги

<td>

Автор: Turbosega (не зарегистрирован), дата: 9 июня, 2011 - 09:22
#permalink

Наверное вот так:

var td_tags = document.getElementsById('blok1').getElementsByTagName('TD');

и в td_tags у вас будут все елементы-теги

<td>

Автор: 66 (не зарегистрирован), дата: 8 января, 2010 - 10:04
#permalink

Подскажите пожалуйста.. вот тут пример

<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)

Показывает элементы страници.. а мне надо так же.. только элементы странници открываемого окна (дочернего). Тоесть скрип в основном окне, а тэги в дочернем. Но скрипт работает только по родительскому окну. Все перечитал, так и не дошло как сделать, чтобы скрипт вытягивал элементы дочернего окна.. кто знает подскажите..
Идея в том, что моя страничка, должна открывать новое окно с чужой страничкой, с которой мне надо вытянуть некоторые данные.. вот


Автор: B@rmaley.e><e (не зарегистрирован), дата: 8 января, 2010 - 10:55
#permalink

Только если страница на другом домене, то вытянуть данные не получится.


Автор: 66 (не зарегистрирован), дата: 10 января, 2010 - 16:58
#permalink

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


Автор: Гость (не зарегистрирован), дата: 29 января, 2010 - 08:25
#permalink

Скажите, как проверить, если в теге определённый атрибут или нет?


Автор: B@rmaley.e><e, дата: 29 января, 2010 - 10:16
#permalink

Методом hasAttribute.


Автор: Leax, дата: 7 февраля, 2010 - 22:09
#permalink

Из описания document.getElementById непонятно что делать, если элемент не найден. И как обрабатывать такую ситуацию


Автор: Мараторий, дата: 7 февраля, 2010 - 22:58
#permalink

если соответствующий элемент не найден, то возвращается null


Автор: Satir (не зарегистрирован), дата: 16 февраля, 2010 - 02:24
#permalink

var firstInput=document.getElementById("i1") // элемент для вставки перед ним
var newDiv1=document.createElement("div") // создание нового элемента для вставки (div)
newDiv1.innerHTML='

Не верное значение

' // значение этого элемента
firstInput.insertBefore(newDiv1,firstInput) // вставка

firebug пишет Node was not found" code: "8 на последней строке, подскажите где я облажался?


Автор: Мараторий, дата: 16 февраля, 2010 - 11:04
#permalink

Если вы хотите переносить строки в js, то в конце каждой строки надо вставить \

// Ошибка:
var str = "
  бла-бла-бла
";

// Правильно:
var str = "\
  бла-бла-бла\
";

Автор: Satir (не зарегистрирован), дата: 22 февраля, 2010 - 23:02
#permalink

Неее) это просто код так коряво вставился, в реале там всё нормально, вопрос как бэ в другом, почему вылазит ошибка "узел не найден, код 8" и вообще что за "код 8"?


Автор: Гость (не зарегистрирован), дата: 4 марта, 2010 - 14:23
#permalink

подскажите как вытащить Id элемента в asp:GridView в случае срабатывания OnClick на данном элементе?


Автор: ValikhanB (не зарегистрирован), дата: 11 мая, 2010 - 17:54
#permalink

вот такая штука:

скрипт

  1. function go()
  2. {
  3. alert(document.getElementsByTagName('li')[1])
  4. }

код html (без <>)

  • input type="button" onclick="go()" value="Go"
  • ul
  • li style="background-color:red" Осторожно /li
  • li class="info" Информация /li
  • ul

выдает такое сообщение - [object HTMLLIElement], в чем ошибка?

Чайник я)


Автор: Delfi, дата: 17 мая, 2010 - 21:51
#permalink

А что требовалось получить? Он все правильно выводит. В данном коде выбран сам элемент.
В коде выводится, что это объект.
Если хочется вытащить содержание, то следовало бы писать так:

alert(document.getElementsByTagName('li')[1].innerHTML)

По идее должно работать, не могу сейчас проверить.


Автор: Гость (не зарегистрирован), дата: 11 июня, 2010 - 20:04
#permalink

почему-то не пашет выражение такого рода
var linka = document.getElementsByTagName("a").getElementsByTagName("img");

опера пишет
Uncaught exception: TypeError: 'document.getElementsByTagName("a").getElementsByTagName' is not a function


Автор: B@rmaley.e><e, дата: 13 июня, 2010 - 07:53
#permalink

getElementsByTagName возвращает не один элемент, а коллекцию, т.е. массив элементов. Если вы хотите найти в каждом из них img, Вам нужно циклом пройтись по нему, применив метод getElementsByTagName('img');


Автор: Гость (не зарегистрирован), дата: 11 июня, 2010 - 20:38
#permalink

и такое не пашет тоже
var linka = document.getElementsByTagName('a');
var linka2 = linka.getElementsByTagName('img');

та же ошибка


Автор: Гость (не зарегистрирован), дата: 25 июня, 2010 - 20:45
#permalink

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


Автор: oleg.tsupka, дата: 26 июня, 2010 - 00:20
#permalink

Как вариант: дать имя фрейму(ифрейму) и обратится к нему через объект window

parent.html

<input type="button" onclick="window.child.val =(new Date())" value="setValueIntoChildFrame"/>
<iframe src="child.html" name="child" />

child.html

<script>
    var val = undefined;
</script>
<input type="button" onclick="alert(val)" value="getValue" />

Автор: Гость (не зарегистрирован), дата: 28 июня, 2010 - 11:53
#permalink

Спасибо, наверно я не четко сформулировал, вот что хочется сделать, возможно ли такое?

parent.html

<head>
<title>parent</title>
<script language="javascript">
// global var
var glob_var1 = 5;
</script>
</head>
<frameset>
 <frame src='child.html' name='child'>
 </frameset>
<body>
</body>

child.html

<head>
<title>child frame</title>
<!-- данный фрейм является динамическим и обновляемым, в нем используются переменная Javascript родительского документа glob_var1, при обновлении(refresh) данного фрейма значение glob_var1 должно браться из parent >
<script language="javascript">
// 
function cange_val_in_parent_doc()
{
 glob_var1++ ;// в данный момент glob_var1 -  UNDEFINED !!!
// как получить доступ к glob_var1 ???
}
</script>
</head>
<body onload="cange_val_in_parent_doc()">
</body>

Автор: vmunt (не зарегистрирован), дата: 17 января, 2011 - 07:51
#permalink

Возможно, так?

frame_parent.html:

<html>
<head>
<title>parent</title>
<script type="text/javascript">
var glob_var1 = 5; // global var
</script>
</head>
<frameset frameborder=1 cols="*" rows="80,*" id="parentFS">
	<frame src='frame_child.html' name='child1'>
	<frame src='frame_child.html' name='child2'>
</frameset>
<body>
</body>
</html>

frame_child.html:

<html>
<head>
<title>child frame</title>
<script type="text/javascript">
function change_val_in_parent_doc() {
	window.parent.glob_var1++;
	document.getElementById("gv").innerHTML="Global var="+window.parent.glob_var1;
}
</script>
</head>
<body onload="change_val_in_parent_doc()">
<input type="button" name="pa" value="Add parent value" onclick="change_val_in_parent_doc()">
<div id="gv">
</div>
</body>
</html>

P.S.: Текст "/forum/" к атрибутам src при размещении комментариев добавляется автоматически, поэтому при локальном режиме проверок его можно удалить (особенно если файлы лежат в одной и той же папке)


Автор: Sergej (не зарегистрирован), дата: 9 июля, 2010 - 12:13
#permalink

Насколько я понимаю, ты объявил переменную glob_var1 локально для этой функции. Так глобальную переменную не объявить. Кажется нужно просто написать glob_var1=5; без вар... если не прав не убивайте =)


Автор: Гость (не зарегистрирован), дата: 25 сентября, 2010 - 17:48
#permalink

подскажите,как сделал чтоб кликал по рссунку. сделал так--document.getElementsByTagName/id/tagname("sn_arrow").Click();
но чтото не работает.скрипту только недавно учусь,так что не кричите


Автор: sshishov, дата: 4 декабря, 2010 - 17:15
#permalink

Если в коде ставить, то:

document.getElementById("yourID").onclick = function() {
  alert('Картинка');
};

А если в HTML, то:

<img src= "yourPath" onclick="alert('Картинка')" />

Ну там дальше можно уже додумывать. Соррь если что, я сам только учусь.


Автор: Neznayka (не зарегистрирован), дата: 3 октября, 2010 - 17:12
#permalink

Как ограничить глубину поиска element.getElementsByTagName? Чтобы находил только детей а не всех потомков. Ну или подругому, можно ли выбрать детей определенного типа, не прибегая к условиям?


Автор: Леся (не зарегистрирован), дата: 1 ноября, 2010 - 16:03
#permalink

У меня следующий код:

var ms = document.getElementsByName('formname')[0].getElementsByTagName('*');
alert(ms.length);

в IE выдает 20, а в FF - 0. Подскажите пожалуйста, может я чего-то не так поняла.


Автор: alex_oo7, дата: 3 января, 2011 - 15:05
#permalink

По сути этот скрипт должен показывать название первой аудиозаписи в контакте на странице /audio.php
Но он не работает =(

javascript:
document.write(
document.getElementsByTagName('body')0].
getElementsByTagName('div')[0].
getElementsByTagName('div')[0].
getElementsByTagName('div')[2].
getElementsByTagName('div')[1].
getElementsByTagName('div')[0].
getElementsByTagName('div')[0].
getElementsByTagName('table')[0].
getElementsByTagName('tbody')[0].
getElementsByTagName('tr')[0].
getElementsByTagName('td')[0].
getElementsByTagName('div')[0].
getElementsByTagName('div')[0].
getElementsByTagName('div')[0].
getElementsByTagName('div')[1].
getElementsByTagName('table')[0].
getElementsByTagName('tbody')[0].
getElementsByTagName('tr')[0].
getElementsByTagName('td')[1].
getElementsByTagName('div')[0].
getElementsByTagName('b')[0].
getElementsByTagName('a')[0].value
);

Автор: Адель (не зарегистрирован), дата: 11 января, 2011 - 22:41
#permalink

Логично было бы упомянуть здесь и obj.parentNode - обращение к родителю, для завершенности.


Автор: Гость (не зарегистрирован), дата: 17 марта, 2011 - 13:31
#permalink

Добрый день!

Такой вопрос: как найти в документе элемент id="lightb" и в нём же все теги a. И этом тегам дописать атрибуты rel="lightbox". Событие происходит при загрузки страницы!

Привожу свой пример:

<body>
<script type="text/javascript" language="javascript">
function writerel() {
  var aimg = document.getElementById("lightb").getElementsByTagName("a");
  aimg.setAttribute('rel' ,'lightbox');
  }
</script>
<div id="lightb">
    <a href="#"><img scr="bla bla bla" /></a>
</div>
</body>

Автор: White_Mouse (не зарегистрирован), дата: 24 мая, 2012 - 09:37
#permalink

Здесь сразу несколько ошибок:

  1. Первая и самая очевидная — функция writerel описана, но нигде не вызывается Blink

  2. Далее — такой скрипт действительно выполняется во время загрузки страницы. Но, так как он описан в самом начале тега BODY, то будет выполнен до отрисовки любых элементов внутри него. То есть, если в скрипте вы хотите обратиться к элементу, то на момент выполнения скрипта элемент уже должен быть отрисован.

    Таким образом, в вашем случае нужно перенести тег script как минимум ниже тега div. А если планируется добавлять ещё элементы в код, то надёжнее всего будет разместить тег script в самом конце тела документа, перед закрывающим тегом body.

  3. Ну и напоследок — ошибка, которая в комментариях к этой статье повторяется с невероятным упорством. Только кто-нибудь из отвечающих укажет на неё, как двумя комментариями ниже она появляется снова. Пожалуйста, запомните накрепко — функция getElementsByTagName возвращает массив элементов!!!

    (На самом деле это не полноценный массив Array, а подобный ему объект, но это уже особенности внутреннего устройства языка, обращаться с ним всё равно нужно как с обычным массивом.)

  4. И уже не ошибка, но мелкое замечание — если хотите придерживаться хорошего стиля программирования, то не стоит использовать для ограничения строк и кавычки, и апострофы в одном и том же участке кода. Выберите какой-нибудь один ограничитель и используйте его на протяжении всего кода.

Подводя итог — в вашем случае код должен выглядеть как минимум так:

<body>
<div id="lightb">
    <a href="#"><img scr="bla bla bla" /></a>
</div>
<script type="text/javascript" language="javascript">
function writerel() {
    var aimg = document.getElementById('lightb').getElementsByTagName('a');
    for (var i = 0; i < aimg.length; i++) {
        aimg[i].setAttribute('rel' ,'lightbox');
    }
}
writerel();
</script>
</body>

Автор: Гость (не зарегистрирован), дата: 10 мая, 2011 - 09:53
#permalink

По идее, этот скрипт должен менять цвет бэкграунда на красный, но почему-то не меняет:

document.getElementsByTagName("body").style.backgroundColor = "#ff0000"

Что я делаю не так?


Автор: Гость (не зарегистрирован), дата: 3 июня, 2011 - 18:25
#permalink

Попробуй вот так

window.onload = function () {
var b = document.getElementsByTagName('body')[0].style.backgroundColor = "#ff0000";
};


Автор: Гость (не зарегистрирован), дата: 3 июня, 2011 - 18:53
#permalink

Причина в том, что при выполнении скрипта, элемента body еще не существеут, так как документ разбирается последовательно.

Нужно дождаться окончания загрузки документа, а потом выполнить скрипт.


Автор: Гость (не зарегистрирован), дата: 16 июня, 2011 - 11:34
#permalink

По мне так самые нормальные браузеры это мозила и опера. И то у них свои особенности, благодоря которым мозила лучше всего подходит для создания сайта (поскольку всеядный браузер, 1 версия мозилы понимала стлько тегов и прочее сколько 9 версия оперы и 5 версия ишака), а опера для бродилок по инету (благодаря своей быстроте).


Автор: DODGER (не зарегистрирован), дата: 11 июля, 2011 - 10:04
#permalink

Уже час мучаюсь document.getElementById возвращает null

var timeThen = document.getElementById('timeThen');
timeThen.onclick = function(){
	alert('Ну! Блин!');
}
<div id="content">
	<div id="leftBlock">
		<h1>Занятия <span id="timeNow">сейчас</span> / <span id="timeThen" class="jsAction">потом</span>:</h1>
	</div>
</div>

Почему?


Автор: DODGER (не зарегистрирован), дата: 11 июля, 2011 - 10:27
#permalink

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


Автор: Mikki Mouse (не зарегистрирован), дата: 23 октября, 2011 - 03:23
#permalink

Учу Javascript, столкнулся с проблемой:

function zIndex(n)
{
  var a=naw Array("containerPriroda","containerSpace","containerIndex_photo");
  var len=a.length;
  for(var i=0; i<len; i++)
  {
     document.getElementById(a[i]).style.zIndex=1;
  }
 document.getElementById(a[n-1]).style.zIndex=2;

}

Почему эта функция не работает?


Автор: Гость (не зарегистрирован), дата: 24 ноября, 2011 - 23:36
#permalink

может
new Array ?


Автор: m4gz, дата: 7 декабря, 2011 - 00:13
#permalink

Извиняюсь если повтор но вот фикс для IE

onload=function(){
if (document.getElementsByClassName == undefined) { //для IE только т.к. там нету этого
alert('fixing getELEmByClass');
	document.getElementsByClassName = function(className)
{		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = [];
		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) {
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}return results;		
	}
}

Автор: golden2020 (не зарегистрирован), дата: 22 декабря, 2011 - 21:10
#permalink

Помогите!!! Как сделать чтобы по URL открывался определенный документ и в нем найти какое то слово (например "Солнце" ). Подробнее: Допустим есть какая та страница html, и она находится по адресу http//:stranica.ru . Как мне со своего документа найти в ней слово "Солнце" и присвоить его переменной sun??? Как это сделать со строкой я знаю , а вот что бы так .....??? Подскажите кто знает чайнику (просто начинаю изучать JavaScript по видео урокам,много не понятно,а спросить не у кого )


Автор: 1klassss (не зарегистрирован), дата: 27 декабря, 2011 - 01:53
#permalink

простите а можно как то осуществить поиск по див если сам див каждый раз меняться??? например

<div id="b2749bbe88c"> а при перезайгрузке уже стает <div id="bc65eb7a7f2">

неособо силен в таких посиках по див, помогите пожалуйста!!


Автор: Zuenf, дата: 27 января, 2012 - 15:21
#permalink

Спасибо))


Автор: MaximLitskevich (не зарегистрирован), дата: 6 февраля, 2012 - 09:48
#permalink

Ребят, нужно по 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;"}


Автор: White_Mouse (не зарегистрирован), дата: 24 мая, 2012 - 08:45
#permalink

Не знакома с haml, но в любом случае, параметром функции getElementById должна быть строка. То есть в вашем случае нужно писать так:

onchange="javascript: document.getElementById('login').value = document.getElementById('email').value;"

Автор: kvmutl, дата: 26 августа, 2012 - 10:13
#permalink

я этот вопрос на форуме задавал, а тут целая статья на сайте есть...


Автор: indexcod, дата: 6 ноября, 2012 - 16:26
#permalink

xpath рулит))))))


Автор: Гость (не зарегистрирован), дата: 7 ноября, 2012 - 11:05
#permalink

Молодцы.
"Самый удобный способ найти элемент в DOM - это получить его по id."
А как получить их список? Где взять эти самые Id, если нужно просто пройти по документу?
Ни ссылки, ни комментария...


Автор: Kvark, дата: 15 августа, 2013 - 18:14
#permalink

Действительно! Какие плохиши!
нет чтоб не только разжевали но еще и проглотили бы!

А как насчет такого?

var MyIds=document.getElementById(containerElementID);
var MyTags=MyIds.getElementsByTagName('*');
for (var i=0; i<MyTags.length; i++) 
{
	alert(MyTags[i].id);
};

В пиве сила! В вине мудрость! А в воде... микробы!


Автор: Nick123456 (не зарегистрирован), дата: 10 ноября, 2012 - 00:32
#permalink

А если нужен поиск по тэгу не во всём документе, а только в выделенном мышью куске - это возможно ли и как?


Автор: Harm (не зарегистрирован), дата: 24 декабря, 2012 - 22:57
#permalink

всем привет. У меня вопрос. Как искать содержимое в таком код html:

<div class="b">
<div>
Сообщение 1
</div>
<div>
Сообщение 2
</div>
<div>
Сообщение 3
</div>
</div>

Автор: Kvark, дата: 15 августа, 2013 - 18:17
#permalink
var MyIds=document.getElementById(containerElementID);
var MyTags=MyIds.getElementsByTagName('div');
for (var i=0; i<MyTags.length; i++) 
{
	alert(MyTags[i].outerHTML.replace(/<\/?[^>]+>/g, ''));
};

В пиве сила! В вине мудрость! А в воде... микробы!


Автор: Гость (не зарегистрирован), дата: 8 апреля, 2013 - 20:07
#permalink

Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
Это нормально?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
 <div id="test2">Это такой проверочный текст</div>
 	<INPUT TYPE="button" VALUE="нажми меня2" ONCLICK="test2.style.color='blue'">
	<INPUT TYPE="button" VALUE="нажми меня" ONCLICK="alert(test.value)">
	<INPUT TYPE="text" ID="test">
 </BODY>
</HTML>

Автор: Гость (не зарегистрирован), дата: 8 июля, 2013 - 10:27
#permalink

Я этого тоже не могу понять


Автор: Гость (не зарегистрирован), дата: 8 апреля, 2013 - 20:10
#permalink

Меня до крайности смутило, корректное исполнение кода в 5 разных браузерах.
Это нормально?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<TITLE> New Document </TITLE>
	</HEAD>
	<BODY>
		<DIV id="test2">Это такой проверочный текст</DIV>
		<INPUT TYPE="button" VALUE="нажми меня2" ONCLICK="test2.style.color='blue'">
		<INPUT TYPE="button" VALUE="нажми меня" ONCLICK="alert(test.value)">
		<INPUT TYPE="text" ID="test">
	</BODY>
</HTML>

Автор: tsigel, дата: 12 августа, 2013 - 14:19
#permalink

Не плохо было бы добавить информацию о querySelector и querySelectorAll так как это поддерживают почти все браузеры.

http://www.codeisart.ru/w3c-css-selectors-api-the-queryselector-and-quer...


Автор: Руслан1993 (не зарегистрирован), дата: 22 ноября, 2013 - 19:55
#permalink

а как реализовать такой алгоритм:
к 2ум страницам штмл "штмл1" и "штмл2" подключён один и тот же js и в нём код, который должен делать:
выборка элемента с штмл1 на него событие клик,а действие которое должно происходить применяется на элемент в штмл2, но нечего не работает, что сделать?


Автор: golden2020, дата: 26 ноября, 2013 - 00:57
#permalink

Подскажите пожалуйста:
Вот допустим есть некий DIV с id="d2". В этом блоке находятся ссылки с неким class="c1". Как найти все ссылки которые находятся в этом блоке?

<div id="d2">
  <a class="c1" href="#1">
  <a class="c1" href="#2">
  <a class="c1" href="#3">
</div>

Нужно вытянуть ссылки (значение href);

Заранее спасибо всем тем кто откликнется!!!


Автор: golden2020, дата: 26 ноября, 2013 - 03:03
#permalink

Всё! Спасибо!!! Разобрался сам ))))


Автор: Антон1632 (не зарегистрирован), дата: 1 сентября, 2014 - 11:12
#permalink

Здравствуйте.
Подскажите пожалуйста. Нужно для ссылок в параграфе (p) применить класс "lightbox"
Использую пока такой код:
var els = document.getElementsByTagName('a');
for (var i = 0; i < els.length; i++)
els[i].setAttribute('class', 'lightbox');

но он применяет этот класс ко всем ссылкам в документе. Пробовал сделать как написано в статье — не получилось.
Помогите разобраться.


Автор: Skvor, дата: 27 октября, 2014 - 21:03
#permalink

А что будет, если скопировать(клонировать) узел, который содержит ID?
В копии не д.б. ID или всё-таки ID станет не уникальным?


Автор: Гость (не зарегистрирован), дата: 14 ноября, 2015 - 18:10
#permalink

Помогите, пожалуйста!
Программа находит все ссылки, которые есть в div, и выводит их URL- адреса, но они не активны, как сделать, чтобы он выводил все адреса и по ним ещё можно было перейти. Я думаю проблема в выводе:

document.write('<a>'+ giper[i]+'<br>'+'</a>');

код:

<body>
<div id="bot">
//куча ссылок
</div>
<script type="text/javascript" language="javascript">
function gripon()
{
var giper = document.getElementById('bot').getElementsByTagName('a');
    for (var i = 0; i < giper.length; i++) {
		document.write('<a>'+ giper[i]+'<br>'+'</a>');
                                                       }
}
gripon();
</script>
</body>

Автор: PunkerPoock (не зарегистрирован), дата: 14 ноября, 2015 - 22:59
#permalink

1. Изучите по любому справочнику "устройство" тега , в частности - назначение атрибута "href", и сами поймете свою ошибку.

2. Не используйте document.write - это из времен динозавров. Используйте innerHTML.


Автор: Гость (не зарегистрирован), дата: 15 ноября, 2015 - 11:23
#permalink
document.write('<a href="#">'+giper[i]+'<br></a>');

Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
Это лабораторная в ВУЗе, поэтому приходится использовать

document.write

Автор: Гость (не зарегистрирован), дата: 21 ноября, 2015 - 19:18
#permalink

[quote]
document.write(''+giper[i]+'');
Когда я подставляю в вывод хрев, то переход осуществляется наверх страницы, если нажать на любой адрес. Я вот, что думаю может, есть какой-то атрибут, который передает все адреса. Если такого нет, то очень грустно. Сколько гуглив я ничего все равно не нашел.
Это лабораторная в ВУЗе, поэтому приходится использовать document.write
[/quote]
"хрев", как вы выразились, который, конечно, даже по самым невразумительным правилам транскрибирования - всё же "хреф", является сокращением от "Hypertext REFerence" - что в переводе с английского означает "гипертекстовая отсылка", что в свою очередь намекает что именно в этом параметре должен быть указан адрес перехода...
И эта инфа свободно доступна по первой же ссылке в выдаче гугла по запросу "href" или "html a".

З.Ы. с такими навыками поиска информации в ВУЗ не было смысла идти - стоило сразу после 9го класса идти работать грузчиком - КПД выше был бы.


Автор: Гость (не зарегистрирован), дата: 7 марта, 2017 - 17:58
#permalink

Выше хрома 41 жизни нет.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название документа</title>
  <script type="text/javascript">
function count(t)
{
    var y = document.getElementById("para1");
    c=Number(y.innerHTML);
    c += Number(t);
    y.innerHTML=c;
}
  </script>
</head>
<body>
  <p id="para1">0</p>
  <button onclick="count('1')">+1</button>
  <button onclick="count('-1')">-1</button>
</body>
</html>

Автор: carinamon (не зарегистрирован), дата: 1 августа, 2023 - 11:48
#permalink

Этот метод позволяет получить элемент по его уникальному идентификатору Immaculate Grid. Идентификатор должен быть уникальным на странице.


Автор: Aqel (не зарегистрирован), дата: 17 октября, 2023 - 10:49
#permalink

Ребята подскажите советом (в JS не разбираюсь ещё):
Есть в вэб-странице код:

<div id="mep_0" class="mejs-container svg"
...
<video id="video-flash"  
...
url2="тут нужная мне ссылка"
...>

Мне нужно ссылку из url2 получить, просто хотя бы в конце страницы высвечивалась или как нить в окне что бы показывалась?
Не пинайте сильно. СпС.


 
Текущий раздел
Поиск по сайту
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Последние темы на форуме
Forum