MS Edge 中的 :scope 伪选择器

Question

每当我querySelectorAll在 Microsoft Edge 中使用:scope伪选择器时，控制台中都会出现此错误

SCRIPT5022： SCRIPT5022：语法错误

我想知道是否有替代方案querySelectorAll，我在其中使用此参数：:scope > * > table。我不想为此使用 jQuery。谢谢。

编辑：

我还想补充一下querySelector它本身就有效

好的，这是代码示例：

            function pJSON(panel) {
                var json = {tables: [], images: [], text: ""};
                var tables = Array.from(panel.querySelectorAll(":scope > * > table"));
                var images = Array.from(panel.querySelectorAll(":scope > * > img"));
                var text = panel.querySelector(":scope > textarea");
                tables.forEach(table => {
                    json["tables"].push(tJSON(table));
                });
                images.forEach(image => {
                    json["images"].push(image.outerHTML);
                });
                if (text) {
                    json["text"] = text.value;
                }
                return json;
            }

我要再次指出，它适用于除 IE 和 Microsoft Edge 之外的所有浏览器

哦，还有一个可能动态添加的 HTML 示例，这是我调用此方法时的代码：

<div>
    <input type="file" multiple=""><br>
    <button>Add Table</button><br>
    <div>
        <table style="display: inline-table;">
            <tbody>
                <tr>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <button style="margin-left: 100px;">x</button>
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>  
                    </td>
                    <td>
                        <input type="file" multiple=""><br>
                        <button>Add Table</button><br>
                        <textarea placeholder="Write some text"></textarea>
                    </td>
                    <td>
                        <button style="margin-left: 100px;">x</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <button style="margin-left: 100px;">x</button>
    </div>
</div>

Answer 1

所以你所追求的实际上是:scope.

https://github.com/jonathantneal/element-qsa-scope有一个可用

它的工作原理基本上是首先在要匹配的元素上定义一个足够唯一的选择器，并将其添加到传递给 querySelector 的选择器之前。

const li = document.getElementById('target');
console.log('no :scope', li.querySelector('li>a')) // Link

// workaround
const UUID = Date.now()+'';
li.setAttribute('data-scope-uuid', UUID);
console.log('workedaround', li.querySelector('[data-scope-uuid="'+UUID+'"] li>a'));
li.removeAttribute('data-scope-UUID');

// where supported
console.log(':scope', li.querySelector(':scope li>a'));

<ul>
  <li id="target"><a>Link</a>
    <ul>
      <li><a>Sublink</a></li>
    </ul>
  </li>
</ul>

要测试本机支持，您可以简单地将 a 包装document.querySelector(':scope') === document.documentElement在 try catch 块中。