HtmlElement.Parent 返回错误的父级

Question

我正在尝试通过 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 提供给以下方法，并通过询问我们遇到的每个元素的 Parent 来开始向上提升 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 的 web-dev 工具检查页面进行验证来发现它），它会尝试通过计算它在相同标签兄弟中的序号位置来处理它。为此，我们需要询问兄弟姐妹的父节点。这就是事情变得奇怪的地方。 SPAN 元素报告它的 Parent 是一个 id="recent-index" 的 DIV 元素。但是，这 不是 SPAN 的 直接 父级（直接父级是 LI class="wrap isAdv"）。这会导致该方法失败，因为 - 不出所料 - 它无法在孩子中发现 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. 我怀疑观察到的效果可能是由于某些脚本在我背后运行。但是，我在网络编程方面的知识并没有那么深入。

编辑：错别字

Answer 1

依赖 :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 - 由于嘶嘶声参考。例如，您可以将上述内容注入到附加到 body 的最后一个子项的脚本标记中的自动执行匿名函数中。