Search code examples
javascriptchaining

chaining using getElementsByClassName

<script>
var elms = document.getElementById("contentWrapper").getElementsByClassName("pbSubheader brandTertiaryBrd tertiaryPalette");
console.log(elms);
for (var i=0; i<elms.length; i++) {
console.log(elms[i]);
}
</script>

When I try using getElementsByClassName I see no logs related to the second console.log message. The first console.log gives me

[item: function, namedItem: function] 0: div#head_01Bd000000WqJ9k_ep.pbSubheader.brandTertiaryBrd.tertiaryPalette head_01Bd000000WqJ9k_ep: div#head_01Bd000000WqJ9k_ep.pbSubheader.brandTertiaryBrd.tertiaryPalette length: 1 proto: HTMLCollection

how to I further drill down into the head_01Bd000000WqJ9k_ep and get the firstchild of the class pbSubheader brandTertiaryBrd tertiaryPalette

Someone please correct me if I am not chaining this correct. Thanks in advance

Solution

  • You can use document.querySelectorAll("#contentWrapper .pbSubheader, #contentWrapper .brandTertiaryBrd, #contentWrapper .tertiaryPalette") but be aware that this function isn't supported in IE7 and lower.