--- title: "Gå igenom DOM trädet omvänt fast i turordning" type: "forum-thread" url: "https://www.webforum.nu/amne/javascript/178440-gå-igenom-dom-trädet-omvänt-fast-i-turordning" topic: "JavaScript" topic_url: "https://www.webforum.nu/amne/javascript" author: "Dino" published: "2009-05-06T22:47:41.000Z" updated: "2009-05-08T02:31:26.000Z" replies: 6 views: 643 page: 1 pages: 1 language: "sv-SE" site: "webForum — webforum.nu" rights: "Upphovsrätten till varje inlägg tillhör dess författare." attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/178440-gå-igenom-dom-trädet-omvänt-fast-i-turordning" --- # Gå igenom DOM trädet omvänt fast i turordning ## #1 — Dino, 2009-05-06T22:47Z Skulle vilja loopa igenom alla element på en sida och ändra dess style. Vill dock att stylen skall sättas på elementen i den här turordningen i DOM trädet nedan: h2 \> div \> p \> a \> li \> li \> li \> ul \> span \> span \> p \> h1 \> div \> h3 \> div \> body eller denna h1 \> span \> span \> span \> li \> li \> li \> ul \> a \> p \> p \> h2 \> div \> div \> h3 \> div \> body ```

``` Går detta att uppnå? Permalänk: https://www.webforum.nu/p/178440 ## #2 — nitro2k01, 2009-05-07T04:54Z Dags för lite fulkodning på morgonkvisten. Det övergripande målet verkar vara att gå igenom elementen dels inifrån och ut, och dels baklänges. Visserligen var väl inte det första förslaget tänkt att tas ordagrant, men jag gjorde det på kul ändå. Koden jag kom fram till ser ut som följer, och gör precis det du ber om (Förutom att din kod innehåller en p mer än ordningen du först räknade ut samt att skriptet jag skrev även tycker att script-taggen ingår i uppräkningen) ``` Cheat sheet: h2 > div > p > a > li > li > li > ul > span > span > p > h1 > div > h3 > div > body

``` Stilmallen överst färgar elementen som så att inre element blir mörkare och yttre ljusare. (Rent kosmetiskt för att lättare ¨ålla reda på dem) I JS-koden går **walk**\-funktionerna igenom varje element och först går igenom elementets barn och sedan applicerar **applyStyle** på sig självt, för att skapa ordningen inifrån och ut. **applyStyle** kan uppenbarligen gör vad man vill, men i detta fall håller den koll på vad som görs med vilka element. (För debuggning) Notera att **walk_f** kallar på **walk_b** medan **walk_b** kallar på sig självt. Att **walk_f** alls existerar beror på att du ville att diven med h3 i sig skulle hanteras sist. Är ordningen (Fram/baklänges) inte viktig kan du nöja dig med antingen **walk_f** eller **walk_b**. Men om du väljer **walk_f** se till att ändra anropet i funktionen till att kalla på sig själv. Sedan får du gärna tala om vad du faktiskt vill uppnå... Kanske finns det ett enklare sätt. Permalänk: https://www.webforum.nu/p/2184217 ## #3 — Dino, 2009-05-07T17:43Z Koden fungerar hur bra som helst, men nu kommer då del två av problematiken. Det jag vill ändra för varje element är dess fontSize, vilket verkar vara svårare än jag trodde, då *el.style.fontSize = s + "px";* inte fungerar. Anledningen till att jag vill gå innefrån och utåt bland elementen är att jag försöker hindra att fontSizen ärvs från Parent till Child vilket jag märkt ger konstiga resultat. Någon kan kanske redan här rätta mig om hela tankesättet är fel. Har kollat på en hel del fontResizer script, men inget verkar kunna gå igenom alla element och plusa på/dra ifrån x antal px. Om det nu kan fungera i teorin så antar jag att en jquery lösning skulle vara det bästa. Vad anser ni? Permalänk: https://www.webforum.nu/p/2184270 ## #4 — nitro2k01, 2009-05-07T18:29Z Vad står **s** för? Alltså, i dasgläget, hur beräknar du **s**? Om du sätter storleken absolut i pixlar så bör inte ordningen spela någon roll. (Med mindre än att du hämtar fontSize från parent och använder det på något sätt.) Och varför vill du ändra storleken? För att markera vissa element i en meny? För att låta användaren välja font-storlek? Något annat? Du kanske borde kolla på enheten **em**, som sätter storleken relativt parent-elementet. En värde av **2em** ger till exempel dubbla storleken mot parent. Kan du visa lite "riktig" kod kanske? Permalänk: https://www.webforum.nu/p/2184275 ## #5 — Dino, 2009-05-07T22:20Z Anledning: För att låta användaren välja font-storlek. Enheten em: Föredrar px så det är det jag jobbar med. "riktig" kod: Här är en variant som inte ger önskat resultat. ``` Untitled

Cheat sheet: h2 > div > p > a > li > li > li > ul > span > span > p > h1 > div > h3 > div > body

- + ``` Permalänk: https://www.webforum.nu/p/2184298 ## #6 — nitro2k01, 2009-05-08T01:10Z For the record tycker jag att din idé för att ändra storleken är... well, dåligt genomtänkt. Mitt råd är: gör om, gör rätt. Här är ett enkelt exempel hur du kan använda em. Notera hur jag bara ändrar textstorleken för body och att resten av elementen följer med i storlek. ``` Untitled

Cheat sheet: h2 > div > p > a > li > li > li > ul > span > span > p > h1 > div > h3 > div > body

- + ``` Du kan även välja mellan flera olika stilmallar. Kolla t ex: Permalänk: https://www.webforum.nu/p/2184303 ## #7 — Dino, 2009-05-08T02:31Z Som du säger så får jag nog ta mig en funderare. Tackar så mycket för all hjälp. Permalänk: https://www.webforum.nu/p/2184304 --- Tråden på webben: https://www.webforum.nu/amne/javascript/178440-gå-igenom-dom-trädet-omvänt-fast-i-turordning