Как изменить не прямого потомка на чистом js?

Question

[romasovest]

Есть такой код, например:

HTML:

<div class="div-class-0" attr="аттрибут 1-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 1-го span"></span>
	</div>
</div>
<div class="div-class-0" attr="аттрибут 2-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 2-го span"></span>
	</div>
</div>
<div class="div-class-0" attr="аттрибут 3-го div">
	<div class="div-class-1">
		<span class="span-class" attr="аттрибут 3-го span"></span>
	</div>
</div>

JS:

$(function(){
	var str = "";
	$(".div-class-0").each(function(i,e){
		console.log($(this).attr("attr")+" / "+$(this).find(".span-class").attr("attr"));
	});
});

На выходе получается:

аттрибут 1-го div / аттрибут 1-го span
аттрибут 2-го div / аттрибут 2-го span
аттрибут 3-го div / аттрибут 3-го span

Как сделать то же самое, но без jQuery? А именно, интересует как качественно заменить .find().

Не хочу использовать querySelectorAll(), потому что беспокоюсь за строгость наследования. Я хочу быть уверен, что в каждой строке на выходе я увижу атрибуты от div'a и span'a, которые 100% относятся к одному блоку.

И еще возможно я зря переживаю и действительно вот такое решение вполне сгодится:

var divclass0_arr = document.querySelectorAll(".div-class-0");
var spanclass_arr = document.querySelectorAll(".span-class");
for(i=0;i<divclass0_arr.length;i++){
	console.log(divclass0_arr[i].getAttribute("attr")+" / "+spanclass_arr[i].getAttribute("attr"));
}

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

Answer 1

[Alexander Pushkarev]

Если сомвераетесь, то воспользуйтесь youmightnotneedjquery.com там есть решение + альтарнатива

Comments

[romasovest]

Спасибо! Кажется нашел там то что нужно. Сейчас попробую)

[romasovest]

Да, все получилось, вот так:

var divclass0_arr = document.querySelectorAll(".div-class-0");
for(i=0;i<divclass0_arr.length;i++){
	console.log(divclass0_arr[i].getAttribute("attr")+" / "+divclass0_arr[i].querySelectorAll(".span-class")[0].getAttribute("attr"));
}

Еще раз, спасибо!