不應該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>