通过innerHTML定位动态元素

时间:2016-12-26 19:07:43

标签: javascript html dom innerhtml

我需要在加载用户信息的网页上测试特定的innerHTML字符串。我的问题是,此元素的位置[14]根据是否存在其他帐户详细信息而有所不同。 (即有时这个innerHTML是[15]或[16])innerHTML除了类名“style16”之外没有其他标识符。

此外,每个帐户之间的innerHTML会发生变化,因此我需要测试其值。

我是否需要创建某种var来引用此元素位置?如果是这样,我该怎么做。

这是HTML:

<tr>
  <td class="style16">Zip:</td>
  <td>12345</td>
</tr>
<tr>
  <td class="style16">CountryCode:</td>
  <td>TH</td>
</tr>

我是DOM和Javascript的新手,如果这令人困惑,请道歉。

提前致谢

2 个答案:

答案 0 :(得分:0)

function find(elem){
  if(elem.innerHTML=="TD"){
     return elem;//found elem lets return
  }
  for(child of elem.childNodes){
    if(var a=find(child)){
      return a;//a child of child of child... is the searched one, so return it
    }
  }
 return false;//nothing found
}

像这样使用:

window.onload=function(){
elem=find(document.body);
if(elem){
// now you can use elem until it is destroyed...
elem.innerHTML="found this";
}else{
alert("Sorry doesnt exist");
}
}

注意:DOM越大,需要的时间就越长。因此,为了提高性能,可以从包含shure的父元素开始,例如find(document.getElementById(“parent”))

如果你知道父元素的类,你可以这样做:

var elems=[...document.getElementsByClassName("style16")];
var elem=false;
var found=elems.some(function(el){
     if(el.parentNode.childNodes[1].innerHTML=="TD"){
         elem=el.parentNode.childNodes[1];
         return true;//kill execution
     }
});
if(found){
   console.log(elem);
}else{
   alert("not found");
}

答案 1 :(得分:0)

您可以在jQuery

中循环遍历同一类的所有元素
$('.style16').each(function(i, obj) {
    var innerHTML = $(this).next().text();//next returns the next 'td' sibling
});

这样您就可以跟踪所需的所有innerHTML元素。