不应该getElementById返回一个包含子对象的对象吗？

Question

使用以下代码我期待得到含有子元素

var MemberDiv=document.getElementById("idProfileMainContainer"); 
console.log(MemberDiv.length); 

使用上述代码我得到“未定义”的对象。我很困惑。我认为它应该有一个包含所有子元素的对象数组。

最终，我试图找到具有“Board Position”的<span />的sub <div />。

<div id="idContainer8592665" class="fieldContainer simpleTextContainer"> 
    <div class="fieldSubContainer labeledTextContainer"> 

     <div class="fieldLabel"> 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_titleLabel" title="Cannot be edited, Administrator access only">Board Position</span> 
     </div> 

     <div class="fieldBody"> 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_DropDownLabel8592665">Webmaster</span><input name="FunctionalBlock1$ctl00$ctl00$MemberForm$memberFormRepeater$ctl22$ctl03" type="hidden"> 
     </div> 

    </div> 
</div> 

Answer 1

的getElementById返回值是不是一个数组，但一个节点（或无），你可以找到on MDN：

由它的ID返回到元素的引用

要获取要定位的元素，可以使用此ES6脚本：

// Select all div.fieldLabel descendants of #idContainer8592665 and find one that has 
 
// the text content we look for. 
 
var div = Array.from(document.querySelectorAll('#idContainer8592665 div.fieldLabel')) 
 
       .find(div => div.textContent.includes('Board Position')); 
 

 
// Show the text of the div element we found 
 
console.log(div.textContent.trim());

<div id="idContainer8592665" class="fieldContainer simpleTextContainer"> 
 
    <div class="fieldSubContainer labeledTextContainer"> 
 

 
     <div class="fieldLabel"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_titleLabel" title="Cannot be edited, Administrator access only">Board Position</span> 
 
     </div> 
 

 
     <div class="fieldBody"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_DropDownLabel8592665">Webmaster</span><input name="FunctionalBlock1$ctl00$ctl00$MemberForm$memberFormRepeater$ctl22$ctl03" type="hidden"> 
 
     </div> 
 

 
    </div> 
 
</div>

在ES5兼容的脚本就应该是这样的：

// Select all div.fieldLabel descendants of #idContainer8592665 and find one that has 
 
// the text content we look for. 
 
var parent = document.getElementById('idContainer8592665'); 
 
var div = [].filter.call(parent.getElementsByClassName('fieldLabel'), 
 
      function (div) { 
 
       return div.textContent.indexOf('Board Position') != -1; 
 
      }).pop(); 
 

 
// Show the text of the div element we found 
 
console.log(div.textContent.trim());

<div id="idContainer8592665" class="fieldContainer simpleTextContainer"> 
 
    <div class="fieldSubContainer labeledTextContainer"> 
 

 
     <div class="fieldLabel"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_titleLabel" title="Cannot be edited, Administrator access only">Board Position</span> 
 
     </div> 
 

 
     <div class="fieldBody"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_DropDownLabel8592665">Webmaster</span><input name="FunctionalBlock1$ctl00$ctl00$MemberForm$memberFormRepeater$ctl22$ctl03" type="hidden"> 
 
     </div> 
 

 
    </div> 
 
</div>

Answer 2

我所做的就是让span元素的集合。然后我通过这个集合，检查textContent是否是'Board Position'。如果是这样，我回到DOM树，直到我到达一个div节点。然后，我打印它的类（它在html中的唯一属性）以及outerHTML。

如果有可能不止一个匹配的元素，result应该被初始化为[]，你应该检查.length > 0而不是== undefined，你应该推元素放入结果result.push(elem)，而不是将其设置到ELEM与result = elem，最后，你应该遍历结果，而不是显示唯一的一个结果。

function byId(id){return document.getElementById(id)} 
 
function allByTag(tag,parent){return (parent == undefined ? document : parent).getElementsByTagName(tag)} 
 
// useful for HtmlCollection, NodeList, String types - (array-like objects) 
 
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need 
 

 

 
window.addEventListener('load', onDocLoaded); 
 

 
function onDocLoaded(evt) 
 
{ 
 
    var spans = allByTag('span'); 
 
    var result=undefined; 
 
    
 
    forEach(spans, findParentIfMatching); 
 
    if (result != undefined) 
 
    { 
 
     console.log(result.className); 
 
     console.log('*******************************'); 
 
     console.log(result.outerHTML); 
 
    } 
 
    function findParentIfMatching(elem,index,collection) 
 
    { 
 
    if (elem.textContent == 'Board Position') 
 
     { 
 
     while (elem.nodeName != 'DIV') 
 
      elem = elem.parentNode; 
 
     result = elem; 
 
     } 
 
    } 
 
}

<div id="idContainer8592665" class="fieldContainer simpleTextContainer"> 
 
    <div class="fieldSubContainer labeledTextContainer"> 
 

 
     <div class="fieldLabel"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_titleLabel" title="Cannot be edited, Administrator access only">Board Position</span> 
 
     </div> 
 

 
     <div class="fieldBody"> 
 
      <span id="FunctionalBlock1_ctl00_ctl00_MemberForm_memberFormRepeater_ctl22_DropDownLabel8592665">Webmaster</span><input name="FunctionalBlock1$ctl00$ctl00$MemberForm$memberFormRepeater$ctl22$ctl03" type="hidden"> 
 
     </div> 
 

 
    </div> 
 
</div>