给定元素的值，如何为DOM元素获得唯一的CSS选择器？

Question

Let's say I have the following document: 假设我有以下文档：

<html>
  <body>
    <h1>Hello world</h1>
  </body>
</html>

Given the string "Hello world", how can I search the document and generate a CSS Selector for the correct element(in this case, the h1)? 给定字符串“ Hello world”，我如何搜索文档并为正确的元素（在本例中为h1）生成CSS选择器？

Answer 1

Okay, that was sloppy -- if you use $(":contains"), you get the entire tree down to the innermost element. 好的，这很草率-如果使用$（“：contains”），则将整个树放到最里面的元素上。 Using this, you find the innermost node. 使用它，您可以找到最里面的节点。

 var myContainer = $(":contains('Hello world') "); while(myContainer.children().length != 0) { myContainer =myContainer.children(); } myContainer.addClass("foo");

 .foo { border: 1px dotted blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <body> <h1>Hello world</h1> </body> </html>

Or, to do the same thing with a single selector: 或者，使用单个选择器执行相同的操作：

 $(":contains('Hello world'):not(:has(*))").addClass("foo");

 .foo { border: 1px dotted blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content-pane"> <div class="header-pane"> <h1>Hello world</h1> </div> <div class="inner-content"> <h2> Hello world is me! </h2> </div> </div>

Answer 2

If you are looking for a pure javascript answer without using a library you could use DOM manipulation/traversal. 如果您在不使用库的情况下寻找纯JavaScript答案，则可以使用DOM操作/遍历。

I have adapted this code snippet that is designed to traverse a node tree and return the text contents as a string. 我已经修改了该代码段，该代码段旨在遍历节点树并以字符串形式返回文本内容。 https://gist.github.com/padolsey/3033511 https://gist.github.com/padolsey/3033511

function getText(node) {

if (node.nodeType === 3) {
    return node.data;
}

var txt = '';

if (node = node.firstChild) do {
    txt += getText(node);
} while (node = node.nextSibling);

return txt;

} }

 function checkNode(node) { if (node.nodeType === Node.TEXT_NODE) { var expr= "Hello World"; if (node.textContent.indexOf(expr) >= 0) { node.parentNode.className = "foo"; } } if (node = node.firstChild) { //set to next child and continue if it exists do { checkNode(node); } while (node = node.nextSibling); //while has sibilings } } checkNode(document.body)

 .foo { color: red; }

 <div> <h1>Hello World</h1> <p>Hello World</p> <h1>Hlelo Wrldo</h1> </div>

I came up with this solutions after some research leading me to this blog post from James Padolsey: Replacing text in the DOM… solved? 经过一些研究，我想到了James Padolsey的博客文章，提出了这种解决方案：替换DOM中的文本...解决了吗？ He talks about the difficulties of traversing elements to accurately get the text they contain because the text shown to the user may be spread over a couple child elements like this: 他谈到了遍历元素以准确获取其包含的文本的困难，因为向用户显示的文本可能分布在几个子元素上，如下所示：

<p>
  This is a <span class="f">te<em>st</em></span>.
</p>

The main topic of that blog post is replacing the text and he has created a very good example of how to do so while respecting strange nesting as shown above. 该博客文章的主题是替换文本，他创建了一个很好的示例，说明了如何在尊重奇怪的嵌套的同时做到这一点，如上所示。 If you are interested in a much more robust solution without including a library I suggest giving his post a read. 如果您对不包含库的更健壮的解决方案感兴趣，建议您阅读他的文章。 It is somewhat old but his example at the end works and is also based off the same gist I provided. 它有些陈旧，但最终他的榜样还是有效的，并且基于我提供的相同要旨。

给定元素的值，如何为DOM元素获得唯一的CSS选择器？

问题描述

2 个解决方案

解决方案1
2 2017-01-25 16:39:21

解决方案2
0 2017-01-25 18:12:11

给定元素的值，如何为DOM元素获得唯一的CSS选择器？

问题描述

2 个解决方案

解决方案1 2 2017-01-25 16:39:21

解决方案2 0 2017-01-25 18:12:11

解决方案1
2 2017-01-25 16:39:21

解决方案2
0 2017-01-25 18:12:11