javascript - 如何仅将没有文本节点的类型的元素设置为 sibling ？

Question

我有这个标记:

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

我想申请 element.style.color = "red";只到 <ems>唯一的元素 <em>其 parent 的 child 或有其他 child 的 child <em> s 作为同级但不是文本节点作为同级。

此外，我想知道如何仅使用类似 node.style.color = blue; 的样式来设置文本节点的样式。 (我知道 .style 方法仅适用于元素...)。

谢谢!

Answer 1

假设您想要一个原生的 JavaScript 解决方案，并且您至少可以针对 EcmaScript 5，这里有一个解决方案 https://jsfiddle.net/pjhuptt3/ .

我正在使用 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"; 
});

如果您想为 em 元素设置样式，您可以这样做。

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

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

• 首先，只要您发现自己赋予文本节点一些“意义”，就不应再将其设为文本节点。如果将来需要区分它们，您应该将它们包装到一个 span 中并添加一个特定的类。这样就可以更轻松地处理它们，您可以选择它们、设置它们的样式等。
• 其次，使用像 jQuery 这样的框架，解决这类任务要容易得多，而且 jQuery 本身不会增加太多开销，尤其是当您引用它使用 CDN。