|
DOMDocument Object Model, förkortat DOM, är ett plattforms- och språkoberoende gränssnitt för åtkomst och dynamiskt uppdatering av ett dokuments innehåll, struktur och formatering. DOM är en av teknikerna som gör AJAX möjligt. Åtkommst av input värden med JavaScriptLåt säga att vi har ett formulär med ett textfält. Vi vill komma åt värdet som klienten matar in innan det t.ex. skickas vidare till ett CGI-script. Vi kommer att använda oss av funktionen "getElementById". OBS! Notera att användandet av "id" betyder att varje id måste ha ett -för sidan- unikt värde. HTML-koden vi skriver är helt vanlig formulärdatasyntax, dock med tillägget id="uniktid" för att komma åt innehållet. <form name="form"> <input type="text" name="faltvarde" id="textfalt01" /> <input type="button" value="Skicka Data" onclick="valideraData()" /> </form> Normalt sett ska ett formulär (<form>..</form>) innehålla method="post" eller "get" samt action="daya.cgi", en sökväg (url) till ett mottagande CGI-script. "Action" skulle i detta fall leda oss bort från sidan mot någon annan URL. Det vill vi inte, vi vill stanna kvar på sidan utan att ladda om den. Det är det som är det fiffiga med AJAX att vi inte ska behöva hämta hela sidan på nytt så fort vi matar in värden. Vi behöver skriva en javascript-funktion som hanterar "valideraData()". <script type="text/javascript">
function valideraData() {
var textfaltvarde = document.getElementById("textfalt01").value;
if (textfaltvarde != '') {
alert("Du skrev: " + textfaltvarde);
} else {
alert("Du måste skriva något!");
}
}
</script>
Den kompletta html-koden. <!DOCTYPE html>
<html>
<head>
<title>DOM Access</title>
<script type="text/javascript">// <![CDATA[
function valideraData() {
var textfaltvarde = document.getElementById("textfalt01").value;
if (textfaltvarde != '') {
alert("Du skrev: " + textfaltvarde);
} else {
alert("Du måste skriva något!");
}
}
// ]]></script>
<body>
<form name="form">
<input type="text" name="faltvarde" id="textfalt01" />
<input type="button" value="Skicka Data" onclick="valideraData()" />
</form>
</body>
</html>
Testa att köra koden här. Åtkommst av andra DOM värden med JavaScriptVad vi gjorde i ovanstående exemplet var att hämta ett textfält-varde från ett textfät med id "textfalt01". Detta gjorde vi med: "document.getElementById('textfalt01').value". Låt säga att vi vill hämta värdet från en <textarea>-tagg. Normalt sett funkar det på samma sätt. Du kan prova det här. document.getElementById("text01").value Annars kan man också använda innerHTML för åtkommst av värde då <textarea>(här skriver klienten)</textarea> är omslutande med en start, och sluttagg (Notera att detta endast funkar med Internet Explorer). <form name="form"> <textarea name="text" id="text01"></textarea> <input type="button" value="Skicka Data" onclick="valideraData()" /> </form> document.getElementById("text01").innerHTML Vad beträffar form-data så är value metoden att föredra. Med innerHTML kan vi komma åt andra objekt i html-koden. Titta på följande exempel <!DOCTYPE html>
<html>
<head>
<title>DOM Access</title>
<script type="text/javascript">
function showPara(nr) {
var para = document.getElementById("para"+ nr).innerHTML;
if (para != '') {
alert("Innehållet i Paragraf: " +nr+ "\n" + para);
} else {
alert("Det finns inget innehåll!");
}
}
</script>
<body>
<p id="para1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit..
<p id="para2">
Praesent hendrerit, ante luctus semper vestibulum..
</p>
<p id="para3">
Fusce at feugiat mauris. Fusce rutrum est eu leo iaculis..
</p>
<form>
<input type="button" value="Visa innehållet i paragraf 1" onclick="showPara('1')" />
<input type="button" value="Visa innehållet i paragraf 2" onclick="showPara('2')" />
<input type="button" value="Visa innehållet i paragraf 3" onclick="showPara('3')" />
</form>
</body>
</html>
Åtkommst & Ändring av CSS värden via DOM med JavaScriptEn annan mycket användbar funktion med DOM är när man börjar kombinera CSS med JavaScript för att ända designattribut.
Författat av Hans E Andersson, 2010-11-24
"DOM", Hans E Andersson: 2010-11-24 16:25:54, ändrad: 2011-02-22 02:56:01
|