JavaScript .innerHTML但不包括内部div

Question

假设我有这个 div 元素：

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

我希望获得字符串 "Thursday, October 18, 2018"，因此要排除内部的div。 如果我使用 .innerHTML，如下所示：

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

它返回.ResCheckIn中的所有内容，包括带有类"ResDtlLabel"的内部div，因此如下所示：

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

理想情况下，我希望在不使用jQuery的情况下实现这个。

- Alessandro Crotti

---

你只需要文本节点吗？ - Mark Baijens

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是一个包含textNode内容的数组。

- Ram

---

你可能想要使用Node.TEXT_NODE代替数字3，以获得更好的可读性。 - Mark Baijens

或者直接 el.nodeName === "#text" - Adriano Repetti

Answer 2

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

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

- Pawnesh Kumar

Answer 3

你可以像这样使用：

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

- Rajeev

---

这将返回所有文本。 - Hary

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>

- Sumesh TG

Answer 5

您需要使用“节点内容”来更好地理解此内容，请查看链接。

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

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

- Jitendra G2

Answer 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），那么文本节点将被跳过，你只会剩下文本。

- minitauros