问题描述
早在 2021 年 5 月 19 日,我就最近(21 年 4 月至 21 日)对与 mshtml.dll
和后期绑定引用相关的界面的可疑更改撰写了 this 问答。如果您愿意,这是第 2 部分。
之前,在诸如 this 和 this 之类的问题中,我曾评论过 mshtml.dll
缺乏对各种 CSS 选择器的支持,尤其是关于 pseudo-classes。在上述问题中,我强调了 nth-child()
和 nth-of-type()
未针对 MSHTML
实现。
运行时错误“-2140143604 (8070000c)”:无法完成 由于错误 8070000c 而操作。
我希望有些事情会因为与 Internet Explorer (IE)
相关的各种版本/平台不再受支持(MSHTML
与此相关 - 请参阅我的 this。我没想到
找到支持的 CSS 选择器的最新改进。以下面的例子:
Option Explicit
''required references:
'' Microsoft HTML Object Library
Public Sub Csstest()
Const URL = "https://books.toscrape.com/"
Dim html As MSHTML.HTMLDocument
Set html = New MSHTML.HTMLDocument
With CreateObject("MSXML2.XMLHTTP")
.Open "GET",URL,False
.send
html.body.innerHTML = .responseText
End With
Debug.Print html.querySelector("Meta:nth-of-type(2)").outerHTML
End Sub
在 21 年 4 月至 5 月之前,由于使用了未实现的语法,这可能会出错。
现在,在我的设置中,我在 5 月初(最新)看到 mshtml.dll
的更新,我得到的结果与我通过自动化 Internet Explorer 实例运行它时得到的结果相同,它已经得到支持:
<Meta name="created" content="24th Jun 2016 09:29">
那么,VBA 目前支持哪些 CSS 选择器?
我已经介绍了“我们为什么关心?”在之前的问答中,这里不再重复。但是,我将重新说明我的设置:
我的设置:
OS Name Microsoft Windows 10 Pro
Version 10.0.19042 Build 19042
System Type x64-based PC
Microsoft® Excel® 2019 MSO (16.0.13929.20206) 32-bit (Microsoft Office Professional Plus)
Version 2104 Build 13929.20373
mshtml.dll file 11.00.19041.985
ieframe.dll file 11.0.19041.964
反馈:
与之前的问答一样,对于没有/没有看到这些更改的设置,我将不胜感激。我将对此添加反馈以供其他人参考。
解决方法
tl;dr;
对 css 选择器和 Element.querySelector
的支持要大得多(允许在链接 querySelector(All)
调用时具有更大的灵活性。这极大地增强了 MSHTML
类在 CSS 方面的表现力选择器,并将其与 Selenium Basic
相提并论。
动机:
我一直想写一个支持选择器的列表有一段时间了,因为缺乏与 VBA 相关的文档,以及学习什么有效和无效的试验和错误性质。这个最新的变化促使我这样做,并包括那些目前支持在其中使用 CSS 选择器的库。
注意事项:
- 这并不详尽;它非常全面。
- 如果您发现任何错误,特别是关于 Selenium Basic 的错误,我必须凭记忆编写,请通知我,我会相应地进行编辑。
- 最近的变化,由汇总表中的阴影单元格表示 (JSFiddle)|在下面的简化表中,标有 ✔* 的是它们与我的设置有关的时间点。您的里程可能会有所不同,例如完全不支持 CSS 选择器
之前和之后:
传统上,就支持它们的库而言,VBA 中 CSS 选择器的表达方式如下:
Selenium 实现了迄今为止最多的 CSS 选择器。
当前状态:
我认为已实现的选择器的当前状态如下(对于图像质量很抱歉,即使您点击放大表格 - 请参阅 JSFiddle 以获得最清晰的表格视图):
我也将其作为简化的 HTML 插入包含在内,因此您可以单击超链接。请点击代码插入下方的运行代码片段,然后点击完整页面链接。抱歉,表格很大,我什至没有涵盖所有可以想到的选择器 - 只有我认为可能经常使用的主要选择器。插入一个花哨的表格让我超出了身体字符的限制,所以我们到了。如需精美表格,请参阅此 JSFiddle - 新支持的表格带有阴影。
<!DOCTYPE html>
<html>
<head>
<title>VBA: Valid CSS Selectors 2021-05-30</title>
</head>
<body>
<h1>VBA: Valid CSS Selectors 2021-05-30</h1>
<table>
<tr>
<td colspan="2">
<a href="https://drafts.csswg.org/selectors-3/">Selectors Level 3 Specification</a>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Pattern</td>
<td>Represents</td>
<td>Description</td>
<td>Level</td>
<td>Microsoft HTML Object Library (MSHTML)</td>
<td>Microsoft Internet Explorer Controls (SHDocVw)</td>
<td>Selenium Type Library (Selenium)</td>
<td>Remarks</td>
</tr>
<tr>
<td>*</td>
<td>any element</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#universal-selector">Universal selector</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E</td>
<td>an element of type E</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#type-selectors">Type selector</a>
</td>
<td>1</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo]</td>
<td>an E element with a "foo" attribute</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo="bar"]</td>
<td>an E element whose "foo" attribute value is exactly equal to "bar"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo~="bar"]</td>
<td>an E element whose "foo" attribute value is a list of whitespace-separated values,one of which is exactly equal to "bar"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo^="bar"]</td>
<td>an E element whose "foo" attribute value begins exactly with the string "bar"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo$="bar"]</td>
<td>an E element whose "foo" attribute value ends exactly with the string "bar"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo*="bar"]</td>
<td>an E element whose "foo" attribute value contains the substring "bar"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E[foo|="en"]</td>
<td>an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>2</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td> </td>
</tr>
<tr>
<td>E[attr operator value i]</td>
<td>value compared case-insensitively (ASCII range).</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>4</td>
<td>x</td>
<td>x</td>
<td>?</td>
<td>
<a href="https://www.w3.org/TR/selectors-4/#attribute-case">i identifier</a>
</td>
</tr>
<tr>
<td>E[attr operator value s]</td>
<td>value compared case-sensitively (ASCII range).</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#attribute-selectors">Attribute selectors</a>
</td>
<td>4</td>
<td>x</td>
<td>x</td>
<td>x</td>
<td>
<a href="https://www.w3.org/TR/selectors-4/#attribute-case">s identifier</a>
</td>
</tr>
<tr>
<td>E:root</td>
<td>an E element,root of the document</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>HTML node only</td>
</tr>
<tr>
<td>E:nth-child(n)</td>
<td>an E element,the n-th child of its parent</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td>nth-child(odd) and (even) as well as nth-child(range) also supported</td>
</tr>
<tr>
<td>E:nth-last-child(n)</td>
<td>an E element,the n-th child of its parent,counting from the last one</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:nth-of-type(n)</td>
<td>an E element,the n-th sibling of its type</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:nth-last-of-type(n)</td>
<td>an E element,the n-th sibling of its type,counting from the last one</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:first-child</td>
<td>an E element,first child of its parent</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:last-child</td>
<td>an E element,last child of its parent</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:first-of-type</td>
<td>an E element,first sibling of its type</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:last-of-type</td>
<td>an E element,last sibling of its type</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:only-child</td>
<td>an E element,only child of its parent</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:only-of-type</td>
<td>an E element,only sibling of its type</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:empty</td>
<td>an E element that has no children (including text nodes)</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#structural-pseudos">Structural pseudo-classes</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:link</td>
<td rowspan="2">an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)</td>
<td rowspan="2">
<a href="https://drafts.csswg.org/selectors-3/#link">The link pseudo-classes</a>
</td>
<td>1</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:visited</td>
<td>1</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E:not(s)</td>
<td>an E element that does not match simple selector s</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#negation">Negation pseudo-class</a>
</td>
<td>3</td>
<td>✔*</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E F</td>
<td>an F element descendant of an E element</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#descendant-combinators">Descendant combinator</a>
</td>
<td>1</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E > F</td>
<td>an F element child of an E element</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#child-combinators">Child combinator</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E + F</td>
<td>an F element immediately preceded by an E element</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#adjacent-sibling-combinators">Next-sibling combinator</a>
</td>
<td>2</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>E ~ F</td>
<td>an F element preceded by an E element</td>
<td>
<a href="https://drafts.csswg.org/selectors-3/#general-sibling-combinators">Subsequent-sibling combinator</a>
</td>
<td>3</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td>foo,bar</td>
<td>foo,bar will match both <foo> and <bar> elements.</td>
<td>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Selector_list">Selector list</a>
</td>
<td>1</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td> </td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>element.querySelector</td>
<td>Expanded element.querySelector</td>
<td>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelector">Element.querySelector</a>
</td>
<td>API</td>
<td>✔</td>
<td>✔</td>
<td>✔</td>
<td>Can now chain querySelector(All) calls on wider base node range</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Lib info:</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td>Microsoft HTML Object Library (MSHTML)</td>
<td>MS Internet Explorer Controls (SHDocVw)</td>
<td>Selenium Type Library (Chromedriver)</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Lib</td>
<td>mshtml.dll</td>
<td>ieframe.dll</td>
<td>selenium.dll</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>File Version</td>
<td>11.00.19041.985</td>
<td>11.0.19041.964</td>
<td>2.0.9.0</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Date</td>
<td>2021-05-12</td>
<td>2021-05-12</td>
<td>2016-03-02</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
12 个新支持的伪类和一个扩展的 Element.querySelector:
如果您运行上述代码段并查看完整页面,您将看到现在至少支持 12 个新支持的伪类,并提到了扩展的 Element.querySelector。 Bam,kapow,ker-sploosh,关上众所周知的前门……欢迎来到 VBA CSS Canaan、Scraper 的香格里拉、Nerd Nirvana!
我认为 ieframe.dll
也可能有一些有趣的更新;这里的重点是最近的 mshtml.dll
变化。您可能希望在 Lifecyle 公告 here 和 here 下查看 IE 支持,或搜索 Lifecycle FAQ - Internet Explorer and Microsoft Edge
。
由于扩展 Element.querySelector()
的好处在上一个问答中没有涉及,我将在这里简要提及。通过扩展,我的意思是增加了您可以调用 querySelector
的元素数量,这样您就可以链接 .querySelector()
,即 .querySelector(..).querySelector(..)
和 .querySelector(..).querySelectorAll(..)
。
以前,这在很大程度上是不可能的。如 this 问题所示。通常,解决方法是将传统方法链接到返回的节点上,例如
html.querySelector("body").getElementsByTagName("li")
;这会导致不雅观的链接和难以遵循,以及到目标元素的有限路径。更好的是,恕我直言,是代理 MSHTML.HTMLDocument
变量的想法,它将携带 innerHTML
返回的当前节点的 querySelector
,从而允许您再次调用 querySelector(All)
;从而获得更快的匹配、更清晰的语法和更大的多功能性。这种方法的许多例子here。
尾注:
这是一个正在修订的文件。欢迎所有关于改进的反馈。
谢谢:
最后,非常感谢@SIM 运行我的测试脚本以在不同的设置上检查这个。