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的立即父级（直接父级是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。怎么会这样？有什么见解吗？

提前再次感谢你。

注意：

我保存了Html代码（因为它显示在WebBrowser.Document.Html中），并且我自己检查了100％确定没有发生任何有趣的事情（也就是说我提供给WebBrowser控件的代码不同于我看到的代码在IE9中 - 但是没有发生结构，相关路径的结构匹配为100％。
我正在使用此处列出的说明在IE9模式下运行WebBrowser控件：

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

尝试让WebBrowser控件和IE9尽可能相似地运行。
我怀疑观察到的效果可能是由于我背后的某些脚本运行造成的。然而，我的知识在网络编程方面并没有达到目的。

编辑：错别字

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的最后一个子节点的脚本标记中的自执行匿名函数中注入上述内容。

HtmlElement.Parent返回错误的父级

1 个答案: