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

如何解决克隆后如何更改元素的特定子属性和内容

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

我有以下 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,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>

克隆 template 后，我希望更改第 1 节和第 2 节的 id 属性以及 src 图像的 srcset 和 section1 { {1}} 和 sec1-is 并更改

sec1-if

如何在不遍历 let itm = document.getElementById("template"); let cln = itm.cloneNode(true); 的所有子代和孙代并搜索正确标签的情况下获取特定的“嵌套”元素？

解决方法

您可以尝试使用 querySelector() 和 querySelectorAll() 从克隆元素中获取特定信息。

演示：

let itm = document.getElementById("template");
let cln = itm.cloneNode(true);
//get element with .section1
let section1 = cln.querySelector('.section1');
//set id
section1.id = 'sec123'
console.log(section1);
//get element with img in .section1
let img = section1.querySelectorAll('.content img');
//set src of first image
img[0].src = '../test';
//set srcset of first image
img[0].srcset = '../test/test';
console.log(img[0]);
//set src of second image
img[1].src = '../test2';
//set srcset of second image
img[1].srcset = '../test2/test';
console.log(img[1]);

<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,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>

希望对您有所帮助：

    var origin,clone,item;
    origin = document.getElementById("template");
    clone = origin.cloneNode(true);
    item = clone.querySelector("#sec1");
    item.setAttribute("id","sec2");

总体：在您的 querySelector 上使用 clone，然后使用 setAttribute 进行更新。

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

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

您可以在此处了解更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector