what am i making? i'm making a chrome extension for fun and the code below works completely fine, only...
i'm trying to resolve how i would be able to loop all of this so i dont have to write infinite code for every single child of a child that extends on a page.
let stack = document.body.children;
for (let i = 0; i < stack.length; i++){
stack[i].setAttribute("style", "border-radius:30px;");
let stack2 = stack[i].children;
for (let a = 0; a < stack2.length; a++) {
stack2[a].setAttribute("style", "border-radius:30px;");
let stack3 = stack2[a].children;
for (let b = 0; b < stack3.length; b++) {
stack3[b].setAttribute("style", "border-radius:30px;");
let stack4 = stack3[b].children;
for (let c = 0; c < stack4.length; c++) {
stack4[c].setAttribute("style", "border-radius:30px;");
let stack5 = stack4[c].children;
for (let d = 0; d < stack5.length; d++) {
stack5[d].setAttribute("style", "border-radius:30px;");
let stack6 = stack5[d].children;
for (let e = 0; e < stack6.length; e++) {
stack6[e].setAttribute("style", "border-radius:30px;");
let stack7 = stack6[e].children;
for (let f = 0; f < stack7.length; f++) {
stack7[f].setAttribute("style", "border-radius:30px;");
let stack8 = stack7[f].children;
for (let g = 0; g < stack8.length; g++) {
stack8[g].setAttribute("style", "border-radius:30px;");
let stack9 = stack8[g].children;
for (let h = 0; h < stack9.length; h++) {
stack9[h].setAttribute("style", "border-radius:30px;");
let stack10 = stack9[h].children;
for (let j = 0; j < stack10.length; j++) {
stack10[j].setAttribute("style", "border-radius:30px;");
let stack11 = stack10[j].children;
for (let k = 0; k < stack11.length; k++) {
stack11[k].setAttribute("style", "border-radius:30px;");
}
}
}
}
}
}
}
}
}
}
}
I think recursive iteration is what you are looking for:
function drillDown(element) {
if (element.hasChildNodes()) {
for (let item of element.children) {
if (!(item instanceof HTMLScriptElement || item instanceof HTMLHeadElement)) {
drillDown(item);
item.style.borderRadius = "30px";
}
}
}
}
so you can traverse element's nodes tree like:
const root = document.querySelector('#root');
drillDown(root)