我正在尝试通过 C# 为网页上的随机元素生成 CSS 选择器。一些背景:

我使用带有 WebBrowser 控件的表单。在导航时，可以询问光标下元素的 CSS 选择器。获取 html 元素是微不足道的，当然，通过以下方式:

WebBrowser.Document.GetElementFromPoint(<Point>);

目标是创建一个“严格”的 css 选择器，指向光标下的元素，a-la:

html > body > span:eq(2) > li:eq(5) > div > div:eq(3) > span > a

此选择器基于 :eq 运算符，因为它旨在由 jQuery 和/或 SizzleJS 处理(这两个支持 :eq - 原始 CSS 选择器不支持。竖起大拇指@BoltClock 帮助我澄清这一点)。所以，你明白了。为了实现这一目标，我们将检索到的 HtmlElement 提供给以下方法，并通过询问我们遇到的每个元素的父元素开始向上提升 DOM 树:

    private static List<String> GetStrictCssForHtmlElement(HtmlElement element)
    {
        List<String> familyTree;
        for (familyTree = new List<String>(); element != null; element = element.Parent)
        {
            string ordinalString = CalculateOrdinalPositionAmongSameTagSimblings(element);
            if (ordinalString == null) return null;

            familyTree.Add(element.TagName.ToLower() + ordinalString);
        }
        familyTree.Reverse();

        return familyTree;
    }

    private static string CalculateOrdinalPositionAmongSameTagSimblings(HtmlElement element, bool simplifyEq0 = true)
    {
        int count = 0;
        int positionAmongSameTagSimblings = -1;
        if (element.Parent != null)
        {
            foreach (HtmlElement child in element.Parent.Children)
            {
                if (element.TagName.ToLower() == child.TagName.ToLower())
                {
                    count++;
                    if (element == child)
                    {
                        positionAmongSameTagSimblings = count - 1;
                    }
                }
            }

            if (positionAmongSameTagSimblings == -1) return null; // Couldn't find child in parent's offsprings!?   
        }

        return ((count > 1) ? (":eq(" + positionAmongSameTagSimblings + ")") : ((simplifyEq0) ? ("") : (":eq(0)")));
    }

此方法已对各种页面可靠地起作用。然而，有一个特别的页面让我印象深刻:

http://www.delicious.com/recent

由于一个非常简单的原因，尝试检索列表中任何元素(位于页面中心)的 CSS 选择器失败:

在提升到达第一个 SPAN 元素之后(您可以通过使用 IE9 的网络开发工具检查页面进行验证来发现它)，它会尝试通过计算它在相同标签兄弟中的顺序位置来处理它。为此，我们需要询问它是 sibling 的父节点。这就是事情变得奇怪的地方。 SPAN 元素报告它的 Parent 是一个带有 id="recent-index"的 DIV 元素。然而，它不是SPAN 的直接父级(直接父级是 LI class="wrap isAdv")。这会导致该方法失败，因为 - 不出所料 - 它无法在 child 中发现 SPAN。

但它变得更加奇怪。我检索并隔离了 SPAN 本身的 HtmlElement。然后我得到它的 Parent 并使用它重新下降回到 SPAN 元素，使用:

HtmlElement regetSpanElement = spanElement.Parent.Children[0].Children[1].Children[1].Children[0].Children[2].Children[0];

这将我们带回到我们开始的 SPAN 节点......但是有一个转折:

regetSpanElement.Parent.TagName;

这现在将 LI 报告为父 X-X。怎么会这样？有什么见解吗？

再次感谢您。

注意事项:

1. 我保存了 Html 代码(因为它在 WebBrowser.Document.Html 中显示)并亲自检查以 100% 确定没有发生任何有趣的事情(也就是提供给 WebBrowser 控件的代码与我看到的代码不同)在 IE9 中——但这并没有发生，结构与相关路径 100% 匹配)。

2. 我正在使用此处概述的说明在 IE9 模式下运行 WebBrowser 控件:

   http://www.west-wind.com/weblog/posts/2011/May/21/Web-Browser-Control-Specifying-the-IE-Version

   试图让 WebBrowser 控件和 IE9 尽可能相似地运行。

3. 我怀疑观察到的效果可能是由于某些脚本在我背后运行所致。但是，我在网络编程方面的知识还不足以确定它。

编辑:错别字

最佳答案

依赖 :eq() 很难!很难从动态的 DOM 中可靠地重新选择。当然，它可能适用于非常静态的页面，但事情每天都在变得更加动态。您可能会考虑稍微改变策略。尝试使用更智能更灵活的选择器。也许像这样弹出一些 javascript:

predictCss = function(s, noid, noclass, noarrow) {
    var path, node = s;
    var psep = noarrow ? ' ' : ' > ';
    if (s.length != 1) return path; //throw 'Requires one element.';
    while (node.length) {
        var realNode = node[0];
        var name = (realNode.localName || realNode.tagName || realNode.nodeName);
        if (!name || name == '#document') break;
        name = name.toLowerCase();
        if(node.parent().children(name).length > 1){
            if (realNode.id && !noid) {
                try {
                    var idtest = $(name + '#' + realNode.id);
                    if (idtest.length == 1) return name + '#' + realNode.id + (path ? '>' + path : '');
                } catch (ex) {} // just ignore the exception, it was a bad ID
            } else if (realNode.className && !noclass) {
                name += '.' + realNode.className.split(/\s+/).join('.');
            }
        }
        var parent = node.parent();
        if (name[name.length - 1] == '.') { 
            name = name.substring(0, name.length - 1);
        }
        siblings = parent.children(name); 
        //// If you really want to use eq:
        //if (siblings.length > 1) name += ':eq(' + siblings.index(node) + ')';
        path = name + (path ? psep + path : '');
        node = parent;
    }
    return path
}

并用它来生成各种选择器:

var elem = $('#someelement');
var epath = self.model.util.predictCss(elem, true, true, false);
var epathclass = self.model.util.predictCss(elem, true, false, false);
var epathclassid = self.model.util.predictCss(elem, false, false, false);

然后分别使用:

var relem= $(epathclassid);
if(relem.length === 0){
    relem = $(epathclass);
    if(relem.length === 0){
        relem = $(epath);
    }
}

如果您最好的选择器仍然包含多个元素，那么您必须在如何匹配 dom 元素方面发挥创意——也许是 levenshtein 或者可能有一些特定的文本，或者您可以回退到 eq.希望对您有所帮助!

顺便说一句，我假设你有 jQuery - 由于 sizzle 引用。例如，您可以在附加到 body 的最后一个子项的脚本标记中的自执行匿名函数中注入(inject)上述内容。

关于c# - HtmlElement.Parent 返回错误的父级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6832451/