Поиск элемента по классу

[vavich]

не спешите критиковать, только учусь

есть вот такой HTML c двумя классами class="con"

<div class="con">text</div>
<div id="tro">
       <div class="co">
            <div class="con">text1</div>
            <div class="foo"></div>
        </div>
</div>

а нужно второму элементу div с классом class="con" добавит еще один элемент

вот пробовал через дочерные элементы

var elems = document.getElementById('tro');
  var elems_child = elems.childNodes;

  for (var key in elems_child)
  {
    var val = some_array[key];
    if(val.className == 'con')
    {
       var select = document.createElement('div');

       val.appendChild(select);
    }
  }

но что то не получаеться так, подскажите правильный путь

[walik]

Во первых ошибка у тя тут:

var val = some_array[key];

Массив с элементами у тебя же elems_child.

Во вторых:

var elems_child = elems.childNodes;

В твоем случае надо:

var elems_child = elems.childNodes[1];

window.onload = function() {
	var elems = document.getElementById('tro');
	var elems_child = elems.childNodes[1];
 
	for (var key in elems_child) {
		var val = elems_child[key];
		if(val.className == 'con') {
			var select = document.createElement('div');
			val.appendChild(select);
		}
	}
}

[monolithed]

walik, for-in в конкретном случае зло!

[vavich]

отладчик пишет ошибку

val is null

а как можно проверить нашло ли совпадение if(val.className == 'con')
пытался в оператор вставить alert('1'); не чего не получилось не сработало

[walik]

<script>
window.onload = function() {
    var elems = document.getElementById('tro');
    var elems_child = elems.childNodes[1];
  
    for (var key in elems_child) {
        var val = elems_child[key];
        if(val.className == 'con') {
            var select = document.createElement('div');
            select.innerHTML = 'added div';
            val.appendChild(select);
        }
    }
}
</script>
<div class="con">text</div>
<div id="tro">
       <div class="co">
            <div class="con">text1</div>
            <div class="foo"></div>
        </div>
</div>

Вот все же работает ?



monolithed,
А почему зло ? И что следует в данном случае использовать ?

[monolithed]

А почему зло ? И что следует в данном случае использовать ?

во-первых, в конкретном случае возможно обойтись и getElelementsByTagName(), во-вторых, for-in самый прожорливый и медленный из всех циклов (в конкретном случае можно заменить на обратный while), в остальном читать тут.

[Kolyaj]

А почему зло ?

for-in не гарантирует порядок перебора, и не гарантирует, что будут перебраны только числовые свойства.

[sotik]

Есть код:

document.onclick = function( e ){
class = e.target.className;
if(class=="strun")alert("хороший");
}

<div class="strun">
мой текст
</div
Нужно,чтоб скрипт не щупал все подряд,а выдавал сообщение только при клике на элементе с заданным классом.Вот так как у меня не выходит,а как правильно?

[BETEPAH]

class - это зарезервированное слово, его в качестве переменных нельзя использовать.

<div class="strun">мой текст</div>
<div class="strun2">мой текст2</div>
<script>
document.onclick = function( e ){
	if(e.target.className == "strun") alert("хороший");
}
</script>

Но вообще, правильнее было бы вешать онклики сразу на нужные классы, а не на весь документ.

[sotik]

Спасибо.Не знал что эту переменную нельзя использовать...
А почему вот так работает:
<div class="strun">мой текст</div>
А вот так нет?
<div class="strun">
<p>1 струна</p>
</div>
Как правильно?