JS Syntax für Anfänger: CSS-Werte bedingt in Javascript auslesen

[Danny]

<quote>
function headertransition() {
var el = updateTransition();

el.addEventListener("transitionend",  updateTransition, true);  

}

function updateTransition() {
var el = document.querySelector("div#homeheader");

if (el) {  
	el.id = "header";  
} else {  
	el = document.querySelector("div#header");  
	el.id = "homeheader";  
}  
  
return el;  

}
</quote>

Obiges Skript ist dasjenige, mit dem ich experimentiert habe unter Verwendung zweier schlichter HTML-Seiten.
Jetzt soll es so funktionieren, dass es die Kombination aus Klasse .home und ID #header berücksichtigt:

function headertransition() {
var el = updateTransition();

el.addEventListener("transitionend",  updateTransition, true);  

}

function updateTransition() {
var el = document.querySelector("body.home div#header");

/* müsste jetzt so stimmen */

if (el) {  
	el.id = "header";  

/* Gemeint ist #header ohne übergeordnete .home-Klasse */

} else {  
	el = document.querySelector("div#header");  
	el.id = "homeheader";  

/* das obige "el.id = 'homeheader'" müsste ich jetzt umschreiben auf 'el.className = "body" UND el.id = "header"' – zumindest verstehe ich das so. Und genau hierfür ist mir die notwendige Schreibweise nicht klar.  */
}

return el;  

}

Habe ich mich klarer ausgedrückt?
Falls nicht, habe ich vermutlich ein grundsätzliches Verständnisproblem zur Funktion...

Danke vorab!