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;

它 returns .ResCheckIn 中的所有内容，包括内部 div 和 class "ResDtlLabel"，所以这个：

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

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

Answer 1

// 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），文本节点将被跳过，您将剩下纯文本。

Answer 2

一个选项是遍历 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 是 textNode 内容的数组。

Answer 3

你可以这样使用：

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

Answer 4

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

Answer 5

你必须使用 "content of node"。为了更好地理解这一点，请查看此 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>

Answer 6

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

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

Javascript .innerHTML 但不包括内部 div

Javascript .innerHTML but excluding inner div

html

javascript

dom

innerhtml