javascript - document.getElementsByClassName()类标识符更改

我有一个脚本，可在Google的一种工具的用户界面中插入iFrame。最近进行了更新，此特定工具具有新外观。

我注意到，每次创建新列表时，类名都会更改，就像这样，

第一个清单，

类名称1：header _ngcontent-CREATIVES-69

类名称2：_ngcontent-CREATIVES-71

第二个清单

类名称1：header _ngcontent-CREATIVES-68

类名称2：_ngcontent-CREATIVES-70

我如何使我的脚本起作用，以便仅以此方式识别它？

类名称1：header _ngcontent-CREATIVES-XX

类名称2：_ngcontent-CREATIVES-XX

我正在研究的脚本

var xhttp=new XMLHttpRequest,
RespJSON=null;

function setvalues(t){
  ifrm=document.createElement("iframe"),
  ifrm.setAttribute("style","margin-top: -240px;width: 100%;height: 450px;"),
  ifrm.setAttribute("scrolling","no"),
  ifrm.src="#"+escape(t),
  document.getElementsByClassName("header _ngcontent-CREATIVES-69")[0].append(ifrm)
}
xhttp.onreadystatechange=function(){
  4==this.readyState&&200==this.status&&setvalues(RespJSON=xhttp.responseText)
},

xhttp.open("GET",document.getElementsByClassName("_ngcontent-CREATIVES-71")[0].src,!0),
xhttp.send();

有什么好的方法可以解决这个问题？

最佳答案

您可以使用querySelector或querySelectorAll通过属性选择器选择DOM元素

document.querySelector("[class^=\"header _ngcontent-CREATIVES-\"]").append(ifrm)

这将选择第一个以header _ngcontent-CREATIVES-开头的类的DOM元素

要么

document.querySelectorAll("[class^=\"header _ngcontent-CREATIVES-\"]")[0].append(ifrm)

示例：https://jsfiddle.net/ydz69kwp/

关于javascript - document.getElementsByClassName()类标识符更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58926196/