:MS Edge 中的范围伪选择器

Question

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

SCRIPT5022: SCRIPT5022: SyntaxError

我想知道是否有 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.

的 polyfill

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>

要测试本机支持，您只需将 document.querySelector(':scope') === document.documentElement 包装在 try catch 块中即可。

:MS Edge 中的范围伪选择器

:scope pseudo-selector in MS Edge

javascript

microsoft-edge

selectors-api

编辑：