My goal is to replace the content of a html span class using javascript. Easy task, since you can just use element.getElementsByTagName("span"), right?
But I have an app that was written in angular and the actual span classes are not displayed inside the source code that my browser is showing me (view-source:https://samplesite.com/item). This is what the view-source feature displays me what is inside the body tag:
<body>
<ds-app></ds-app>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vendor.js" type="module"></script><script src="main.js" type="module"></script></body>
And this is what the development console (F12) displays me what is actually inside the body tag:
[...]
<ds-generic-item-page-field _ngcontent-dspace-angular-c521="" ng-reflect-item="[object Object]" ng-reflect-fields="dc.rights.cc" ng-reflect-label="item.page.rights-cc"><div class="item-page-field"><ds-metadata-values _nghost-dspace-angular-c228="" ng-reflect-md-values="[object Object]" ng-reflect-separator="<br/>" ng-reflect-label="item.page.rights-cc"><ds-metadata-field-wrapper _ngcontent-dspace-angular-c228="" _nghost-dspace-angular-c227="" ng-reflect-label="Creative Commons Lizenz"><div _ngcontent-dspace-angular-c227="" class="simple-view-element"><h5 _ngcontent-dspace-angular-c227="" class="simple-view-element-header ng-star-inserted">Creative Commons Lizenz</h5><!--bindings={
"ng-reflect-ng-if": "Creative Commons Lizenz"
}--><div _ngcontent-dspace-angular-c227="" class="simple-view-element-body"><span _ngcontent-dspace-angular-c228="" class="dont-break-out ng-star-inserted"> CC-BY-NC<!--bindings={
"ng-reflect-ng-if": "false"
}--></span><!--bindings={
"ng-reflect-ng-for-of": "[object Object]"
}--></div></div></ds-metadata-field-wrapper></ds-metadata-values></div></ds-generic-item-page-field>
[...]
I guess that this is why my getElementsByTagName cannot find the span classes - they seem to not be accessible because they seem to be rendered differently. My question is: How is it possible to get the contents of all span classes using javascript in this scenario? Am I missing something important here? Why is the code shown in view-source so different compaired to the development console?
My Goal is to replace "CC-BY-NC" in my example with a Link to a Website. Pretty simple but its driving me crazy. Any help that points me in the right direction would be much appreceated. :)
P.S.: I have no experience with angular, so sorry if I am asking an completely obvious question.
So far nothing seems to bring me closer to my goal since I cannot adress these span classes using javascript. I have put my JS-code inside an Typescript file and it seems to be executed but as stated above, cannot find any span classes.