Question

使用以下代码我希望得到一个包含子元素的对象

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

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

最终，我正在尝试找到包含“Board Position”的<div />的子<span />。

<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是否是“董事会职位”。如果是这样，我向后走回DOM树，直到我到达div节点。然后我打印它的类（它在你的html中唯一的属性）以及outerHTML。

如果可能有更多匹配元素，result应该初始化为[]，那么您应该检查.length > 0而不是== undefined，您应该推送元素结果result.push(elem)而不是将result = elem设置为元素，最后，您应该遍历结果，而不是显示唯一的结果。

＆＃13;

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;
      }
  }
}

＆＃13;

<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>

＆＃13;

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

2 个答案: