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();>
Om jag tolkade dig rätt ville du applicera en valfri klass på redan existerande element för att ändra stylingen så är detta inte något jag rekommenderar, du hade lika bra kunnat göra det direkt via CSS-filen utan att behöva gå via DOM:en.
Dock om du tvunget vill veta hur du gör det, så kan du med hjälp av .classList få fram samtliga klasser som existerar på ett element, via classList kan du sedan använda funktionen .add("className") eller .remove("className") för att lägga till eller ta bort klasser till specifika element som du kan få fram via övriga DOM funktioner som t ex:
document.getElementById("");
document.getElementsByTagName("");
document.getElementsByClassName("");
Alternativt:
document.querySelector(""); // fungerar likt jQuery CSS-selector targeting av element, dock lite slöare prestandamässigt än ovan alternativ.
Om det finns fler av samma så ger .querySelector() dig enbart första bästa träff, medan .querySelectorAll(""); Ger dig samtliga träffar i Hela DOMen att iterera igenom via for-loop eller foreach :)
Så exempelvis om du hade velat applicera en CSS-klass stilregel via JS DOM på en specifik tagg utan ID eller class t ex. footer HTML5 element:
document.querySelector("footer").classList.add("class");
För body elementet kan du komma åt via document.body.classList.add("bodyCopy");
Gällande din fråga #2 (ish) för .footerp, ja du kan hämta via document.getElementById("some-id") om din p-tag har id="some-id" och sen för att applicera class namn så sätt .classList.add("footerp");
I.o.m. att DOM element kan ha flera klasser applicerade på sig i HTML så är det mer rimligt med en klasslista (classList) än att direkt kunna ange enbart ett className :)
För din fråga #3 (ish) gällande <li class="navigation" att få in <a> länk inuti <li></li> så kan man göra på lite olika sätt, ett sätt är att först hämta det som står inuti <li></<li> spannet, då du verkar vilja använda det värdet/behålla det. Så exempelvis:
let liContent = document.querySelector(".navigation").innerText; // eller .innerHTML, btw - antar här att class="navigation" bara finns 1 gång i ovan demo-kod för liContent.
Sen när vi har det nedsparat kan vi göra:
Visa spoiler
document.querySelector(".navigation").innerHTML = '<a href="#' + liContent + '">' + liContent + '</a>';
Så borde den lägga in <a> länk med ditt <li> content.
Om .navigation förekommer flera gånger, vilket det verkar som när man läser vidare i din fråga, så hade man kunnat göra som följer:
Visa spoiler
let navigationClassElems = document.getElementsByClassName("navigation");
for(let i = 0; i < navigationClassElems.length; i++) {
let liContent = navigationClassElems[i].innerText;
navigationClassElems[i].innerHTML = '<a href="#' + liContent + '">' + liContent + '</a>'
}
Eller något i den stilen.
Gällande fråga #4 (ish) med #lista2 och applicera style på parentNode:
Visa spoiler
document.getElementById("lista2").parentNode.style = "background-color:#cfd8dc";
För sista fråga #5 (ish) gällande modulus varannan style attribut textfärg röd:
Visa spoiler
let navigationClassElems = document.getElementsByClassName("navigation");
for(let i = 0; i < navigationClassElems.length; i++) {
if((i+1) % 2 == 1) {
navigationClassElems[i].style = "color: #f00";
}
}
Kanske något i den stilen?
OBS! Ej testkört koden, bara höftat fram pseudokod som jag tror kanske kan funka :)
Det är bra att du svarar, men du såg kanske inte att det är sju år gamla trådar du svarar i.
