Javascript 如何仅设置没有文本节点作为同级的类型元素的样式？

我有这个标记：

<div class="wysiwyg">
  <em>It has to be red because is the only em element</em>
</div>


<div class="wysiwyg">
  Some text
  <em>Not to be red because has previous (and following) text node</em>
  Some text
</div>


<div class="wysiwyg">
  <em>It has to be red because its' a em in a div that has only ems and no text node / </em>
  <em>It has to be red because its' a em in a div that has only ems and no text node</em>

我想应用一个元素。style.color=红色；仅适用于作为其父级的唯一s子级的元素，或具有其他s作为同级但不具有文本节点作为同级的元素

另外，我想知道如何仅使用node.style.color=blue；我知道。样式方法仅适用于元素

---

谢谢

假设您想要一个本机JavaScript解决方案，并且至少可以针对EcmaScript 5，下面是一个解决方案

我使用childNodes来获取所有的子节点，包括文本节点。另外，我正在检查nodeType是否等于3个文本节点，并且我必须检查文本节点是否不是空白

请注意，该代码仅用于示例目的和演示您拥有的工具。未以任何方式进行测试或优化

function hasTextNodes(node) {
  if (!node || !node.childNodes.length) return false;

  for (var i=0;i<node.childNodes.length;++i) {
    var child = node.childNodes[i];
    // check if the node is text node and check if it's not a white space
    if (child.nodeType == 3 && child.textContent && child.textContent.trim().length)
      return true;
  }
  return false;    
}

document.querySelectorAll(".wysiwyg").forEach(function(node) { 
  if (!hasTextNodes(node))
    node.style.backgroundColor = "blue"; 
});

为了完整起见，我应该告诉你，除非你需要这个确切的场景，例如，它是一些教育练习，否则有几种更好的方法来实现同样的目标

首先，无论何时，只要你发现自己赋予文本节点某种意义，你就不应该再让它成为文本节点。如果将来需要区分它们，应该将它们包装成一个范围并添加一个特定的类。这样处理它们就更容易了，你可以选择它们，设计它们的风格，等等。 其次，使用像jQuery这样的框架，这类任务更容易解决，而且jQuery本身不会增加太多开销，特别是如果您使用CDN引用它。

---

鉴于代码与答案基本相同，请您在答案中包含该代码好吗？当然，也要链接到JS Fiddle演示，但是答案应该是独立的，可以理解的，而不必看外部网站。答案很好，@Zoltán！那么“某些文本”节点呢？在Javascript中，您可以直接选择文本节点或仅选择html元素并设置其样式吗？您的答案是否仅对ems或与文本节点不同的任何元素有效？我只想强调ems，而不是if存在。。。谢谢。据我所知，不可能用javascript或css设计文本节点的样式。答案并不取决于确切的元素，因此它应该适用于您拥有的任何元素。如果您只想突出显示ems，您必须稍微修改代码，我将为这种情况添加一些代码。请@ZoltánTamási，最后一件事：编辑node.querySelectorAll>em.forEachfunctionem{到正确的节点。querySelectorAll>em.forEachfunctionem{{.谢谢！你能指出错误在哪里吗？我已经读了你的评论10次了，但是我看到两个代码是相同的。如果一个有另一个元素，比如一个同级元素，或者多个，以及其他元素，作为同级元素，该怎么办？

document.querySelectorAll(".wysiwyg").forEach(function(node) { 
  if (!hasTextNodes(node)) {
    // query the em direct children
    node.querySelectorAll("> em").forEach(function(em) {
      em.style.backgroundColor = "blue"; 
    });
  }
});