JAVASCRIPT OCH DOM
Hej, Jag har en fundering kring DOM, JS och CSS.
Jag har en css och html fil, men jag vill ändra lite grejer via en JS- fil.
Om p i css filen är följande:
body, p, h1, h2, h3 {
margin: 0;
padding: 0;
font-family: Lato, sans-serif;
font-size: 1em;
font-weight: 400;
line-height: 1.5;
}
och jag ska sätta klassen med .bodyCopy
.bodyCopy {
font-family: 'Lora', serif;
padding-top: 1em;
}
för dessa, samtidigt som jag hämtar flera element
Är det så jag skriver?
<p class="some-class"></p>
document.getElementByClassName("some-class").className = "bodyCopy";
var nodelist = document.getElementsByClassName("some-class");
for (var i = 0; i < nodelist.length; i++) {
nodeList[i].classname = "bodyCopy";
}
Efter det ska jag fortsätta med enbart manipulera det
<p> element som finns i <footer> taggen. Jag ska
hämta den och sedan sätta klassen footerp för detta i CSS dokumentet.
.footerp {
font-family: 'Lato', sans-serif;
padding-left: 1em;
color: #eceff1;
font-size: 0.75em;
line-height: 3;
}
Ska jag skriva så?
<p id="some-id"></p>
document.getElementById("some-id").className = "footerp";
selektorer och loopar.
Sen ska jag skapa länkar selektorer och loopar utifrån navigations-listans <li>
element och dess text.
<li class="navigation">HTML</li>
ska alltså ändras till att vara
<li class="navigation><a href="#HTML">HTML</a></li>
och så vidare för de tre <li> elementen.
Så här ser den ut i html
<div class="container">
<main>
<nav>
<ul>
<li class="navigation">HTML</li>
<li class="navigation">DOM</li>
<li class="navigation">Javascript</li>
</ul>
</nav>
men hur gör jag det i jS?
Id selektorer och attribut
Här ska jag med hjälp av ID-selektorer välja #lista2.
Du ska sedan utgå från den för att manipulera dess parentnode så att denna har attributet style satt till background-color: #cfd8dc*/
kombinera flera typer av selektorer för att manipulera textfärgen i #lista1. Du ska med hjälp av modulus % göra så att de ojämna <li> elementen i listan har style attributet color: red
Det är lite otydligt i din text vad det är du vill uppnå.
Dock så är det generellt en dålig idé att börja köra javascript som ska ändra i din DOM innan DOMen är färdiggenerad i din läsare, innan dess är det inte säkert att elementen du försöker ändra på ens existerar.
Därför är det generellt en bra idé att lägga in ditt script att köras som callback när din sida har laddats färdigt. T.ex. genom
<script>
document.addEventListener("DOMContentLoaded", function(e) {
//Här ska du lägga in din funktion.
});
</script>
Vad gäller dina övriga frågor så är det lite oklart vad det är du vill uppnå.
Vill du bara ändra på det första elementet som har klassen some-class. Eller vill du ändra på alla element som har den klassen?
Vad gäller din andra fråga så vill du bara ha <p>-element som finns innuti en footer. Då vill du inte köra din selector på hela dokumentet. Du vill köra den på bara de element som finns innuti footer. Så din kod blir något i stil med document.getElementsByTagName("footer").getElementsByTagName("p").
Håller med pethaf. Du kan inte utgå ifrån att din kod kommer fungera under alla omständigheter.
Jag brukar använda
<body onload=mystartupcode();>
