Javascript .innerHTML但不包括内部div

Question

考虑到我有这个div:

<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
   </div>
   Thursday, October 18, 2018
</div>

我只是想得到字符串"Thursday, October 18, 2018",所以排除内部div.如果我尝试.innerHMTML:

document.querySelectorAll('.ResCheckIn').innerHTML;

它返回所有内容.ResCheckIn,包括内部div类"ResDtlLabel",所以这:

<div class="ResDtlLabel tSmall tLight">
    Check-in</div>
Thursday, October 11, 2018

理想情况下,我希望不使用jQuery就能做到这一点.

Answer 1

一种选择是迭代childNodes并过滤textNodes.以下函数获取所有textNode子节点并将其值存储在数组中.

const nodes = document.querySelector('.ResCheckIn').childNodes;
const texts = [].reduce.call(nodes, function(ret, el) {
  if ( el.nodeType === 3 ) {
    ret.push(el.nodeValue.trim());
  }
  return ret;
}, []);

texts是一个textNodes内容的数组.