Problem med lastChild()

Kan någon förklara varför ett klick på Knapp 1 ger "A" men ett klick på Knapp 2 ger "undefined". Det enda som skiljer är att den första länken innehåller ett mellanslag.

Jag kör med IE6.

<script type="text/javascript">
	function toggleComments(objSource){
		alert(objSource.parentElement.lastChild.tagName)
	}
</script>

<ul>
	<li>
		<button onclick="toggleComments(this);">Knapp 1</button>
		<a href="#">Text </a>
	</li>
	<li>
		<button onclick="toggleComments(this);">Knapp 2</button>
		<a href="#">Text</a>
	</li>
</ul>

Problemet här är att browsers gillar att smyga in textnoder lite här och där. Dessa textnoder är uppenbarligen inte inte är A-noder.
Opera, som jag använder, lägger in en textnod om det finns text mellan element.
Med andra ord, om det finns whitespace mellan </a> och </li> blir lastChild en textnod innehållandes detta whitespace. Tar jag bort whitespacet och skriver </a></li> utan mellanrum, så år lastChild A-noden.
Firefox beter sig på samma sätt, men har till skillnad från Opera inte stöd för IE's specialvariant parentElement, utan kräver att det ska heta parentNode, som det gör "på riktigt".
IE har en annan strategi. Den strunter blankt i huruvida det finns whitespace mellan slut-taggarna, men av någon anledning lägger den en textnod där om det inte finns ett mellanslag sist i det inre elementet, som någon slags kompensation? Vad vet jag?
Jag såg en gång idén om något som kallas "DOM explorers" som söker igenom DOM-trädet och på så vis går runt buggar som denna.
Tills vidare rekommenderar jag en alternativ metod, som t ex getElementsByTagName.

	function toggleComments(objSource){

		alert(objSource.parentNode.getElementsByTagName("A")[0].innerHTML);
	}

Jag använder lastChild för att ta reda på vilken tagg det är som ligget sist i varje <li>. Ibland är det en A-tagg och ibland är det en DIV-tagg och detta avgör vad som skall hända i scriptet.

Nu tror jag att jag precis kom på ett annat sätt att ta reda på detta:

var l = objSource.parentElement.children.length;
alert(objSource.parentElement.children[l-1].tagName)

Så här då?

	function toggleComments(objSource){
		var elem = objSource.parentElement.lastChild;

		if (elem.nodeType == 3)
			elem = elem.previousSibling;

		alert(elem.tagName)
	}