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元素报告它的父是一个id ="recent-index"的DIV元素.但是这不是在眼前的SPAN的父(直接父是李类="包装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为父XX.怎么会这样？任何见解？

提前再次感谢您.

笔记:

1. 我保存了Html代码(因为它显示在WebBrowser.Document.Html中)并自己检查它是100%确定没有发生任何有趣的事情(也就是我在IE9中看到的不同代码提供给WebBrowser控件 - 但这不是发生结构匹配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 - 由于 sizzle 参考。例如，您可以将上述内容注入到附加到 body 最后一个子级的脚本标记中的自执行匿名函数中。