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

Question

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

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

克隆 template 后，我希望更改第 1 部分和第 2 部分的 id 属性以及 section1 的 src 和 srcset图片 sec1-is & sec1-if 并更改

let itm = document.getElementById("template");
let cln = itm.cloneNode(true);

如何在不遍历 template 的所有子元素和孙元素的情况下搜索正确的标签，如何获得特定的“嵌套”元素？

Answer 1

您可以尝试使用 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, 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>

Answer 2

希望对您有所帮助：

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

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

因为你的img已经有id所以你可以直接用#sec1-is查询。

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

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

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

How to change element's specific children attributes and content after cloning

javascript

angular

dom

nodechildren