Javascript 如何更改元素'；克隆后的特定子属性和内容

我一直在阅读一些问题，这些问题看起来很相似，但没有找到一个解决我的问题或建议的解决方案解决了我的问题

我有以下html：

<div id="template">
    <div class="section1" id="sec1">                
        <div class="content">
            <img id="sec1-is" *ngIf="!tstEnded" src="assets/images/r1.png" srcset="assets/images/r1@2x.png 2x,assets/images/r1@3x.png 3x" >
            <img id="sec1-if" *ngIf="tstEnded" src="assets/images/r2.png" srcset="assets/images/r2@2x.png 2x,assets/images/r2@3x.png 3x" />
            <div class="audio-controls">
                <button *ngIf="do1()" (click)="act1()" class="control-btn r1-btn" [ngClass]="{'disabled':!r1Enabled()}"></button>
                <button *ngIf="do2()" (click)="act2()" class="control-btn r2-btn" [ngClass]="{'disabled':!r2Enabled()}"></button>
            </div>
            <div class="test-wrapper">
                <span class="test-line">
                    {{eta}}
                </span>
            </div>
            <div class="test-wrapper">
                <div class="test" tst testType="R" (tstGo)="go($event)"></div>
            </div>
        </div>              
    </div>                  
    <div class="section2" id="sec2" style="background-image: linear-gradient(to top, #d0f6f6, rgba(255, 255, 255, 0));">
        <div class="content">
            <div *ngIf="ended">         
                <img *ngIf="!open" class="case1" (click)="case1()" src="assets/images/case1c.svg" />
                <img *ngIf="open" class="case1" src="assets/images/case1.svg" />
            </div>
        </div>
    </div>
</div>

---

如何在不遍历

模板的所有子代和子代、搜索正确标记的情况下获取特定的“嵌套”元素？
您可以尝试使用
querySelector（）
和
queryselectoral（）
从克隆的元素获取特定的元素

演示：


让itm=document.getElementById（“模板”）；
设cln=itm.cloneNode（true）；
//使用.section1获取元素
设section1=cln.querySelector（'.section1'）；
//设置id
第1.id节='sec123'
控制台日志（第1节）；
//获取第1节中带有img的元素
设img=section1.querySelectorAll（'.content img'）；
//设置第一个图像的src
img[0].src='../test'；
//设置第一个图像的集合
img[0].srcset='../test/test'；
console.log（img[0]）；
//设置第二个图像的src
img[1].src='../test2'；
//设置第二个图像集
img[1].srcset='../test2/test'；
console.log（img[1]）

{{eta}}
希望这些帮助：

var来源、克隆、项目；
origin=document.getElementById（“模板”）；
clone=origin.cloneNode（真）；
item=clone.querySelector（#sec1”）；
item.setAttribute（“id”、“sec2”）；

总体而言：
在
克隆上使用
querySelector
，然后使用
setAttribute
进行更新

由于您的
img
已经有
id
，因此您可以直接使用
#sec1 is
进行查询

但一般来说，使用
querySelector
可以获得类似
#sec1 img
的查询字符串。类似于css选择器

您可以在这里了解更多信息：
cln.setAttribute（“id to obj”，“2949019043”）；或者将id更改为obj，以满足您的需要？我将标识元素并将其记录下来（如何？：）调整答案以提供更好的想法，然后您可以根据属性查询选择器，这是一个不同的问题或简单的搜索。：）谢谢这将更改克隆中的属性值。不幸的是，
clone
的ngif和（单击）不起作用。有什么想法吗？cln的ngif和（点击）不起作用。有什么想法吗？
let itm = document.getElementById("template");
let cln = itm.cloneNode(true);