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

Answer 2

您可以这样使用：

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

Answer 3

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

Answer 5

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

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

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

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

Answer 7

这是我的操作方式：

var element = document.querySelector(".ResCheckIn");
var dateString = element.childNodes[2];

console.log(dateString); // Thursday, October 18, 2018

您可能希望删除返回的字符串中的空格，但除此之外，这是获取该日期值的一种方法。使用.childNodes属性是非常不可取的，因为它可能会不一致。您应该考虑将标记重构为以下内容：

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

Javascript .innerHTML，但不包括内部div

7 个答案: