Komma åt tags som ligger i en tag.

JavaScript

12 svar · 453 visningar · startad av oskob 15 jan. 2006

oskobMedlem sedan maj 20021 558 inlägg

Frågan15 jan. 2006 15:17#1

Hejsan!

Jag vill med javascript sno lite info ur en div och lägga i en array.
Så här ser koden ut som jag ska hämta från:

<div class="imgtitle">
<h1>Bildens namn</h1>
<h2>Beskrivning</h2>
<h3>datum</h3>
</div>

Så här ser koden ut nu men jag får ju allt i html format då.

for (i = 0, i < document.getElementsByTagName('div'), q++ ) {

if ( document.getElementsByTagName('div')*.className == "imgtitle ) {

data = document.getElementsByTagName('div')*.innerHTML;

}
}

Antingen kan man ju dela upp strängen i Javascript men jag skulle helst vilja att det gick att göra genom att välja elementen direkt.
Såhär typ: document.getElementsByTagName('div')*.h1.innerHTML

Förreasten. Är innerHTML "bra" att använda? Någon sa att det inte var standard har jag för mig.

Tack på förhand!***

Peter SMedlem sedan dec. 20025 483 inlägg

15 jan. 2006 16:05#2

Hur gick det med preloadern?

for (i = 0, i < document.getElementsByTagName('div'), q++ ) {

if ( document.getElementsByTagName('div')*.className == "imgtitle ) {

data = document.getElementsByTagName('div')*.innerHTML;

}
}**

Jag tvivlar på att du får någonting ö.h.t. med den koden:

Du använder kommatecken istället för semikolon för att separera uttrycken i for-loopen
Har länge skall loopen köras? Det fattas ett .length i villkoret
q++? i++
Det fattas ett avslutande citationstecken efter imgtitle

Dessutom är det onödigt att göra 'i' och 'data' globala i for-loopen. Använd 'var' vid deklarering.

for (var i = 0; i < document.getElementsByTagName('div').length; i++ ) {
  if ( document.getElementsByTagName('div')[i].className == "imgtitle" ) {
    var data = document.getElementsByTagName('div')[i].getElementsByTagName("h1")[0].innerHTML;
  }
}

Ja, innerHTML är inte standard. Men många bläddrare har ändå valt att implementera det.

oskobMedlem sedan maj 20021 558 inlägg

15 jan. 2006 20:00#3

åh fan är det det man använder "var" till. Då fick man lära sig det!
Koden för loopen kladdade jag bara ner nu för jag orkade inte öppna filen ;) Den fungerar finfint. Men "data" blir "<h1>djasd</h1><h2>jdfjkdsf" osv.

Ska testa ditt script nu!

Och ang. preloadern: http://www.huddletogether.com/projects/lightbox/ :) Hittade det innan jag såg ditt svar, men jag kommer antagligen behöva det i framtiden :)

Peter SMedlem sedan dec. 20025 483 inlägg

15 jan. 2006 20:03#4

Oki! :)

oskobMedlem sedan maj 20021 558 inlägg

15 jan. 2006 20:09#5

Fel: document.getElementsByTagName("div")[z].getElementsByTagName("h1")[0] has no properties
Källkodsfil: script.js
Rad: 143

 
function insertFlash () {

	for ( var z = 0; z < document.getElementsByTagName('div').length; z++) {
		var zelement = document.getElementsByTagName('div')[z];

		if ( zelement.className == "imgtitle" ) {
			var testalite = document.getElementsByTagName('div')[z].getElementsByTagName("h1")[0].innerHTML
			alert(testalite);
			getInfo = zelement.innerHTML.split('|');
			flashVars = "name=" + getInfo[0] + "&desc=" + getInfo[1] + "&date=" + getInfo[2] + "&num=" + getInfo[3];
			
			if ( flashinstalled == 2 ) {
						
				[...]

			}else{
				zelement.innerHTML = '<h1>' + getInfo[0] + '</h1><h2>' + getInfo[1] + '</h2><h3>' + getInfo[2] + '</h3>';
			}
			
		}
	}
 }

Peter SMedlem sedan dec. 20025 483 inlägg

15 jan. 2006 20:17#6

Egentligen är det fel att antaga att element existerar som det görs på den raden. Vad händer om du ändrar till:

			var testalite = document.getElementsByTagName('div')[z].getElementsByTagName("h1");
		if (testalite.length > 0) {
			// använd foo
			var foo = testalite[0];

			testalite(asshole);
			getInfo = zelement.innerHTML.split('|');
			flashVars = "name=" + getInfo[0] + "&desc=" + getInfo[1] + "&date=" + getInfo[2] + "&num=" + getInfo[3];
			
			if ( flashinstalled == 2 ) {
						
				[...]

			}else{
				zelement.innerHTML = '<h1>' + getInfo[0] + '</h1><h2>' + getInfo[1] + '</h2><h3>' + getInfo[2] + '</h3>';
			}
		}

oskobMedlem sedan maj 20021 558 inlägg

15 jan. 2006 23:34#7

Får samma fel :/

Men finns det inget som heter child eller något som man kan använda för att gå ner i hirarkin. I flash använder man det när man läser xml-filer. typ blabla.firstChild.childNode eller något sånt.

oskobMedlem sedan maj 20021 558 inlägg

16 jan. 2006 02:48#8

Nu har jag kommit ett steg längre.
Det fungerar men jag får fortfarande felmeddelandet att det inte finns någon property.

function insertFlash () {

	for ( var i = 0; i < document.getElementsByTagName('div').length; i++) {
		var element = document.getElementsByTagName('div')[i];

		if ( element.className == "imgtitle" ) {
			
			var getInfo = new Array()
		
			[B]getInfo[0] = element.getElementsByTagName("h3")[0].innerHTML[/B]
			getInfo[1] = element.getElementsByTagName("h4")[0].innerHTML
			getInfo[2] = element.getElementsByTagName("h5")[0].innerHTML
			getInfo[3] = element.getElementsByTagName("p")[0].innerHTML

			
			var flashVars = "name=" + getInfo[0] + "&desc=" + getInfo[1] + "&date=" + getInfo[2] + "&num=" + getInfo[3];

			if ( flashinstalled == 2 ) {
						
				renderedHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="490" height="50" id="Untitled-1" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="/fonts/imgtitle.swf" /><param name="quality" value="high" /><param name="wmode" /><param name="flashvars" value="' + flashVars + '" /><param name="bgcolor" value="#080808" /><embed src="/fonts/imgtitle.swf" quality="high" bgcolor="#080808" width="490" flashvars="' + flashVars + '" height="50" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
	
				element.innerHTML = renderedHTML;

			}
		}
	}
}

Allt fungerar finfint men det känns ju inte riktigt rätt att den klagar.
Fel: element.getElementsByTagName("h3")[0] has no properties
Källkodsfil: script.js
Rad: 146 (den fetade raden i koden)

R: Fungerar inte alls i explorer

Peter SMedlem sedan dec. 20025 483 inlägg

16 jan. 2006 10:02#9

Saken är kanske den att det inte finns något element <h3> i just den <div>:en? Hur som helst, som jag skrev innan, det är aldrig bra att antaga att någonting existerar. Som i:

getInfo[0] = [b]element.getElementsByTagName("h3")[0][/b].innerHTML

Ovan antas det att den fetstilta delen existerar och att innerHTML-egenskapen därför går att läsa. Istället bör man göra så här:

var h3 = element.getElementsByTagName("h3")[0];
if (h3) getInfo[0] = h3.innerHTML;
...
var flashVars = "name=" + (getInfo[0] || "") +

Skulle däremot <h3>-<h5> och <p> finnas borde det inte vara några problem. Nedanstående kod får jag t.ex. inga felmeddelanden med:

<script>
flashinstalled=2;
function insertFlash () {

	for ( var i = 0; i < document.getElementsByTagName('div').length; i++) {
		var element = document.getElementsByTagName('div')[i];

		if ( element.className == "imgtitle" ) {

			var getInfo = new Array();
		
			getInfo[0] = element.getElementsByTagName("h3")[0].innerHTML
			getInfo[1] = element.getElementsByTagName("h4")[0].innerHTML
			getInfo[2] = element.getElementsByTagName("h5")[0].innerHTML
			getInfo[3] = element.getElementsByTagName("p")[0].innerHTML

			
			var flashVars = "name=" + getInfo[0] + "&desc=" + getInfo[1] + "&date=" + getInfo[2] + "&num=" + getInfo[3];

			if ( flashinstalled == 2 ) {
						
				renderedHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="490" height="50" id="Untitled-1" align="middle"><param name="allowScriptAccess" value="sameDomain" /><param name="movie" value="/fonts/imgtitle.swf" /><param name="quality" value="high" /><param name="wmode" /><param name="flashvars" value="' + flashVars + '" /><param name="bgcolor" value="#080808" /><embed src="/fonts/imgtitle.swf" quality="high" bgcolor="#080808" width="490" flashvars="' + flashVars + '" height="50" name="mymovie" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
	
				element.innerHTML = renderedHTML;

			}
		}
	}
}
</script>

<div class="imgtitle">
 <h1>Bildens namn</h1>
 <h2>Beskrivning</h2>
 <h3>datum</h3>
 <h4>h4</h4>
 <h5>h5</h5>
 <p>paragraph</p>
</div>
<form>
 <input type="button" onclick="insertFlash()">
</form>

firstChild och childNodes[] finns också. Problemet med dessa är att de inte alltid returnerar samma saker i olika webbläsare.

oskobMedlem sedan maj 20021 558 inlägg

16 jan. 2006 12:07#10

Ah ajg hittade felet.
Jag hade en till div som hette imgtitle längre ner som jag hade glömt fylla i. Nu fungerar det!

Ska snygga till scriptet lite enligt din metod också. Nog klokt eftersom hela sidan blir fel om den stöter på fel.
Tack för hjälpen! :)

Peter SMedlem sedan dec. 20025 483 inlägg

16 jan. 2006 12:15#11

. :bire

nitro2k01Medlem sedan aug. 20039 340 inlägg

16 jan. 2006 14:40#12

:bire

sl0kMedlem sedan maj 2005562 inlägg

16 jan. 2006 18:13#13

oskob skrev:

Får samma fel :/

Men finns det inget som heter child eller något som man kan använda för att gå ner i hirarkin. I flash använder man det när man läser xml-filer. typ blabla.firstChild.childNode eller något sånt.

jo det finns
sök på google på ex
DOM childNodes

finns childNodes, firstChild m.fl

EDIT:
http://www.pageresource.com/dhtml/ryan/part4-1.html