Javascript .innerHTML 但不包括内部 div答案

【问题标题】：Javascript .innerHTML but excluding inner divJavascript .innerHTML 但不包括内部 div
【发布时间】：2019-02-23 13:13:38
【问题描述】：

考虑到我有这个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 中的所有内容，包括带有类 "ResDtlLabel" 的内部 div，因此：

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

理想情况下，我很乐意在不使用 jQuery 的情况下做到这一点。

【问题讨论】：

你只想要文本节点？

标签： javascript html dom innerhtml

【解决方案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 内容的数组。

【讨论】：

您可能希望使用 Node.TEXT_NODE 而不是 3 以获得更好的可读性。
或直接el.nodeName === "#text"

【解决方案2】：

不是一个非常创新的答案，但如果您正在寻找简单的解决方案，试试这个

var content = document.querySelector(".ResCheckIn").innerHTML;
    content = content.split('</div>');
    if(content[1]){
        content = content[1].trim();
    }

【讨论】：

【解决方案3】：

你可以这样使用：

document.querySelectorAll('.ResCheckIn')[0].textContent

【讨论】：

这将返回所有文本

【解决方案4】：

你必须使用“节点的内容”。为了更好地理解这一点，请查看link。

有多种方法可以实现您的结果。下面是一种方式，

$(document).ready(function() {
  var parentnode = document.querySelectorAll('.ResCheckIn')[0];
  console.log($(parentnode).contents().filter(function() {
    return this.nodeType == 3;
  }).text().trim());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
  </div>
  Thursday, October 18, 2018
</div>

【讨论】：

【解决方案5】：

使用 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    var html=$('.ResCheckIn').html();
    var parsedText=$.parseHTML(html);
     $.each(parsedText, (i, el) => {
          if (el.nodeType === 3) {
          if(el.nodeValue.trim()!=""){              
             console.log(el.nodeValue);
             alert(el.nodeValue);
           }
          }
     });
  });
</script>
<div class="ResCheckIn">
  <div class="ResDtlLabel">
    Check-in
   </div>
   Thursday, October 18, 2018
</div>

【讨论】：

【解决方案6】：

// Example container.
let container = document.getElementsByClassName('ResCheckIn')[0];

// Loop over child elements and remove them. Note that this is ES6 syntax and may not yet be supported in all browsers.
Array.from(container.children).forEach(em => { 
    em.parentElement.removeChild(em);
});

console.log(container.textContent);

只是一个简单的例子。如果您仅从HTMLElement（如本例中的container）中删除所有子elements（而不是nodes），则会跳过文本节点，只留下文本。

【讨论】：